UX4: Journeys and information architecture
Navigation and wayfinding
🎯You'll be able to
Design navigation that tells people where they are, where they can go and how to go back, without losing their work.
🏠The everyday picture
A good hospital has signs at every corridor, a "You are here" map, and the way out marked. Visitors don't need to memorise anything.
📘What it really is
-
Where am I? Each screen has a clear title (the browser tab and the main heading), and for longer journeys, a step indicator ("Step 2 of 3").
-
Where can I go? Main destinations are visible; the next action is obvious and the primary button says what happens.
- How do I go back? A visible back link in the same place on every screen; browser and phone back buttons work too.
-
Keep their work: going back to change a time shouldn't erase the name already typed. WCAG 2.2 has a criterion on not asking for the same information twice in one process (3.3.7, Redundant Entry).
-
Links versus buttons: links go somewhere; buttons do something. Using the right one helps keyboard and screen reader users (UX7).
- Don't trap people: every step has a way out, and leaving a half-finished form either saves it or warns first.
📝A worked example
Input: the starter journey.
Steps:
- On the details page, type a name, then use the Back link to change the time.
- Return to the details page.
Expected output: in the starter, the name is gone, and the Back link is small and grey (12 px, #999999, contrast 2.85 to 1 on white).
In the reference design, a "Change time" link sits under the chosen time, the details are kept in the browser session, and test 10 of
npm run test:prototype checks that the name is still there after changing the time.
🌍Where it's used
- Checkout flows with a step indicator and "Edit" links on the summary page.
- Government forms with "Check your answers" pages where each answer has a "Change" link.
- Banking apps with a consistent back arrow and a confirmation before leaving a payment.
📝Case scenario
A visa form lost all answers if applicants pressed the browser's back button. Support calls doubled in the first week. The team added a summary page with "Change" links and kept answers when moving back and forth; calls fell back to normal.
🖱️Try it
List every screen of the SehatSlot journey with its title, its main heading, its back destination and what happens to typed data when you go back. Success: each screen has a unique title, one main heading and a back destination; no typed data is lost.
⚠️Common mistakes
- Same title on every page. Sign: browser tabs all say "SehatSlot". Fix: "Choose a time – SehatSlot".
- Back that loses data. Sign: people retype details. Fix: keep the data for the session.
- Hidden back links. Sign: small, low-contrast text. Fix: a clear link with a large tap area.
🛠️For your project
Project 2's test 9 checks for unique titles, one main heading and a visible back link; test 10 checks that details are kept.
✅Quick check
What should every screen tell people?
Show the answer
Where they are, where they can go next, and how to go back.
What's the difference between a link and a button?
Show the answer
A link goes somewhere; a button does something.