FIT5152 Chap.6 Navigation and Menu Design
Navigation and Menu Design
Week 6 is about how people find their way through an interface. The seminar first separates navigation, getting from one piece of information to another, from menus, the interface elements that present a set of choices. Good navigation keeps three orientation questions answered: where am I, what is around me, and where can I go from here.
Four named best practices, drawn from the Laws of UX, give the vocabulary for explaining navigation decisions: Jakob’s Law on familiarity, Fitts’ Law on target size and distance, Hick’s Law on how many options there are and how complex they are, and the Von Restorff Effect on what stands out.
The chapter then sorts navigation into sequential, structural, associative and utility types, and walks through the menu patterns the seminar compares, including menu bars, drop-down and cascading menus, accordions, mega menus, springboards and tile grids, dashboards, fixed and scrollable tabs, bottom tab bars and off-canvas drawers, each with the situations it suits.
It finishes with labelling, where text labels must be accurate and meaningful and icons risk being read in many ways, and with exact and ambiguous organisation schemes. In-Class Activity 3 asks for a sketched home screen that uses three navigation or menu types, and Submission 3 accepts these best practices and navigation guidelines as theory for justifying screens.
What this chapter covers
- 01
Navigation versus menus and the orientation questions
- 02
Jakob’s, Fitts’ and Hick’s laws and the Von Restorff Effect
- 03
Sequential, structural, associative and utility navigation
- 04
Menu patterns and when each fits
- 05
Textual and iconic labelling
- 06
Exact and ambiguous organisation schemes
Worked example · free
Justifying a museum app’s navigation with two named laws
- 1Recommend a bottom tab bar holding the five sections, which sits at the upper edge of the three-to-five range for bottom tabs.
- 1Justify with Fitts’ Law: targets at the bottom of a large phone are closer to a one-handed thumb, so they are faster and easier to acquire.
- 1Justify with Jakob’s Law: bottom tab bars are a familiar pattern from other apps, so visitors already know how they work.
- 1Add a current-section indicator so visitors can always tell where they are.
Key terms
- Jakob’s Law
- The principle that users expect an interface to work like the others they already know, because they spend most of their time elsewhere.
- Fitts’ Law
- The principle that the time to acquire a target depends on its distance and size.
- Hick’s Law
- The principle that people take longer to decide as options become more numerous and more complex.
- Utility Navigation
- Navigation that gives access to tools and actions such as search, settings, sharing or sign-in.
- Off-Canvas Menu
- A transient menu hidden entirely off-screen until a button or swipe opens it.
Navigation and Menu Design FAQ
What is the difference between navigation and a menu?
Navigation means getting from one piece of information to another, which means knowing where you are and planning where to go. A menu is one interface element that offers a set of choices, which may support navigation or data entry.
How many items suit a bottom tab bar?
The seminar gives three to five of the most important options for a bottom tab bar, with any extras moved to a pop-up, a top-mounted menu or an off-canvas drawer.
When should a menu use an exact organisation scheme?
Exact schemes such as alphabetical, chronological or geographical order suit users who already know the label they want. Ambiguous, theme-based groupings suit people who are exploring and will recognise the right option when they see it.
Why are icon-only labels risky?
Icons are compact and appealing, but people interpret them differently. Nielsen’s 1994 intranet study found that four users read the same icons in many ways, so text labels or icons with labels are safer.
Assessment move
Learn the four best practices as definition, example and violation: for each, find one app that applies it well and one that breaks it, and write a sentence explaining the consequence for users. Next, open a large website and label one example of structural, associative, contextual and utility navigation, because identifying them in the wild is faster practice than rereading definitions.
Then sketch three home screens for the same app using different menu patterns, such as a bottom tab bar, a springboard and a drawer, and annotate each with the theory names only, which mirrors In-Class Activity 3. Finally, prepare short justifications that pair a navigation choice with a named law, since Submission 3 allows Week 6 theory to defend high-fidelity screens.
Working through Navigation and Menu Design in FIT5152? Sia is AskSia’s AI Information Technology tutor — ask any FIT5152 Navigation and Menu Design question and get a clear, step-by-step explanation grounded in how FIT5152 is taught and assessed. Read this chapter free, then take your hardest questions to Sia.
