Consistently Labelled Navigation Bar with Persistent Back Button
Disorientation and getting 'stuck' are major barriers for users with cognitive challenges. The app must maintain consistent navigation patterns across all screens: a persistently visible back button (not relying on swipe gestures), a labelled bottom navigation bar that shows the current active section, and a page title on every screen. Swiping for navigation should be supplemental only — all navigation must be achievable via taps on clearly labelled controls. This is directly aligned with the workshop requirement: 'Tilbakeknapp fremfor sidelengs-sveip' (back button rather than sideways swipe).
User Story
Acceptance Criteria
- Given I am on any screen in the app that is not the root home screen, When I look at the top of the screen, Then a back button is visible and tappable — I do not need to swipe to go back
- Given I am on a screen inside a flow (wizard step, detail screen), When I tap the back button, Then I am taken to the previous screen with all my entered data preserved
- Given I look at the bottom navigation bar, When I am on any main section, Then the active tab is visually highlighted and labelled with text (not icon only)
- Given I navigate between main sections, When the active section changes, Then the bottom nav label and icon update to reflect the new section immediately
- Given the labelled navigation bar component is rendered, When I use a screen reader, Then each navigation item announces both the icon meaning and the text label
- Given I am in the middle of a wizard flow, When I tap a bottom nav tab, Then the system warns me that leaving will save my draft before navigating away
Business Value
Navigation confusion is the single most reported cause of app abandonment among users with cognitive impairments. Consistent, predictable navigation directly increases the rate of completed activity registrations. The workshop documentation explicitly lists 'back button over swipe navigation' and 'vertical scroll as the norm' as non-negotiable design principles across all partner organisations.
Components
- Labelled Navigation Bar ui
- Accessible Bottom Navigation ui
- Wizard State Manager service
- Focus Management Service service
- Wizard Draft Repository data