Header

[davidhunter08]

Use this issue to discuss the header in the NHS digital service manual

Related issues:

• Header for logged in users

[danjohnstonUX]

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:

.nhsuk-header__menu { margin: 8px 0; } .nhsuk-header__menu-toggle { margin-right: 0; } @media (min-width: 61.875em) { .nhsuk-header__navigation { clear: none; float: right; } .nhsuk-header__navigation-link { padding: 18px; } }

The existing component handled the menu collapse on smaller devices so no work was done there.

[chrimesdev]

The class nhsuk-header__transactional-service-name--long that is available for the transactional header is not documented anywhere. This class wraps the transactional name below the logo on smaller devices.

.nhsuk-header__transactional-service-name--long {

  @include mq($until: large-desktop) {
    padding-left: 0;
    padding-top: nhsuk-spacing(2);
    width: 100%;
  }

}

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 nhsuk-header__transactional-service-name--long:

Example without the class nhsuk-header__transactional-service-name--long:

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?

[bencullimore]

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.

[FridaTveit]

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 🙂

[davidhunter08]

Thanks @FridaTveit, I'll report the bug in the NHSUK frontend repo. I'm fairly certain this worked recently 🤔

[FridaTveit]

Thanks @davidhunter08! 🙂

[mrmjprice]

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.

[StephenHill-NHSBSA]

Thanks @FridaTveit, I'll report the bug in the NHSUK frontend repo. I'm fairly certain this worked recently 🤔

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.

[chrimesdev]

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?

[StephenHill-NHSBSA]

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 👍

[davidhunter08]

The NHS website has recently modified the header component to expose search.

[davidhunter08]

More info / discussion on the organisational header

[bencullimore]

Re. the NHS website (nhs.uk) recent header update to expose the search input on mobile devices

For the full year 2020: 6.2% of TOTAL mobile visits interacted with the search icon 1.5% of UNIQUE mobile visitors integrated with the search icon

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

[davidhunter08]

Example of a custom header on the Every Mind Matters site:

[Tosin-Balogun]

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?

[cameronross2]

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).

[mcheung-nhs]

@cameronross2 - try using the homeHref argument? https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/components/header#nunjucks-arguments

[cameronross2]

@mcheung-nhs That did it, thanks Michael!

[benturner1976]

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 (https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/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.

[chrimesdev]

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.

[danjohnstonUX]

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.

[mcheung-nhs]

Hi @danjohnstonUX, I've just fixed this (https://github.com/nhsuk/nhsuk-header-search/pull/3) so it's waiting for an update/release to the CMS to bring in the change.

[danjohnstonUX]

Ace! Thanks @mcheung-nhs

[chrimesdev]

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.

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.

<header class="nhsuk-header nhsuk-header--organisation nhsuk-header--white" role="banner">
  <div class="nhsuk-width-container nhsuk-header__container">
    <div class="nhsuk-header__logo">
      <a class="nhsuk-header__link" href="/" aria-label="Anytown Anyplace Anywhere NHS Foundation Trust homepage">
        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
          <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
          <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
        </svg>
        <span class="nhsuk-organisation-name">Anytown Anyplace <span class="nhsuk-organisation-name-split">Anywhere</span></span>
        <span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
      </a>
      <div class="nhsuk-header__transactional-service-name app-header__transactional-service-name">
        <a class="nhsuk-header__transactional-service-name--link" href="/change-your-personal-details">Change your personal details</a>
      </div>
    </div>
</header>

Minimal CSS to fix spacing so that it aligns left and focus states do not overlap (could probably be achieved with utility classes also)

.app-header__transactional-service-name {
  padding-left: 0;
  padding-top: 8px;
}

[Tosin-Balogun]

@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

[sarawilcox]

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.

[sarawilcox]

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?

[sarawilcox]

3rd party partners providing NHS services

We 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.

[sarawilcox]

Feedback on header page from a content designer

Give it title "Headers" - as it covers NHS header and org header.

[sarawilcox]

Two reported issues with the header:

• Header navbar with too many/too few items #897 - to be resolved
• Font sizes in the header for longer service/org names look too small - to be monitored - in backlog

[tvararu]

This is our header on Manage vaccinations in schools (Mavis):

We use the following custom SCSS:

.app-header {
  &__button-link {
    @extend .nhsuk-header__navigation-link;
    border: none;
    border-bottom: nhsuk-spacing(1) solid transparent;
    border-top: nhsuk-spacing(1) solid transparent;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
  }

  &__navigation-item--divider {
    margin-right: auto;
  }
}

.app-header__button-link is used for the "Sign out" button which is actually a small form that POSTs to an endpoint to sign out the user. This is more idiomatic than using a GET request via a regular link, and it works without JavaScript.

.app-header__navigation-item--divider is used for the "Vaccines" link to create the visual separation between the navigation items and the user account management and "Sign out" items.