Site Maps & Navigation Design
Part of the UI/UX Design Roadmap
In short
A site map shows every screen and how they connect. Navigation design decides how people actually move around. Get both right and users always know where they are and how to get back.
A site map diagrams every page/screen and how they connect; navigation design decides how users actually move between them (tabs, menus, breadcrumbs) — both shape how findable content is.
Think of it like this
Coloured lines in a hospital
Big hospitals paint coloured lines on the floor: follow green to Radiology, blue to the Pharmacy. Behind it is a full floor plan. The plan is the site map; the coloured lines are the navigation people actually use.
Watch it happen
Main navigation on a phone
Bottom tab bar
- Top 3 to 5 sections always visible
- Easy to reach with a thumb
- Shows where you are at a glance
Hamburger menu
- Fits many sections
- Hidden until tapped, so used less
- Fine for rarely used pages
Put the few most-used sections in a bottom tab bar. Keep a menu only for secondary pages like Settings or Help.
The big ideas
What you need to know
Site map first
List every screen and its parent before designing. It shows gaps and duplicate pages early.
Where am I?
Highlight the current tab or page, and use clear titles. Lost users leave.
How do I get back?
Back buttons, breadcrumbs on web, and a consistent home tab let people recover from wrong turns.
Keep it shallow
Fewer, clearer levels usually beat deep menus where key pages hide four taps away.
Save yourself the pain
Common mistakes
Oops
Hiding the main sections behind a hamburger menu on mobile.
Do this instead
Show the top sections in a visible tab bar. People use what they can see.
Oops
Having seven or eight bottom tabs.
Do this instead
Keep bottom tabs to about five or fewer, and move the rest into a 'More' or profile area.
Your mission
Draw an app's site map
Quick check
Your app's most-used feature lives inside the hamburger menu. What's the likely effect?
Go deeper
- 1Build a site map for a hypothetical app with at least 10-15 screens.
- 2Design a navigation pattern (tab bar, hamburger menu, sidebar) and justify your choice.
- 3Learn why deep navigation hierarchies (many taps to reach content) hurt discoverability.
More topics at this stop
Information Architecture Basics
User Flows
Task Flows
Content Strategy for UX
Mental Models
Progressive Disclosure
Onboarding Flow Design
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
