Header for 'logged in' users

[RichFlick]

What We’re looking at creating an additional NHSUK header style for the PIMS replacement profile editing app.

Why The thinking is it will help users (profile editors, comment responders & managers) to more easily distinguish public facing pages from ‘behind the scenes’ admin pages on NHSUK.

Anything else The idea and design also stems from the work HMRC have done on their 'Application' header:

Main page https://design.tax.service.gov.uk/hmrc-design-patterns/account-header/

Example https://design.tax.service.gov.uk/examples/account-header/example/

Here are a couple of mockups for the NHSUK App Header:

We’re currently putting the prototype together with a view to first round of testing early to mid Jan.

I've not found anything else similar but if I've missed a posted issue or anyone else is working on something similar but not added it yet, it would be great to hear from you.

[RichFlick]

Editor prototype with App Header can be seen here: https://nhsuk-org-review-prototype.azurewebsites.net/profiles-comments/

[benturner1976]

@RichFlick, thanks for the prototype code.

For info, I am thinking of using this header style on 'Create and manage identities' (the service that will replace the Care Identity Service - used to manage smartcards). But had a few questions before I commit...

1) Is it okay to start using on services (we're heading into Private Beta at the mo) and is it likely to change significantly or be scrapped for any reason you are aware of?

2) And do you know if we should be using, Sign in / Sign out - OR - Log in / Log out - OR - Login / Logout?

Cheers!

[benturner1976]

An update to the post above...

We have added some additional elements to the header recently, including information about the logged in user, their role and organisation. It also allows users to change their role within system and logout. 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. It helps users ensure they are performing actions on behalf of the right organisation on any page and easily change the organisation as they need.

[chrimesdev]

https://covid-status.service.nhsx.nhs.uk/ has a Header for logged in users (same experience on mobile/desktop - hidden behind 'Menu' button)

[maddyow]

'Sign in' was chosen for Campaign Resource Centre on the basis GOV seem to favour it and in the case of this particular product, 'Sign in' seemed more intuitive than 'Log in' which we originally tried.

Navigation menu on desktop

GOV example

"include a ‘button’ linking into the service, with text that’s consistent with the action you’re asking users to take — for example, ‘Start now’, ‘Sign in’ or ‘Register or update your details’ (if you need a secondary call to action, use a standard link)" https://design-system.service.gov.uk/patterns/start-using-a-service/

[maddyow]

I've since found a few more GOV examples, which in fact us 'Log in': Digital marketplace

The Purchasing Platform

And one more which uses 'Sign in' Crown Commercial Service

[taylor-la]

On the Apply for Care ID service, we've been reusing the logged in user navigation component from Care Identity Management (CIM), mentioned above by benturner1976. We've found during usability testing sessions with a prototype that occasionally the navigation links are missed. This needs more thorough exploration to understand if it's to do with the content, or perhaps to do with colour contrast/size. We've not had any reports of this issue in the live service though.

[Asad-acc]

We've since updated the profile editor navigation to simplify the design, making it more aligned with the NHS branding and occupying less vertical space.

[sarawilcox]

NHS website My account example

And log out button

[lasara-d]

@Asad-acc @taylor-la My team are looking at something very similar for Bowel screening staff. We are wanting to show role and location and have the option to change these easily, we are a bit concerned about space since some of the roles and org names are pretty long. Did your team decide to remove this info from the header?

[Asad-acc]

@Asad-acc @taylor-la My team are looking at something very similar for Bowel screening staff. We are wanting to show role and location and have the option to change these easily, we are a bit concerned about space since some of the roles and org names are pretty long. Did your team decide to remove this info from the header?

I have consulted with a team member who was involved in designing the header we currently use. As our users have already signed in as themselves, it was determined that displaying their name and role was of lesser importance and was removed.

[frankieroberto]

I've done some initial research and design exploration of the logged in header.

Examples

First, some more examples of existing services:

NHS.UK website (signed out)

NHS.UK website / web app (signed in)

Record a vaccination (signed in)

Manage vaccinations in schools (signed in)

Summary

Based on these, and the other examples in the thread above, there are 2 common elements:

• a link to a profile / account page
• a link to sign out

There’s also a consensus that these 2 elements should appear at the top right.

The ways the examples vary is:

• the label for the profile / account link - 'My account' or 'Account and settings' or the user’s email address
• the label for the sign out link - 'Sign out' or 'Log out'
• whether or not to include the profile icon
• whether the 2 links appear above the horizontal divider, in line with the NHS logo and service name, or below the horizontal divider, in line with the main navigation

Design exploration

One option might be to allow all of these as options, so that different services could do slightly different things depending on their context and users, eg public vs staff facing services, or whether there’s also a need for a search box or other items in the header.

Here’s roughly how this might look (service name and and navigation options are just placeholders):

Above the line, no icon

Above the line, with icon

Above the line, with icon and 'My account' wording

Above the line, with icon and search box

(This is pretty tight and I’m not sure would be recommended... 😬)

Below the line

Below the line with 'My account' wording

Below the line with search

Code and possible nunjucks options

Some very rough code for these examples here: https://github.com/nhsuk/nhsuk-frontend/pull/967

Nunjucks code could look something like this:

Above the line:

{{ header({
  "service": {
    "name": "Invite patients to a consultation"
  },
  "showNav": "true",
  "showSearch": "false",
  "account": {
    "profile": {
      text: "frankie.roberto@nhs.net",
      href: "#",
      icon: true
    },
    "signOut": {
      text: "Sign out",
      href: "#"
    }
  },
  "primaryLinks": [
    {
      "url"  : "#",
      "label" : "Find a patient"
    },
    {
      'url' : '#',
      'label' : 'Consultation schedule'
    },
    {
      'url'  : '#',
      'label' : 'Settings'
    }
  ]
}) }}

Below the line:

{{ header({
  "service": {
    "name": "Invite patients to a consultation"
  },
  "showNav": "true",
  "showSearch": "false",
  "primaryLinks": [
    {
      "url"  : "#",
      "label" : "Find a patient"
    },
    {
      'url' : '#',
      'label' : 'Consultation schedule'
    },
    {
      'url'  : '#',
      'label' : 'Settings'
    }
  ],
  "secondaryLinks: [
    {
      'url'  : '#',
      'label' : 'frankie.roberto@nhs.net'
    },
    {
      'url'  : '#',
      'label' : 'Sign out'
    }  
  ]
}) }}

Alternative

Alternatively, we could offer less flexibility, and the design system could advocate for a single option only (eg always having the account stuff above the line).

Feedback welcome!

[lasara-d]

@frankieroberto These look good, i prefer the options with the user name and actions like logout/signout in the main header container rather than in the navigation bar only because what if you ever need to add more navigation links and also if your users have a long name. I was working on this in screening recently but we had the additional need to also show the user role because they may need to change it. This is what we came up with:

And this is how it would look collapsed

This does make the top part of the header container taller but also allows for more navigation items. Its not perfect but just thought i would share :)

[johnrimmer2]

This is really interesting work - Kudos frankie and lasara-d (input). Personally i'm drawn to 'Below the line with search' as my preferred option.

Reasoning

• sections will be consistently on the bottom line, could always package additional sections in the 'more'.
• Leaves space if required for the search
• 'My account' naming feels more obvious as to what it is/does than the user's email address
• If the service name needs to wrap, then it can do, perhaps more elegantly then with other items on the top
• ...not sure if it's a conscious effort, but I seems to see less icon usage on NHS sites/apps, therefore the user icon probably not needed

Goes without saying, just my opinion, nice work though guys!

[frankieroberto]

The NHS Digital Onboarding Service uses this pattern, with the logged in email address at the top alongside a 'Log out' link:

[anandamaryon1]

Current work in progress designs for this: https://github.com/nhsuk/nhsuk-frontend/pull/983

Next steps:

• Explore how long account items (eg. user's email address) wrap alongside the service name
• Explore the responsive mobile layout
• Start to outline the guidance
• Define default wording for sign out and my account items

[anandamaryon1]

We're still working on this, here's a summary:

• still working on the proposed design and finer details: https://github.com/nhsuk/nhsuk-frontend/pull/983
• has kicked up some other work to simplify the header code and design complexity: https://github.com/nhsuk/nhsuk-frontend/pull/996 and https://github.com/nhsuk/nhsuk-frontend/pull/1000

Also prompted some related but potentially independent tasks and design tweaks:

• https://github.com/nhsuk/nhsuk-frontend/pull/999
• https://github.com/nhsuk/nhsuk-frontend/pull/986

To do

• [ ] Finalise proposed logged in header
• [ ] Review design with working group
• [ ] Draft guidance for component
• [ ] Content 2i for guidance
• [ ] Design review
• [ ] Frontend testing