New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Header #16
Comments
The SCRa redesign has repurposed this header slightly for use with clinical facing staff. We've not done any explicit testing of the header itself but we've observed users navigate using the options within it during user testing. The change was fairly hacky for the purposes of the prototype but the code we used was:
The existing component handled the menu collapse on smaller devices so no work was done there. |
The class
This behaviour of wrapping the name below the logo on smaller devices is actually the default behaviour for service header, should it be the default behaviour for transactional too and we can just remove this class? Example with class Example without the class Example of the service header: Seems the font size is also smaller on the service header when wrapped, should this be consistent with the transactional header? |
I've been thinking about rules on when to use the transactional header. All the service finders on NHS.UK, which have stepped questions - asking things like location and age - use the standard main nav header throughout https://www.nhs.uk/service-search/find-a-psychological-therapies-service/ (for example) Essentially the service finders help users interrogate content on the website, they're not a distinct 'service'. Therefore it might be a weird user experience to change the header to the slimmed-down transactional one, to ask for your postcode then the main nav appears on the results page? But a service like ‘get an isolation note’ https://111.nhs.uk/isolation-note/ is a distinct thing separate from the website, therefore it makes sense to use the transactional header… you click a link at the end of your transaction to get back to the website So a rule could be - if its a couple of questions to help you find content on the website use the main site header if it's a 'proper' service then transactional? Note: would be useful to define what a 'proper' service is. |
Currently the header links don't work on a small screen (or very zoomed in screen) with javascript disabled. The links are replaced with a menu button and clicking the menu button does nothing with js disabled. It would be good if the links work without js enabled 🙂 |
Thanks @FridaTveit, I'll report the bug in the NHSUK frontend repo. I'm fairly certain this worked recently 🤔 |
Thanks @davidhunter08! 🙂 |
Hey @davidhunter08 @AdamChrimes - We'd be really interested in understanding any user research underpinning the transactional header. Particularly around what users try to do if they need to abandon the service. |
Do you have a link to the bug @davidhunter08? We've noticed the same issue on our service (we're actually using the NHS Frontend via the Nightingale Wordpress theme) and we'd like to feedback if possible. I notice that it is currently an issue on the NHS.UK homepage too. |
Hi @StephenHill-NHSBSA doesn't look like an issue was created, are you OK to open an issue with the details on the NHSUK frontend repo and we can look into it? |
Yeah not a problem - will do it now 👍 |
Re. the NHS website (nhs.uk) recent header update to expose the search input on mobile devices For the full year 2020: Generally, across other websites for different industries, you're looking at 50% of visitors using search, so our figures are low. Whilst the header is responsive - we're not providing an equal experience across all screen sizes and we're hiding main features (such as search) from the majority of our users (nearly 80% of visitors are on mobile). The low numbers for search usage could be down to the website having great SEO, content ranking highly on search engines - meaning users are finding what they need straight away. But health topics are complex and often use new words or cover a number of areas. A user being diagnosed with Diabetes, for example - we know users who have been newly diagnosed with a life-changing condition will want to go on long information seeking journeys covering symptoms, condition management, treatments; medicines etc. pages that often don't live together so can only be found through using the main navigation or search. If users aren’t finding what they want if they’re coming from Google, then we would expect to see search interaction on the website to be higher? This is a big assumption, again - due to the complexity of health topics. On mobile devices, where the search input is hidden - we're seeing a large majority of users 85% making multiple return visits within less than a day - indicating that having the search hidden is affecting retaining users. The IA team tested the hypothesis that having an exposed search on mobile devices will increase search usage and help users find content on the website during multiple rounds of usability testing. We found interactions did increase with an overall majority of users interacting at least once with the search input during the sessions. The exposed search went live on 16 April 2021 at 1 pm and we've already seen interactions increasing. I'll update this ticket after a week of data has come through. Data from 1 Jan - 31 Dec 2020: Total visits 469,171,557 (373,222,567 mobile), Unique visitors 190,091,804 (145,901,043 mobile), Number of mobile phone users interacting with search icon 2,325,850, Number of mobile phone users interacting with search 2,233,682 |
Example of a custom header on the Every Mind Matters site: |
I'm looking to re-create the NHS website in a template of sorts. The example used in the guidance uses the old navigation header, any chance this could be updated to use the new version? |
I'm using the Nunjucks of this component in a prototype. It would be good if I could change the link for the NHS logo, as you can for the "primary links". I need to change the link because I don't want participants to be able to access the root of the prototype during usability testing (which is not the NHS website homepage). |
@cameronross2 - try using the |
@mcheung-nhs That did it, thanks Michael! |
We have added some additional elements to the header recently, including information about the logged in user, their role and organisation. As well as allow users to change their role within system and logout. We have done this in conjunction with the 'header for logged in users' for navigational elements (#192). Testing this header within our prototype has proven the additions to be helpful to users who need to perform actions with multiple access levels and for multiple organisations. |
Wondering if anyone has done any work around an Organisational header with a service name or transactional service name? We're looking at building transactional services for GP practices, so would want to display their organisational name along with the transactional service name. |
Just raising a point that was mentioned in the public Service Manual Slack channel around the autocomplete search box in the header. The placeholder text appears to fail WCAG AA contrast ratio: Posting here in case somebody that was involved in building this component is able to explain or offer some further context. If not, I can raise it as a bug. |
Hi @danjohnstonUX, I've just fixed this (nhsuk/nhsuk-header-search#3) so it's waiting for an update/release to the CMS to bring in the change. |
Ace! Thanks @mcheung-nhs |
We're going to test this for a Organisational header with a transactional service name: It combines the 2 existing components, so requires minimal code to achieve.
Minimal CSS to fix spacing so that it aligns left and focus states do not overlap (could probably be achieved with utility classes also)
|
@chrimesdev – Definitely interested in seeing how this performs. I did wonder though based on the screenshot, if the transaction name can be within the body itself and exist as an eyebrow header |
Findings about search and menu from NHS England's Digital First Primary Care team Search box The search field should be open at all page widths. If it’s just an icon, people don’t use it. Menu Not just a hamburger icon, it needs to have some kind of CTA or label. |
It would be good to hear from any teams whose service covers social care as well as the NHS. Have you seen any issues with branding for social care users? |
3rd party partners providing NHS servicesWe don't currently have a header example for 3rd party suppliers. We are looking at developing one, working with App and Wayfinder teams. In the meantime, teams should follow the NHS identity guidelines, section on service branding, NHS services provided by 3rd party suppliers. |
Feedback on header page from a content designerGive it title "Headers" - as it covers NHS header and org header. |
Two reported issues with the header:
|
Use this issue to discuss the header in the NHS digital service manual
Related issues:
The text was updated successfully, but these errors were encountered: