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