Overview
Following our accessibility audit from December 2023, we were found to not provide multiple ways to navigate backwards. Specifically, our users lacked another mechanism outside of the browser ‘back’ button. Given going ‘backwards’ from most other places within the product would take return them to our search page, we didn’t think would be a problem. Our newly introduced header contains a search box too, so we had hoped that a way to ‘go back’ was covered from a few different angles.
What we did
Our content and interaction designers worked together to create a few options:
- Introduce a breadcrumb component
- Introduce a “back” link component
- Introduce a new primary navigation
We chose the breadcrumb option, given that:
- It’s a simple yet futureproof solution, given with have some vague idea of other features that may be introduced to the product further down the line (e.g. new page structures)
- It’s a component that already exists – we aren’t reinventing the wheel, it comes with relatively little developer resource
Solution
We agreed that the breadcrumb trail would “end” with an unclickable item. Since we don’t have a nested page structure in the product, the final item would usually be Trust name.
We also placed the breadcrumb trail above the “main” HTML element, so that it would also be skipped if users used the “Skip to content” hidden link.
For our error pages, we chose to hide the breadcrumb completely, following best practice from other Gov sites including GOV.UK. For pages such as Privacy, Cookies and the Accessibility statement, we only show the first item, “Home”.
A screenshot of the top half of a Trust page. The page shows a header, page title and breadcrumb component, before following into the main body.
Other options
Back link
A screenshot of the top half of a Trust page. The page shows a header, page title and back link component, before following into the main body.
An option that would use an existing component again, requiring little developer resource.
Clicking back would act the same way as the browser “back” button, but we wouldn’t be meeting the need of having an easily identifiable way of navigating back “Home” (outside of clicking the DfE logo in the header).
We’d also need to consider options for when JavaScript is not available, for example, if the user has it purposely turned off.
However as a team, we decided against this option as it feels far more suitable to service journeys, particularly those where the user is led through a series of questions with routing options. Our product is very much web based, with future considerations to navigate to other pages within the overall structure.
Primary navigation
A screenshot of the top half of a Trust page. The page shows a header with navigation, page title and follows into the main body.
An option which would show the primary navigation already built into the DfE header.
Whilst future proof for when the team consider adding new pages, it didn’t feel like the loss of space and pushing the main body further down the page was worth the investment. This option also didn't allow for a way of going backwards other than returning all the way to the home page (or, the 'start').
Links
Design card User Story 173505: Design: Enable users to navigate back to the home page https://dfe-gov-uk.visualstudio.com/Academies-and-Free-Schools-SIP/_workitems/edit/173505
Build card User Story 177588: Build: Enable users to navigate back to the homepage https://dfe-gov-uk.visualstudio.com/Academies-and-Free-Schools-SIP/_workitems/edit/177588
Figma mock https://www.figma.com/design/76Xz3HyxmcitvwuPtLeBaB/Iteration-work?node-id=35-4237