By the end of this lesson you can
- Design how navigation behaves, not just how it looks.
- Handle back, history, deep links and state preservation.
- Make navigation predictable across devices.
The idea
In Stage 3 you chose navigation structures. Interaction design decides how navigation behaves.
Back and history
The back button should take people where they expect: usually the previous screen, with their scroll position and filters intact. Modals and drawers should close on back rather than leaving the page. Avoid breaking browser history in web apps.
State preservation
When someone filters a list, opens an item and returns, the filters and scroll position should still be there. Losing them is one of the most common frustrations.
Deep links
Every important screen should have its own address so people can bookmark, share and return to it. Notifications should open the exact relevant screen.
Location and transitions
Show where people are (highlighted navigation item, page title, breadcrumbs). Use transitions consistently: sliding in from the side for deeper levels, sliding up for temporary tasks.
Mobile specifics
Tab bars should remember each tab's position. System gestures (such as swipe back) should keep working.
Why it matters in real projects
Navigation behaviour determines whether people feel in control or lost. Losing filters, breaking back, or opening the wrong screen from a notification are small issues that add up to a product feeling unreliable. Getting behaviour right is often more important than the visual style of the menu.
A realistic example
On a property site, people filter to "2 bedrooms, under £1,200", scroll halfway down and open a listing. Pressing back returns them to the top of an unfiltered list. Analytics show many people leave at this point.
The team stores filters in the URL and restores scroll position. Shared links now include filters, and returning from a listing feels seamless. Listings viewed per session rise substantially.
Step by step
Map navigation paths
List how people move between key screens.
Define back behaviour
Write where back goes from each screen and overlay.
Decide what to preserve
List filters, scroll, tabs and form input to keep.
Assign URLs
Give important screens and states their own address.
Define transitions
Choose consistent transitions for depth and temporary tasks.
Test journeys
Try deep links, back, refresh and sharing.
Common mistakes
Mistake Back loses filters and scroll.
Instead Preserve state when returning.
Mistake Notifications opening the home screen.
Instead Deep link to the relevant item.
Mistake Modals that do not close on back.
Instead Treat back as close for overlays.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Navigation behaviour spec
Write a navigation behaviour spec for a shopping flow.
Steps
- Map screens and overlays.
- Define back, preserved state and URLs.
- Define transitions.
- Test the current behaviour of a real shop and compare.
Deliverable
A behaviour spec table with notes from testing a real site.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Navigation behaviour matters as much as structure.
- Preserve state and make back predictable.
- Deep link important screens.
- Use consistent transitions and show location.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Breadcrumbs: 11 design guidelines (opens in a new tab)Nielsen Norman Group
- Back link (opens in a new tab)GOV.UK Design System
Your notes
Marking complete updates your course and roadmap progress.