Site map / screen navigation diagram
Design question 2: What parts make up the system?
Every screen and the links between them, by role.
What it explains and when it is useful
A site map (screen navigation diagram) shows the screens or pages of an app and how a user moves between them.
When to use it: Websites, web apps and mobile apps with several screens, especially when different roles see different screens.
Worked example
Illustrative: PracticePal is a fictional project used throughout this guide.
Scroll sideways to see the whole diagram.
Notation and legend
| Symbol or part | Meaning |
|---|---|
| Box | A screen or page, with its URL or route |
| Shaded box | The home screen for a role |
| Arrow | A link, button or redirect; two heads = you can go back |
| Label | The action or condition (role = head, slot full) |
| Dashed group | Screens available to one role |
Design decisions it communicates
A diagram earns marks when you explain the decisions it shows. In PracticePal's documentation these would each be one sentence:
- Login redirects by role, so students never see admin links (SC1).
- Booking happens in a panel on the grid rather than a separate page, keeping it to three taps (SC3).
- The waiting-list offer has its own URL so it can be opened from an email link.
Common mistakes
- Drawing it as a deployment or architecture diagram.
- Leaving out error or confirmation screens.
- No indication of which role sees which screen.
Often confused with: Architecture diagram. The site map is the user's view of screens; the architecture diagram is the technical view of machines, services and connections.
Checklist for your own version
Ticks are saved in this browser only, so you can use the list while you draft.