Navigation — we want your input (examples, research, code)

[christopherthomasdesign]

We plan to work on Navigation soon and we'd welcome your input.

About this work

This component would help users to navigate around a service.
It'd more likely to be found in services with accounts, case management systems, and informational websites.

Work on navigation might include:

• Revisiting navigation in the header
• Sub navigation (below the header)
• Side navigation (usually in a left-hand column)

Previous conversations can be found in alphagov/govuk-design-system-backlog#76 and alphagov/govuk-design-system-backlog#151.

What we're looking for

We're currently looking for:

• examples of designs: screenshots, prototypes, links to live services
• user research findings: tell us how your navigation has tested with users, what's worked and what hasn't
• code: prototype code or production code, share your implementations of navigation in services

Existing examples

Alternative or adapted headers

• GOV.UK Component Guide Layout super navigation header

Sub navigation

• Digital Scotland site navigation
• DWP Global navigation
• DWP Secondary navigation
• GOV.UK Design System navigation (not currently included in GOV.UK Frontend)
• HMRC Account header
• MOJ Primary navigation
• MOJ Sub navigation

Side navigation

• Digital Scotland Side navigation
• MOJ Side navigation

[adyhoran1]

The Manage an academy conversion in the Department for Education (DfE) uses a navigation bar at the top of academy conversion projects. Here's an example:

Here is some user research findings. You can access the service using the login details in our design history.

[christopherthomasdesign]

Really helpful @adyhoran1 and thanks for the research findings, it'll be really useful to have that kind of detail when we start working on this!

I can probably guess the answer to this, but why did you choose this kind of navigation over tabs?

[adyhoran1]

@christopherthomasdesign we originally used tabs when our service acted as a "hub" for related internal services: see prototype version 1. However, we felt that hiding services in tabs was not the correct use of them, so we switched to a navigation in prototype version 2.

It looks like navigation was then added to project list pages in our service for consistency:

[theboypayne]

On Test Digital (Test and Trace), we've used this sub-navigation bar across numerous services.
The sub-navigation appears once they've signed into their NHS login account at the start of the respective service, which allowed them to pre-populate their saved details, often taking journey times down from an average of 5 to 2 minutes.
They can see their name, sign out or view their account from the navigation.

We tested this account bar with users before releasing it.
During these sessions, we asked users to go to their account area once they'd completed the user journey. We then asked them to sign out. The outcome of the sessions was that users noticed the account bar, and were able to use the functions within, and so we were satisfied that it could be developed and released.

Since release, our analytics and VoC feedback routes have not indicated any issues with the sub-navigation.

The proto htmlcode for this is somewhat hacky - it was coded quicky and dirty at a very busy time for the programme:

<div id="includedContent1">
   <div class="govuk-phase-banner">
    <p class="govuk-phase-banner__content" style="line-height: 35px">
      <span class="govuk-phase-banner__text">
      <!--  Signed in as <strong>Bob Smith</strong> -->
        Signed in as <strong>Bob Smith</strong>
      </span>
    </p>
    <div class="account-menu">
      <a href="view-account-check-progress" style="margin-right: 20px">View account</a>
    <!--  <a href="https://settings.login.nhs.uk/" target="blank" rel="noreferrer" style="margin-right: 20px">Update NHS login details</a> -->
      <a href="sign-out-check-progress">Sign out</a>
    </div>
  </div>
</div>

The css snippets are:

.account-menu {
  display: block;
}

@media (min-width: 48.0625em) {
  .account-menu {
    float: right;
    margin-top: -30px
  }
}

Hope this is helpful.

[courtney-toth]

Here's an example from the Sign In (now One Login) self serve account that service teams use to test and integrate the Sign In product with their service.

We took elements of both Notify and Pay when designing the navigation. It's not live yet so I can provide a prototype link if it's helpful to see how the tiers of navigation all work. But to break it down:

• the main navigation at the top ties in with the product site and account credentials area,
• the breadcrumb shows the service the users are on and gives them easy access to a their list of services, and
• the left hand nav shows sections within the self-serve space

We've done some recent testing of the self serve account with this navigation included. Teams navigated with ease through the sections and we observed of a lot of organic movement across the account as part of other scenarios we were testing. Teams didn't require prompting to get anywhere, which was great to see.

[monicacrusellasfanlo]

@christopherthomasdesign I wanted to chip in with a couple of things in case they are useful.

Last year the Navigation and Presentation team did some research on the site wide menu bar, as we identified that people were clicking on ‘Government activity’ instead of ‘Topics’ for mainstream tasks.
Here you can read about it: https://docs.google.com/presentation/d/1NjOf9KdfkZkCa1fTKt3FNQdSDOVEWHVuTlogI3dgK_A/edit#slide=id.g10372e0cd7_2_16

As a result of this, we merged ‘Government activity’ and ‘Topics’ and named the menu button ‘Menu’ (this change is live since December).

We also just started looking at improving page level navigation elements, this includes:

• Related content
• Part of links
• Explore this topic
• Breadcrumbs
• Super-breadcrumbs

So far we’ve started looking at related content and part of links because we have insights that show that people struggle to grasp the distinction between related content and ‘part of’ links. We also know that the section ‘part of’ does not always help users to understand how that page sits within a larger grouping.

Here are some early work in progress design explorations with ideas of how to make part of links and related content clearer to users:
https://www.figma.com/file/4XLuKlCIT6cS15Npv92mQd/Page-level-navigation?node-id=106%3A10168&t=otrGj9RnilTH2qsP-1

Feel free to reach out if you want to discuss any of the above more in detail.

[christopherthomasdesign]

Thanks for sharing all this @monicacrusellasfanlo – sorry for the late response I missed this one!

What's a super breadcrumb?

[AllenConquest-6p6]

We would really like a sidebar like the MOJ one. An example is https://coronavirus.data.gov.uk. How can I integrate something like this into the govuk design system?

[frankieroberto]

We have recently added a navigation bar to our service. As part of this, we moved the "Sign out" link from the service navigation menu in the GOVUK header to the new navigation bar.

As part of these, we also:

• removed the border under the phase banner, as this was no longer needed
• made the blue border beneath the GOVUK header the width of the full screen, rather than the page width

Whilst there’s only 2 items in the navigation bar at the moment, part of the reason for doing this is to enable additional items to be added in the near future.

The mobile view is the same as the desktop view, with no collapsing of navigation items into a show/hide menu button.

Desktop view

Mobile view

[CharlotteDowns]

We've just added some guidance on how to 'share findings about your users' with us 📝. This will help us learn more about how your users navigate within your service.

[frankieroberto]

The Find a grant service from the Cabinet Office uses a primary nav with 3 items:

• Home
• Browse grants
• About us

[CharlotteDowns]

On support 17/01/2024, a user shared a need for a service that has sub services and associated navigation around that.

We shared examples from the GOV.UK one login header, specifically we looked at the example of multiple services in a navigation under the one login header with a long service name or menu.

[CharlotteDowns]

Speaking to a user on x-gov slack 01/02/2024.

They are building a service for their users to apply to share expertise, update and manage account information and make subsequent applications in the future.

We're using gov one login header for top nav, and the MoJ side navigation component, we also use some cards from DfE early years foundation service on the home page after some research found it was pretty common for some users to scroll down slightly and just miss the onelogin top navigation in their window.

Overall, the navigation elements tested really well. The only time we've had navigation trouble in user testing is when the information architecture didn't fit users mental models, so it's been pretty important to understand how users would expect to find/group the information their looing for in order to determine our navigation options.

Two screenshot examples of primary and secondary/sub navigation being used together with the one login header:

A screenshot example of primary navigation and other navigation being used as 'cards' or 'tiles' on the page:

You can also click around our proto if you like. This is the newest version (we just started fresh instead of migrating to the new kit) this is still a WIP and doesn't have everything properly implemented yet. But hopefully will help give you a feel.
https://ofqual-sms-prototype-8ab8fed9b8d9.herokuapp.com/home pwd: ofqual

[CharlotteDowns]

Hi folks, for anyone who missed or wants a recap of our Navigation: help us define our next component kick off workshop, on 18 April 2024, we've posted a summary to the discussion thread Navigation - related research and resources #3661

[CharlotteDowns]

Help us make a decision on our soon to be released Service header navigation component 🧭🤔

We are currently working on some components and a pattern to provide consistent Navigation in services.

Within our Service header navigation component we have made the decision that a service name should always be a link and should have expected behaviour across GOV.UK services. Our aim is to tell services to link to a consistent place. You can help us decide on where by adding a comment to this thread or getting in touch on our #govuk-design-system channel on slack 💪🏻.

From looking at services we have seen that when a service name is provided as a link, there's a few common places that they link to.

A user story for this would be:
As a person using a public-facing service
I need to know what will happen when I click on the service name link
So that I can confidently use it to navigate the service.

Hypotheses of why users would select the link

There may be more than one decision as to why a user selects the link.

A user may wish to exit the service journey via the service name link because:

• they are not eligible for the service
• they no longer remember what they were completing
• they selected the link by accident
• they want more information about the service

Options

Service name links to service start page on GOV.UK

Pros:

• Users can check their eligibility, and explore other information about the service. This may include other journeys they should complete if the information they’ve encountered is not what they were looking to achieve.
• It provides consistent and uniform entry points as all services have a service start page on GOV.UK main pages. Pointing the service name here will reduce user confusion if implemented across all services.
• Users familiar with GOV.UK can quickly find what they need.

Cons:

• There will be more steps to reach the specific information or tasks that they were completing before the link was selected.
• This journey may overwhelm new users who may have reached the service from google or a specific link. They may find the information they are taken to overwhelming and could lead to confusion.
• Users may lose their session data as, for security reasons, service teams may not be able to retain information between visits. This journey will take them away from the domain the service is hosted on.

Service name links to the first question within a service journey

Pros:

• Users can start the process again right away.
• We may see a higher likelihood of service completion.

Cons:

• They will miss additional context that is given in GOV.UK service start pages.
• It will be dependent on service teams whether the user's session information has been stored or not.
• For users to find out more information about the service and their eligibility they will have to conduct a new journey outside of using this link to get to the information they need.
• Users may not know where they are in relation to where they were, it may not be clear it is the start of the journey.

Service name links to a service home page (if they have one)

Pros:

• It provides direct access to specific, relevant information.
• This is an improved user experience if there is a service homepage that has been designed to receive users in this way.
• It is very easy to do additional relevant tasks.

Cons:

• Inconsistency across services as not all services have or require a service homepage.
• Service homepages look and behave differently across GOV.UK which might cause confusion and disorient users.
• This could be seen as a movement away from GOV.UK being one connected website.

[cjrace]

Could there be a way to do a combination of options 2 and 3, and then recommend that a service picks whichever is most appropriate depending on whether they have a suitable home page or starting question? Where they have both it would be trusted to the service team to inform their decision based on their knowledge of their users behaviours / expectations.

We've chosen against option 1 as we feel that can easily lead to frustration either from the additional clicks away it takes them, the loss of session data, or even just the confusion of being taken to a different domain (GOV.UK instead of the separate service). For our users at least the GOV.UK start page is mostly there because it has to be and doesn't really serve them any extra information.

Our service doesn't have one single user journey / set of questions that we can start them at, therefore option 2 isn't possible, so currently we do option 3 and link to our homepage. In the same way our service can't do option 2, it sounds like there's a number of services who don't have a homepage and therefore couldn't do option 3.

Perhaps a long winded way of saying that if everyone was to do the same I think it would have to be option 1 or a combination of 2 and 3, as a lot of services would only be able to do either option 2 or option 3, neither 2 or 3 is possible for all services.

[frankieroberto]

I have a couple of quick thoughts, from experience working on previous GOV.UK branded services:

1. Wherever the service name links to, the Service navigation header should persist on that page. This means that it shouldn't be a GOV.UK start page (as that won't have the nav), but it could be either the first question in a service, or a service home page.

2. The service should probably make sure that the service name isn’t the only way to get to whichever page it links to, as some users will likely not even realise that it’s a link. Alternatives could be (depending on the service):

• back links – eg if a linear question service
• breadcrumbs - eg if a task list based service
• a separate link in the navigation bar labeled 'Home' or 'Application' or 'Dashboard' or whatever is appropriate for the service - if there’s multiple items in the service nav

That said, if it's more of an internal case-working type service with regular users, then maybe in that scenario it’d be ok if the service name was the only link to the service home page?

[CharlotteDowns]

🚀 We’ve released GOV.‌UK Frontend v5.6.0 (feature release)

This release introduces a new Service navigation component. We’ve also published a new pattern to Help users to navigate a service.

We recommend service teams start using this new component and pattern to show navigation links in their service, and start updating existing services.

This work was made possible thanks to valuable input from our navigation cross-government steering group, which includes colleagues from:

• The Charity Commission
• Department for Education
• DWP (Department for Work & Pensions) Digital
• Government Digital Service, GOV.‌UK
• Scottish Government

As always, thank you to everyone who contributes to the GOV.UK Design System. 👏👏👏

📖 Read the full release notes to see what’s changed.
⏭ Find out how to update to the latest version