Navigation Components

[HelenOsg]

What

Some services, primarily Agent-facing, require navigation as the one page per thing doesn't fit the need or service. Existing assets for navigation exists but updated research is needed and guidance on how to stack/use them together is needed.

Why

Provide standard components and patterns for the most common agent facing services problems (structural/boilerplate elements)

• We have existing insights from services to make recommendations here (conditional reveal,  sidebar)
• Medium effort and impact
• High community priority

Assumptions

Need to write this*

Done when

Research

• Collate and review existing research
• Identify strategic needs
• Identify technical constraints
• Test assumptions
• Define problem and user needs for design

Initial Design

• Collect examples from other services and design systems (Primary navigation  #435)
• Draft content and sketches for candidate approaches (Navigation: Outreach to UCD community for examples and feedback on existing component #239)
• Feedback from UCD community
  • Navigation: Discussion around use within Health (PIP) #289 <-- feedback from PIP team
• Navigation: (Design system) Workshop to see community designs / questions  #324
• Navigation: Design example from workshop #325

Further investigation

• Community contribution: Navigation for internal services #453

Design and develop components

• Navigation: Internal services header navigation #496
• Navigation: Internal service sub navigation #497
• Navigation: Internal service side navigation #498

Outcomes

• Service teams have clear guidance on how to use this pattern
• Users have a consistent experience across services, even when a journey consists of multiple smaller services

Who needs to know about this

UCD community
ARA service teams
Design System team
Accessibility team

Related stories

• Community backlog issue: Primary navigation  #435
• Discussion around use within Health (PIP) Navigation: Discussion around use within Health (PIP) #289
• DWP Examples (internal access only) for Agent interfaces: https://dwpdigital.atlassian.net/wiki/spaces/INTD/pages/131921347136/DWP+Design+Examples
• Discussion:
• (old)DWP examples: https://dwp-design-examples.herokuapp.com/example/navigation-global
• (old)DWP examples: https://dwp-design-examples.herokuapp.com/example/navigation-secondary
• GDS backlog: Navigation alphagov/govuk-design-system-backlog#76
• Ministry of Justice Primary navigation pattern: https://design-patterns.service.justice.gov.uk/components/primary-navigation/
• Ministry of Justice Secondary navigation pattern: https://design-patterns.service.justice.gov.uk/components/sub-navigation/
• Navigation Menu: Navigation Menu design-system-community-backlog#43
• Primary navigation: Primary navigation  #435

Anything else

Was part of a working group dated 26/1/21 and output was:
the Primary navigation solution was not ready to go live
Agreed actions

• Further examples required
• Explore whether the GDS example can be/should be used

Sub navigation was taken to the same working group and received sign off
Agreed actions

• Guidance page needs recreating

Both mock ups seen here:
#435)

Spring 2022

We picked this back up. Reviewed what we had from all the work done to this point. We attempted to look navigation as a whole to deliver some overall principles for navigation. But as previously we had lack of evidence to determine a way forward. To counter that, we attempted to gather a community consensus in lieu of evidence. There were some broad findings but not enough to give us a solid grounding.

As a way forward we have decided to publish what we do have trying to improve on the work done. The components will be based on assumptions and design experience. The aim is focussed on driving consistency to get services to use the same components and to give any new services a starting point.

The tickets related to this work come under the Further investigation and Design and develop components sections above.

[jonhurrell]

Awaiting on some further examples of the mobile implementation.

[mitz-lad]

Review navigation components to draft principles and guidelines when using navigation elements in tandem.

[mitz-lad]

Updated the actions on this ticket to reflect our current position and created separate 'child' component tickets. Actions related to design, development and publishing have been moved into the individual tickets for each navigation component.

[mitz-lad]

Mocked up approaches for header and side navigation. Currently prioritising publishing of side navigation component before header navigation as the side navigation component has a lower impact than to publish.

Header navigation will rely on updating the internal service header component and may impact all services currently using it.