Theory
Lost in your own app
A FestConnect user drills into Garba Night's details, then into the seat map, then a sub-screen. Now they want to go back to the event list: and there is no clear way. No back button, no menu, no sense of WHERE they are. They are lost inside the app.
Every user, on every screen, is silently asking 3 questions: where am I? where can I go? how do I get back? NAVIGATION is the system that answers them. It is the visible face of the information architecture you designed: and when it fails, users are trapped.
Theory
Navigation, formally
Navigation is the system of UI elements that let users move through a product and find content. It is the visible expression of the information architecture: the IA is the structure, navigation is how users travel it.
It exists to answer the user's 3 eternal questions:
- where am I? (show the current location: highlight the active tab)
- where can I go? (make the options visible)
- how do I get back? (a clear back or home path)
An app that answers all 3 on every screen never leaves a user lost. One that answers none is a trap, however good its content.
At a glance
Types of navigation
| Type | What it is | FestConnect example |
|---|---|---|
| Global / primary | Main nav present everywhere | Bottom tabs: Events, Schedule, My Passes, Profile |
| Local / secondary | Navigation within a section | Tabs inside Events: Cultural / Technical |
| Contextual | Links within content | 'See seat map' link inside an event |
| Breadcrumbs | Shows location in a hierarchy | Home > Events > Garba Night |
| Utility | Support functions | Search, login, settings |
Theory
Principles of good navigation
Effective navigation follows a few firm rules:
- consistency: the same navigation in the same place on every screen: users learn it once
- clear labels: the user's words ('My Passes'), not jargon
- highlight the current location: the active tab stands out, answering 'where am I?'
- minimise clicks to key tasks: registration should be 1 or 2 taps away, not buried
- do not overload: a menu of 15 items is a wall; limit the top level (a small number of clear sections)
- discoverable: do not hide critical navigation (the hamburger menu hides options: fine for secondary things, risky for primary ones)
Quiz
Navigation is best understood as which of the following?
- A decorative element added at the end for visual appeal
- The visible expression of information architecture, answering where am I, where can I go, and how to get back
- The same thing as the app's colour scheme
- Only necessary on websites, never on mobile apps
- A way to hide content from users
Show the answer
The visible expression of information architecture, answering where am I, where can I go, and how to get back
Navigation is the VISIBLE, usable surface of the underlying information architecture: it lets users travel the structure and answers their 3 constant questions (where am I, where can I go, how do I get back). Option A trivialises it as decoration; navigation is structural and functional, not ornamental. Option C confuses it with visual design (colour is Unit 4). Option D is false: mobile needs navigation intensely (bottom tabs, back gestures). Option E inverts its purpose (it REVEALS content, not hides it). The key relationship to state in exams: IA is the structure, navigation is how users move through that structure.
Think first
The hamburger menu trade-off
FestConnect could put its main sections behind a hamburger menu (the three-line icon) to keep the screen clean, or show them as always-visible bottom tabs. What is the trade-off, and which suits PRIMARY navigation? Then tap.
Show the answer
The hamburger menu hides options behind a tap, buying a cleaner screen at the cost of DISCOVERABILITY: out of sight is out of mind, so users use hidden features less. Bottom tabs keep primary sections always visible: instantly discoverable and one tap away, at the cost of screen space. For PRIMARY navigation (the few core sections users need constantly, like Register/Events), always-visible tabs win: hiding your most important paths behind a hamburger loses users. Reserve the hamburger for SECONDARY, less-used items. The principle: the more important the destination, the more visible its navigation should be.
Watch out
Navigation slips
No 'where am I?': not highlighting the current location leaves users disoriented.
No way back: every screen needs a clear back/home path; dead-ends trap users (interaction-design's flow rule).
Overloaded menus: too many top-level items overwhelm; keep the primary set small.
Hiding primary navigation: burying core sections in a hamburger reduces their use; keep important paths visible.
Inconsistent nav: navigation that moves or changes per screen forces users to relearn it.
Theory
Unit 3 closes: the structure is designed
FestConnect now has behaviour (interaction design), structure (information architecture), a blueprint (wireframes/prototypes) and paths (navigation): the whole functional skeleton, tested cheaply before any code. What it does NOT yet have is a LOOK. Unit 4 makes it beautiful and clear: typography, colour theory, layout, visual hierarchy, iconography and branding. Structure first, style second: exactly the right order.
Summary
Key takeaways
- Navigation is the system of UI elements that lets users move through a product: the visible expression of information architecture.
- It answers 3 user questions: where am I, where can I go, how do I get back.
- Types: global/primary, local/secondary, contextual, breadcrumbs, utility.
- Principles: consistency, clear labels, highlight current location, minimise clicks to key tasks, do not overload, keep it discoverable.
- Hamburger menus hide options (weak discoverability): fine for secondary items, risky for primary navigation.
- IA is the structure; navigation is how users travel it.
- Memory hook: good navigation always answers where am I, where to, and how back.