Navigation — related research and resources

[domoscargin]

Research so far

We've presented our initial thoughts at a workshop using this Google Slides presentation

We've collected examples from:

• Our backlog
• GitHub Discussions
• Existing services
• Design systems across UK gov
• Other gov/public sector design systems

We also spoke to the team at GOV.UK One Login, who've recently built their own header component supporting navigation.

We've collected this first round of research on a website:

https://design-system-navigation-research.netlify.app/
password: NavigateTheNavigation

[CharlotteDowns]

Reflections from Navigation: help us define our next component

On Monday 18 March 2024 we ran a workshop with the community. This is a summary of the conversations and activities within the event.

A summary of what we presented

We gave some initial context as to why we are working on Navigation and how we are working with the new contribution model.

We then showed our research so far, sharing our website (password: NavigateTheNavigation) where we collected all of our examples, allowing us to browse screenshots by type and position of navigation items.

We requested conversations with teams that have any research related to navigation.

Then, we explained our definition of Navigation and what we believed at the time should be in our scope, what could be in our scope and what should not be in our scope in order to release a version of Navigation to the community in good time.

A summary of what the community thought of our approach

Overall the community appreciated the breadth of our research.

We asked: What would be the minimum you would expect of a Navigation component?

The answers called for the following minimum criteria:

• Useable and accessible to the latest standards
• Responsive and consistent across view types
• Let an end user know where they are on the site
• Good guidance on when to use it and when not to
• Flexible enough it can be used across services
• Advise on content to use in Navigation
• Easy to find from anywhere on the site
• Doesn’t rely on javascript

We asked: What are the gaps in the GOV.UK Design System components that already exist?

We received the following feedback from attendees on our existing components:

• Breadcrumbs - Clarity on how this component interacts with navigation. Options for providing more than three options on smaller views. Can be hard to get back to pages using this component
• Header - When used with the service name option end users can miss that the name can be a link. Would like account functionality: login / logout / profile links included. No official guidance on how to use the navigational elements in the header leading to non-uniformity of understanding

We also received feedback of what they would like to have:

• Sidebar navigation
• Terminology of how to label things
• In page navigation
• More information about how things are tested

We asked: What challenges do you face when building navigation in your service?

Our attendees experienced the following challenges:

• No clear example in GDS to follow
• Navigation consistency across organisations and teams
• Creating navigational elements of different hierarchies that work together, for example main and sub navigation
• Technical integration with specific platforms: Drupal, Dynamics
• Differentiation between main navigation content and accounts
• Use of the phase banner in conjunction with navigation
• Relationship with GOV.UK homepage - where do users expect to go when clicking it
• Whether Navigation passes certain accessibility criteria

We asked: What’s missing from our proposition that would help your service?

Sub navigation and lower levels of navigation were mentioned more than a few times as being something that the community disagreed with or were confused about within our proposal. Attendees felt that it would be difficult to make decisions about main navigation without considering sub-navigation and these levels of navigation are subject to greater inconsistency.

Other themes included:

• Terminology and labelling of Navigation items
• Templates for information architecture and categorisation
• Standardise where a search goes
• Clarity of whether we are offering a component or pattern

A summary of the examples sharing Padlet board

We received many unique examples to the ones we had collected previously.

As part of the exercise we asked attendees to group the examples in themes. Here are some of the groupings:

• Mega Navs
• Left hand side navigation
• Dropdowns
• Multi layer navigation which includes main and sub navigation together
• Breadcrumbs
• Tabs
• A specific ‘home’ link
• Persistent, lets users know where they are

[CharlotteDowns]

Summary of the Steering Group Crit

Members of our steering group met on 8 April 2024 to review 3 SPIKES/ideas.

The purpose of the crit was to:

• review latest prototypes from the Design System squad working on navigation
• validate the decisions we’ve made
• get feedback from affected services and teams

Key themes that emerged in the feedback:

• Search
• Hierarchy of header bars
• Linking to a service home
• Page width

The Navigation squad analysed the comments added to the Steering group crit Padlet board as well as notes taken from the breakout room playback. Together we decided upon the following actions to improve our contribution:

• Create a SPIKE which puts Government wide things in the black header bar, and service specific things into a grey header bar beneath it
• Provide a way to wrap long content, for example long service names, on smaller view sizes
• Explore the feasibility of making both the black and grey sections modular for additional content outside of the GOV.UK logo, the service logo and the main navigation links

[CharlotteDowns]

Hi folks, we've just posted a request for help on deciding a scenario for our Service header navigation component, please help us by joining the conversation💪🏻🧭.