Principles of UX / UI (Product Design): Navigation Design (Global, Local, Contextual, Breadcrumbs)

Navigation Design (Global, Local, Contextual, Breadcrumbs)

Navigation Design: A Portfolio-Ready Study Guide

(For aspiring product designers, graphic designers transitioning to UX, and bootcamp students)

What This Is

Navigation design is the backbone of user experience—it’s how people find what they need in your product. Poor navigation frustrates users (e.g., a hospital patient portal where booking an appointment takes 8 clicks), while intuitive navigation delights them (e.g., Amazon’s one-click checkout). This guide covers global, local, contextual, and breadcrumb navigation, with actionable steps to design systems that feel effortless. You’ll learn how to apply modern UX principles (like Hick’s Law and progressive disclosure) to create navigation that’s usable, scalable, and portfolio-worthy.

Key Terms & Principles

• Global Navigation
  Definition: Persistent navigation elements (e.g., header, footer, sidebar) that appear on every screen of a product.
  Example: The top bar in Figma with File, Edit, View—always visible, no matter which frame you’re editing.
  Principle: Consistency (Jakob’s Law)—users expect global nav to work the same way across all pages.

• Local Navigation
  Definition: Secondary navigation that helps users explore a specific section of a product (e.g., submenus, filters).
  Example: Spotify’s left sidebar with Home, Search, Your Library—local nav appears within the "Your Library" section to filter playlists, podcasts, etc.
  Principle: Progressive Disclosure—show only what’s relevant to avoid overwhelming users.

• Contextual Navigation
  Definition: Navigation that appears only when needed, based on user actions or context.
  Example: Google Docs’ floating toolbar (bold, italic, link) that appears only when text is selected.
  Principle: Fitts’s Law—keep contextual tools close to the user’s cursor/finger to reduce effort.

• Breadcrumbs
  Definition: A secondary navigation aid showing the user’s path (e.g., Home > Products > Shoes > Running).
  Example: Airbnb’s breadcrumb trail: United States > California > Los Angeles > Beverly Hills.
  Principle: Wayfinding (Lynch’s Theory)—helps users understand their location and backtrack easily.

• Hick’s Law
  Definition: The more choices a user has, the longer it takes them to decide.
  Example: A dropdown menu with 20 options (❌) vs. a search bar with typeahead suggestions (✅).
  UI Fix: Limit global nav to 5–7 items max (e.g., Apple’s top nav: Store, Mac, iPad, iPhone, Watch, AirPods, TV & Home, Entertainment, Accessories, Support).

• Miller’s Law (7±2 Rule)
  Definition: Humans can hold 5–9 items in working memory at once.
  Example: Mobile bottom nav bars (e.g., Instagram’s Home, Search, Reels, Shop, Profile)—never exceed 5 icons.
  Exception: Use chunking (e.g., grouping "Settings" into submenus) to bypass this limit.

• Affordance
  Definition: A design element’s perceived function (e.g., buttons look clickable, links look tappable).
  Example: Underlined blue text (✅) vs. gray text with no underline (❌—users won’t know it’s clickable).
  Principle: Visual Hierarchy—use color, size, and spacing to signal interactivity.

• Information Architecture (IA)
  Definition: The structure of content (e.g., sitemaps, labels, categories).
  Example: A university website’s IA: Home ├── Admissions │ ├── Undergraduate │ └── Graduate ├── Academics │ ├── Departments │ └── Courses └── Student Life Tool: Use card sorting (e.g., OptimalSort) to test IA with users.

• Wayfinding
  Definition: How users navigate through a product (e.g., signs, landmarks, maps).
  Example: Duolingo’s progress bar at the top of lessons—shows users how far they’ve gone and what’s left.
  Principle: Feedback (Norman’s Design Principles)—users need to know where they are and what’s next.

• Mobile Thumb Zone
  Definition: The area of a mobile screen easily reachable by a user’s thumb.
  Example: Bottom nav bars (e.g., Twitter’s Home, Search, Notifications, Messages, Profile) are placed in the thumb zone.
  Principle: Ergonomics—design for one-handed use (avoid top-left corners for critical actions).

• WCAG Contrast Ratio
  Definition: Minimum color contrast for readability (4.5:1 for normal text, 3:1 for large text).
  Example: Black text on a white background (✅ 21:1) vs. light gray on white (❌ 1.5:1—fails WCAG).
  Tool: Use Figma’s A11y Color Contrast Checker plugin.

• Empty States
  Definition: What users see when there’s no content (e.g., a blank inbox, a new user’s dashboard).
  Example: Slack’s empty channel screen with a friendly message: “This channel is empty. Start a conversation!” + a CTA to “Browse channels”.
  Principle: Onboarding—guide users to their next step.

Step-by-Step Process Flow

1. Audit the Current Navigation (or Start from Scratch)

• Action: List all current navigation elements (global, local, contextual) in a spreadsheet or Figma table.
• Example:
  | Type | Element | Location | Purpose |
  |----------------|----------------------|--------------------|---------------------------------|
  | Global | Main menu | Top header | Access key sections |
  | Local | Sidebar filters | Product category | Narrow down search results |
  | Contextual | "Edit" button | Hover over image | Modify content |
  | Breadcrumb | Path trail | Below header | Show user’s location |
• Tool: Use Figma’s Auto Layout to map out navigation hierarchies.
• Pro Tip: If redesigning, conduct a heuristic evaluation (check against Nielsen’s 10 Usability Heuristics) to spot pain points.

2. Define the Information Architecture (IA)

• Action: Create a sitemap (a tree diagram of all pages/sections).
• Example (e-commerce):
  Home
├── Shop
│ ├── New Arrivals
│ ├── Best Sellers
│ └── Categories
│ ├── Clothing
│ ├── Shoes
│ └── Accessories
├── About
├── Blog
└── Contact
• Tool: Use Whimsical or Miro for sitemaps.
• User Test: Run a card sort (open or closed) with 5–10 users to validate your IA.

3. Sketch Low-Fidelity Wireframes

• Action: Draw 3–5 variations of the navigation (e.g., top nav vs. sidebar vs. hamburger menu).
• Example (mobile):
  • Option 1: Bottom nav bar (5 icons max).
  • Option 2: Hamburger menu + top search bar.
  • Option 3: Tab bar with a "More" dropdown.
• Tool: Sketch in Figma (use Frames for different screens) or on paper.
• Principle: Hick’s Law—limit choices to reduce cognitive load.

4. Test with Users (Guerrilla Testing)

• Action: Recruit 5 users (friends, coworkers, or via UserTesting.com) to complete tasks:
• "Find the ‘Returns Policy’ page."
• "Bookmark this product for later."
• "Go back to the homepage."
• Observe: Where do they hesitate? Do they use the navigation as intended?
• Tool: Record sessions with Zoom or Lookback.

5. Iterate & High-Fidelity Prototype

• Action: Refine the best wireframe into a high-fidelity prototype in Figma.
• Example (desktop global nav):
  • Hover states: Underline links on hover.
  • Active states: Bold the current page (e.g., "Shop" is bold when on the Shop page).
  • Micro-interactions: Subtle animations (e.g., dropdown menus fade in).
• Tool: Use Figma’s Smart Animate for transitions.
• Principle: Feedback (Norman’s Design Principles)—users should see the result of their actions.

6. Document in a Design System

• Action: Add navigation components to your design system (e.g., buttons, dropdowns, breadcrumbs).
• Example (Figma component):
  Nav Bar (Auto Layout)
├── Logo (Left)
├── Menu Items (Center, 5 max)
└── CTA Button (Right, e.g., "Sign Up")
• Tool: Use Figma’s Variants to create states (default, hover, active).
• Principle: Consistency—reusable components save time and reduce errors.

Common Mistakes

Mistake 1: Overloading Global Navigation

• What Happens: A header with 12 links + a search bar + a CTA button = visual clutter.
• Correction:
• Limit to 5–7 items (Hick’s Law).
• Group related items (e.g., "Account" dropdown with Profile, Settings, Logout).
• Example: Stripe’s clean top nav (only 6 items).

Mistake 2: Ignoring Mobile Thumb Zones

• What Happens: Critical actions (e.g., "Add to Cart") are placed in the top-left corner, forcing users to stretch.
• Correction:
• Place primary actions in the thumb zone (bottom-right for right-handed users).
• Example: Amazon’s mobile "Buy Now" button is at the bottom.

Mistake 3: Inconsistent Navigation Labels

• What Happens: "Products" vs. "Shop" vs. "Catalog" all link to the same page—confusing users.
• Correction:
• Use consistent terminology (e.g., always "Shop" for product pages).
• Test labels with users (e.g., "Which term do you expect to find shoes under: ‘Products’ or ‘Shop’?").

Mistake 4: Hiding Navigation Behind a Hamburger Menu (Desktop)

• What Happens: Users can’t see their options, increasing cognitive load.
• Correction:
• Only use hamburger menus on mobile (where space is limited).
• On desktop, show top-level nav (e.g., Medium’s top bar).
• Exception: Dashboards with complex tools (e.g., Figma) can use a sidebar.

Mistake 5: Breadcrumbs That Don’t Reflect the IA

• What Happens: Breadcrumbs show Home > Products > Shoes, but the URL is /category/footwear.
• Correction:
• Align breadcrumbs with the sitemap (e.g., Home > Shop > Shoes).
• Make each level clickable (users expect to backtrack).

Design Interview / Portfolio Tips

1. Show Your Process, Not Just the Final Design

• Interviewers Want to See:
• Sitemaps (how you structured the IA).
• Wireframes (your exploration of different nav patterns).
• User testing insights (e.g., "3/5 users struggled to find the ‘Contact’ page, so we moved it to the top nav").
• Portfolio Tip: Include a case study with:
  Problem → Research → Ideation → Testing → Solution

2. Explain Trade-offs

• Tricky Question: "Why did you choose a bottom nav bar over a hamburger menu for mobile?"
• Answer:
• Bottom nav: Faster access (Fitts’s Law), but limited to 5 items.
• Hamburger menu: Saves space, but hides options (discoverability issue).
• "We chose bottom nav because our app has 5 core features (Home, Search, Cart, Profile, Orders), and we wanted to reduce taps."

3. Differentiate Between Similar Concepts

4. Prepare for "How Would You Improve This?" Questions

• Example: "Here’s a poorly designed navigation. How would you fix it?"
• Answer Framework:
• Identify the problem (e.g., "The nav has 10 items—violates Hick’s Law").
• Propose a solution (e.g., "Group related items into dropdowns").
• Justify with principles (e.g., "This reduces cognitive load and improves scannability").
• Suggest testing (e.g., "We’d A/B test the new nav with 20 users").

Quick Check Questions

1. A stakeholder wants to add 3 more links to the global navigation. How do you push back?

• Answer:
• Principle: Hick’s Law (more choices = slower decisions).
• Action:
  1. Ask: "What’s the business goal?" (e.g., "We want users to find our new feature").
  2. Propose alternatives:
  3. Local nav (e.g., a "New" badge in the sidebar).
  4. Contextual nav (e.g., a tooltip on first visit).
  5. Analytics check (e.g., "Only 2% of users visit the ‘Careers’ page—is it critical?").

2. A user complains they "get lost" in your app. What navigation elements would you audit first?

• Answer:
• Check:
  1. Breadcrumbs (are they accurate and clickable?).
  2. Global nav consistency (does "Home" always go to the same place?).
  3. Wayfinding cues (e.g., progress bars, highlighted current page).
• Principle: Jakob’s Law (users expect navigation to work like other sites they use).

3. How would you design navigation for a dashboard with 20+ features?

• Answer:
• Solution:
  1. Global nav: Top-level categories (e.g., Analytics, Reports, Settings).
  2. Local nav: Sidebar with sub-features (e.g., under "Analytics": Overview, Trends, Exports).
  3. Contextual nav: Floating toolbar for in-context actions (e.g., "Export" button when a report is selected).
• Principle: Progressive Disclosure (show only what’s relevant).

Last-Minute Cram Sheet

1. Global nav = persistent (header/footer). Local nav = section-specific (sidebar/filters).
2. Hick’s Law = fewer choices = faster decisions. Limit global nav to 5–7 items.
3. Fitts’s Law = big, close targets = easier to click. Place critical actions in the thumb zone.
4. Breadcrumbs = show path (e.g., Home > Shop > Shoes). Always clickable.
5. Miller’s Law = 7±2 items in working memory. Use chunking (e.g., dropdowns) to bypass this.
6. Affordance = make interactive elements look clickable (e.g., buttons, underlined links).
7. WCAG contrast ratio = 4.5:1 for normal text, 3:1 for large text.
8. Empty states = guide users (e.g., "No results. Try searching for ‘sneakers’").
9. ⚠️ Hamburger menus on desktop = bad (hides options). Use top nav or sidebar instead.
10. ⚠️ User interviews ≠ usability tests—interviews ask opinions, tests observe behavior.