Layer 3
A simplified, task-focused structure that keeps journeys short and key information close, ensuring users never get lost, or navigate too deep.
The additional information
Layer 3 pages represent the detailed, task-focused conclusion of a user journey, where the primary goal is to cap navigation depth and prevent users getting lost. We do this by presenting only clear and relevant content for a singular action or setting adjustment.
The structure drives the user to complete the final action here, utilising bottom sheets for additional context, with a structured fourth layer reserved solely for critical circumstances where further help is absolutely necessary.
Finishing the flow
The core purpose of Layer 3 is to establish the intended end-point of the journey, achieved by presenting only clear, relevant content for a singular final action or setting adjustment. This ensures a controlled flow: the user moves from the detailed task initiation (Layer 2) into a concise, focused conclusion (Layer 3).
Layer 3 maintains strict navigational simplicity to cap the journey's depth and prevent users getting lost, only enabling access to a subsequent Layer 4 in exceptional circumstances where critical help is absolutely necessary.
- Link to contextual help (layer 4)
- Bottom sheets displayed over layer 3 to retain context
- Stepped header displaying journey progress
- Capturing information
- No global navigation displayed at layer 3
- Interaction within bottom sheet is allowed
- Progress, go back and complete journey via CTA
- Journey navigation
- Launches bottom sheet
- Link opens an:
- inline edit (layer 3) – used for simple updates e.g. email address
- bottom sheet (layer 3) – for simple image capture e.g. update heating type
- new page (layer 4) – for data capture with large number of options, too large for a bottom sheet
- Editing details inline helps us keep layers succinct
- Save or cancel the edit, inline
- Settings can be changed within a layer 3 – radio buttons, checkboxes and toggles can all sit in-page at this layer
- Confirmation of change can be communicated via bottom sheet, alert or toast (dependent on requirement)
- Content sits in-page on the surface colour
- Links can be used if help article required
- Non-tappable lists can be used to organise and display information
Rules
- Ensure content is clear, focused and relevant only to the single, final task or adjustment.
- Present the page as the intended conclusion of the user journey
- Keep the design and interaction simple and highly focused
- Utilise bottom sheets sparingly for supplemental, non-critical details
- Link to layer 4 only when critical, contextual help is absolutely necessary
- Include information that is not essential for completing the immediate task
- Provide endless links or extraneous navigational options to further pages
- Use an overload of tappable and non-tappable cards or complex layouts that increase cognitive load
- Place primary action controls at the bottom of a page or bottom sheet
- Allow Layer 3 to serve as a hub for starting new, unrelated journeys – these should primarily sit at a layer 2
- Overuse Layer 4 for common queries or simple informational notes – layer 4 should only be used in exceptional circumstances
iOS and Android
From layer 2 to layer 4, we are introducing a native update to page headers – locating the back buttons and page titles in a position you’d expect to find them within a native experience.
We think this is important to aid familiarity and improve navigation performance.
Additionally, we are recommending the
use of native toggles, filters and selectors.
- iOS back button
- Android back button
- Page titles are positioned differently on iOS and Android – to bring a hint of native familiarity to the experience
Interactions
-
Vertical page scroll
Header collapses on scroll - Back button to Layer 2
- Header
- In page content
- Lists
- In page content
- T&Cs
- No navigation on Layer 3 pages
Restrictions
Not to be used on this layer
To maintain clarity, focus, and standardised structure of this layer, certain components need to be excluded. When designing or creating new user journeys, observe the following list of prohibited elements to ensure consistency and prevent user friction.
Global nav
Global nav not to be used past Layer 1 pages
Layer 1 header
Layer 1 header not to be used on Layer 2 pages
