This set of notes answers one core question:How do users "find things" in your product——by navigating there, or by searching for it. Two legs:
(1) Navigation = Users follow the structure you preset (menus, breadcrumbs, tabs, footers) step by step to reach the target. Good navigation is like walking through a familiar supermarket: you know where to go without thinking.
(2) Search = Users bypass the structure and type directly to look things up. Good search is like having a store clerk who instantly answers you "Aisle 3".
The full text has 7 sections, from "how to position globally" to "how to organize content locally" to "how to do search", ending with "how to evaluate if navigation is good (tree testing)": ① Global navigation and spatial orientation → ② Several forms of menus (hamburger/contextual/search icon/menu checklist) → ③ In-page content organization (tabs · accordions · in-page links · table of contents) → ④ Global structural elements (footer · sticky header · mobile subnavigation) → ⑤ User search behavior (keyword foraging · how search engines shape gaze) → ⑥ Search engine results pages and features (SERP) → ⑦ Filtering, pagination and navigation evaluation (tree testing).
Two underlying concepts run through the whole piece, remember them first:Information Architecture (IA)= The skeleton of how many layers you divide content into, and what each layer is named;Interaction Cost= The clicks/scrolling/thinking/waiting users have to expend to reach their goal; all "good navigation" essentially reduces it.
1. Global Navigation and Spatial Orientation: Where You Are, Where You Can Go
This section covers "how users know where they are and what's around them on the big map of the website". Three tools each cover one segment:Global navigation(top-level, always present, not the focus of this set of notes),Local navigation(see the surroundings),Breadcrumbs(see the path taken);Spatial memory is the cognitive foundation that makes them work.
1.1 Local Navigation: See Clearly "My Immediate Area"
Core principle: Local navigation is contextual navigation relative to the current page, displaying peer pages(sibling pages under the same category) + child pages, equivalent to "you are here" + surrounding neighborhoods on a map. Its relationship to global navigation is like "full London map vs Brixton neighborhood map" — the global map helps you get from the British Museum to Buckingham Palace (crossing large districts), the neighborhood map helps you find nearby places to eat (seeing the surroundings).
Why: Deep pages have very specific content; when users land directly from search engines, they easily "don't know where they are"; local navigation both gives a sense of location and provides a low-cost entry point for horizontal exploration (no need to go back to the top-level menu).
| Dimension | Key points |
|---|---|
| When to use | ① Users like to browse multiple pages under the same category (e-commerce product comparison, university major comparison) ② Need to integrate/compare multi-page information (compare product specifications) ③ Users often enter from inner pages |
| When not to use | IA is too shallow with too few pages; IA is too deep so navigation takes too much screen space (switch to breadcrumbs or contextual links) |
| Layout | Horizontal (below global navigation, suitable for narrow top-level categories)/ Vertical (on the left, forming an inverted "L" with global navigation, suitable for deep IA); do not over-indent |
| Display depth | Shallow levels fully display current category + subcategories; beyond 2–3 levels switch to breadcrumbs (Prudential: three levels show full local navigation, four levels switch to breadcrumbs) |
| Visual hierarchy | Easy to find but do not be more prominent than global navigation(Generac old version local navigation was too eye-catching, users ignored global navigation); The New School balances the two with color and background contrast |
| Interaction cost | Always visible, no hover required; can be made sticky for long sessions of deep exploration (RISD provides sticky local navigation for each degree program) |
Counterexample: Making local navigation more prominent than global navigation → users mistake the local for the global, and get lost across categories.
1.2 Breadcrumbs: See Clearly "My Path Taken" (11 guidelines)
Core principle: Breadcrumbs are a string of links representing the hierarchical path of the current page and its ancestor pages(Home > Explore > Itinerary > Cultural Immersion), usually below global navigation, separated by ">". They reflect the page's hierarchical position in IA, not the user's browsing history.
Why: When users land directly on a deep page from a search engine, breadcrumbs tell them at a glance "which major category this page belongs to", and provide a shortcut entry to "go up one level to see broader content".
| # | Desktop guidelines | Key points |
|---|---|---|
| 1 | Supplement, not replace, other navigation | Do not let breadcrumbs double as local navigation (Travelsouthdakota made parent levels into peer dropdowns, confusing the two navigation purposes) |
| 2 | Show hierarchical structure, not session path | Not a browser back button; session paths are long and repetitive |
| 3 | Choose a single "canonical path" for multi-parent pages | Do not display multiple paths at the same time |
| 4 | Current page as the last item but unclickable, and visually differentiated | British Red Cross did not distinguish links from non-links, causing confusion |
| 5 | Only include actual pages, not logical categories | Newegg "Business Network" has no independent page → do not include in breadcrumbs |
| 6 | Do not use for flat/linear sites | MIT has shallow hierarchy, NPR linear special features, breadcrumbs have no value |
| 7 | Path starts from home | But do not duplicate the home link in both global navigation and breadcrumbs, choose one (Oregon state government omitting breadcrumb home is OK, because global navigation has it) |
| # | Mobile guidelines | Key points |
|---|---|---|
| 1 | Avoid multi-line wrapping | REI mobile breadcrumbs take too much space, pushing product titles below the fold |
| 2 | Do not be too small or too dense | Touch target ≥ 1cm × 1cm |
| 3 | Consider shortening the path | On mobile only keep the direct parent link (Bestbuy mobile only shows parent category, desktop shows full path) |
1.3 Spatial Memory: Why "Stable Position" Is So Important
Core principle: Spatial memory = the ability to remember "where things are" through repeated interaction. Stable positions + repeated use allow users to automate the task of "finding buttons", saving visual search cost every time.
Why: Research finds human spatial memory is based on boundaries and landmarks(like locating Paris by the Seine on a map), and is mostly fuzzy — divided into two levels:Neighborhood-level memory(remembering roughly which district) is enough for most objects; only high-frequency objects rise to house-number-level memory(precise location). Ability also varies from person to person.
| Design recommendations | Practice |
|---|---|
| Avoid Adaptive UI | Do not dynamically move elements based on user behavior; if you want "recently used/frequent items",add an extra block and keep original positions(Word font menu has "Recently Used Fonts" at top + original positions retained in the full list below) |
| Clear visual + text cues | Pair icons with text labels; use color highlighting to distinguish similar elements but do not create visual noise |
| Wide and shallow hierarchy | See more options on one screen, speed up positioning, reduce click-to-expand |
| Information space overview | Minimap (code editor Atom), thumbnail view (Preview documents), zoom animation for overview↔detail switching |
| Artificial landmarks | Visited links change color, page-corner-fold style markers help users backtrack |
Counterexample: macOS Finder automatically rearranges "Applications" icons when resizing the window → spatial positions are not preserved, forcing users to search again.
II. Several forms of menus: Hamburger / Contextual / Search icon / 17-item master checklist
2.1 Hamburger Menu: From "reduced usability" to "recognized but still costly"
Core principle: Three horizontal lines icon ≡. Early (2015–2016) studies concluded: hidden navigation → fewer clicks, lower task success rate, longer time on task, lower satisfaction,especially bad on desktop. Today (new research): most users correctly recognize it as the "main menu", especially when it is placed at the top-left corner + classic three horizontal lines— but this only proves "recognition",it did not measure task completion rate/time, so the old problem of "hidden navigation adds one extra step of cost" has not been overturned.
Why: After mobile-first became widespread, users' mental model of the icon matured; but "familiar" ≠ "no cost", hidden navigation always adds one more step than always-visible navigation.
| Design recommendations (11 selected items) | Key points |
|---|---|
| Standard three horizontal lines + top-left corner | Do not invent new styles, do not place it elsewhere |
| Avoid border decorations | Toms added a border and it was mistaken for a "document" icon |
| Add the text label "Menu" | Provide a fallback for new users / unconventional layouts |
| Prevent visual confusion | Do not place other three-line-like icons in the top-left corner(Apple Notes list view icon was mistaken for navigation; YouTube filter icon was mistaken for a category list) |
| Pair with other navigation | Use in-page links, footer navigation, and search together |
Counterexample: Using a hamburger to hide navigation on large desktop screens (Metropolitan Opera, Ideo full-screen menu) — hiding it when there is clearly space is counterproductive.Judgment: Usable on small screens with limited space; do not use on large screens.
2.2 Contextual Menus: The "right-click small menu" attached to an object
Core principle: Contextual menu = pops up on demand, contains only a small set of actions related to "a specific object/area" (like Archive/Report/Delete in the three-dot menu to the right of each ChatGPT conversation). Two entry icons:kebab vertical three dots ⋮ / meatball horizontal three dots ⋯, most users interpret them as "more related actions". Trigger methods: desktop right-click/Ctrl+click/two-finger tap; mobile long-press/swipe/tap.
Why: Put actions that "only apply here" into an on-demand menu to reduce interface clutter and cognitive load; but it inherently has uncertainty —users cannot tell what is inside before opening it.
| # | Design principles (merged from two seminal articles) | Key points / Counterexamples |
|---|---|---|
| 1 | Only place secondary, non-critical actions | ❌ Customer service window hides "End Chat" (critical action) inside the menu; ❌ Mixes global commands into it |
| 2 | Place it close to the content it acts on | Users judge what a control affects by "spatial distance"; too far away makes the association ambiguous |
| 3 | The same commands must also be accessible from the main menu | Users who do not discover the contextual menu can still find them (Photoshop layer actions are also in the main menu) |
| 4 | Sufficient size + contrast | ❌ Too small/low contrast/only appears on hover; ✅ Rippling adds a border to the three dots to make it more prominent |
| 5 | Actions should be related to each other and centered on the same object | ✅ Slack message menu only contains actions for that specific message |
| 6 | Consistent appearance and behavior | ❌ Google's vertical three dots pop up completely different things in different locations (Ad Center modal/side panel), causing users to lose trust |
| 7 | Use tooltips/labels to reduce ambiguity | ✅ Notion shows "Style, Export, and more…" on hover; ❌ Tooltip only says "Ellipses" with no useful information |
| 8 | Use the icon for "actions", not "content expansion" | ❌ Etsy uses three dots to expand full comments; ✅ Google directly uses the text "Read more" |
| 9 | Do not create a menu for 1 action/very few actions | ❌ Weather site opens a menu with only "Delete"; ✅ Pinterest directly shows save/share on hover |
| 10 | Do not use the hamburger icon to trigger contextual actions | Three horizontal lines = global navigation, not an entry point for object-level actions |
| 11 | Keyboard accessible + screen-reader recognizable | Cannot serve only mouse/touch users |
Other practical tips: sort by frequency of use, display keyboard shortcuts (PowerPoint), limit submenu levels (Google Sheets Paste Special submenu is hard to select),≤10–12 items(Zillow 9 items), gray out unavailable items instead of hiding them(Evernote "All Notes").
2.3 Magnifying-Glass Icon: Saves space or reduces discoverability?
Core principle: 🔍 Almost everyone recognizes it as "search". But icon-only = search becomes less discoverable, because the icon takes up little space, is not prominent, and forces users to click one extra time to bring up the input box.
Why: On mobile where every pixel counts, icon-only is reasonable; on desktop where there is space, hiding it actually increases interaction cost.
| Device | Recommendations |
|---|---|
| Desktop/Tablet | Keep a visible text input box(not just an icon); place it in the top-right corner (user habit); keep the icon simple, large enough, high contrast;both pressing Enter and clicking the icon should submit; fixed box width ≥ 27 characters |
| When icon-only | Do not let it be drowned out by other icons; do not place it in isolation (violates Gestalt proximity); after clicking, the text box should appear near the icon;single click to start typing(do not require two clicks) |
| Mobile/Small screens | The text box can be hidden and expand only when the icon is tapped, but after expansion automatically activate the cursor; use smooth animation, do not cover critical content |
Side note: Most other icons (three-line menu, map marker) are not yet fully familiar to users, so desktop still recommends pairing them with text labels — the magnifying glass is one of the few exceptions that can stand without a label.
2.4 Menu design checklist: 17 UX guidelines (master framework)
Core principle: Menus are the central hub for users to find content and use features. The 17 guidelines are divided into four groups — making navigation visible / show current location / present available options / easy to operate.
| Group | # | Guideline | Counterexample / Positive example |
|---|---|---|---|
| Visible | 1 | Show navigation on large screens (do not hide it with a hamburger) | ❌ Metropolitan Opera uses hamburger on desktop |
| 2 | Place it where users expect | Primary navigation at the top (left side for apps), secondary navigation on top of primary navigation, local navigation on the left on desktop, footer menu at the bottom | |
| 3 | High-contrast link text | ❌ Gus Modern transparent navigation bar is hard to read over carousels | |
| 4 | Avoid full-screen menu coverage on large screens | ❌ Ideo full-screen menu causes brief disorientation | |
| Current location | 5 | Clearly mark the current page | Bold/underline/color change; ❌ Anthropic does not mark location; ✅ Whirlpool uses breadcrumbs |
| 6 | Provide local navigation for related content | ✅ NYC planning department left-side local navigation | |
| Available options | 7 | Labels are clear, specific, and familiar to users | Avoid internal jargon/abstract categories |
| 8 | Improve scannability | Left-align vertical menus, front-load keywords | |
| 9 | Use submenus to show multiple layers on large sites | ✅ Toyota mobile sequential menus with images | |
| 10 | Visual cues help browse long menus | Icons/colors assist, but retain text labels to preserve accessibility | |
| Easy to operate | 11 | Links are large enough to click/tap easily | ❌ Teenage Engineering links are too small and too dense |
| 12 | Use arrows to indicate expandable submenus | ✅ Stanford uses caret symbols | |
| 13 | Click-to-activate is better than hover | Hover does not work on touchscreens and is prone to accidental triggers | |
| 14 | Avoid multi-level cascades; use mega menus/landing pages instead | ❌ R Studio multi-level dropdowns are hard to operate | |
| 15 | Consider fixed menus for long pages | Reduce scrolling cost, especially on mobile | |
| 16 | Optimize physical convenience | Place frequently used items near the trigger area to reduce movement distance | |
| 17 | Do not over-innovate with flashy designs | ❌ Adobe CXM dot-style navigation is hard to understand |
III. In-page content organization: Tabs · Accordion · In-page links · Table of contents
This section covers "how to organize a pile of content on a long page so users can see the full picture without being overwhelmed". Four tools, the core tradeoffs are"whether to hide content by default"and"whether users need to view multiple blocks at the same time".
3.1 Tabs: Parallel grouping within the same context
Core principle: Tabs let users view only one panel at a time within a set of parallel content (like divider labels in a filing cabinet). Four elements: tab list, tab label, panel, selected indicator.
Why: Hiding unselected content → simplifies the interface, improves navigation efficiency; but the cost is that users cannot view multiple blocks at the same time.
Key distinction: Navigation tabs vs In-page tabs (do not mix them!)
| Characteristic | Navigation Tabs | In-page Tabs |
|---|---|---|
| Content | Broad scope, unrelated, each on an independent page | Narrow scope, related, similar content |
| Position | Top/side of viewport (bottom on mobile) | Embedded within the page layout |
| Scrolling | Often fixed | Rarely fixed |
| User expectation | Navigate to a new page, possible loading delay | Stay on the current page, instant switching |
| Default | One is selected by default (exceptions may exist) | One must be selected |
Counterexample: San Diego Wildlife / Behance mix the two types of tabs in one group — most tabs stay on the current page, but one jumps to a new page/new site, breaking user expectations.
| Visual best practices | Content best practices |
|---|---|
| Clear selected state (background/underline/font; ❌ CNN bolding is too subtle) | Sort by usage frequency, place high-frequency items first and select them by default (✅ SpotHero "Upcoming" is first) |
| Unselected tabs must also be clearly visible (❌ MongoDB low contrast makes them look unavailable) | Logical grouping |
| Tabs connected to panels (sense of proximity; ❌ Panera delivery tab is disconnected from its panel) | Descriptive naming (❌ Variety "Legit" branded term has weak information scent) |
| Avoid multi-line tab lists (❌ 2000 Amazon stacked tabs) | Concise 1–2 words, do not use all caps |
| Place the tab list above the panel (❌ Okta placed it on the right and added auto-carousel) | Make tab functionality discoverable (keyboard navigation/ARIA; ✅ Sheets split button) |
When to use: Content groups are clear, number of groups is small, importance is uneven (default tab gets more attention), can be named briefly, no need to view multiple blocks simultaneously.
3.2 Accordions: Clickable title + collapsible panel
Core principle: Accordion = clickable title + panel hidden by default, a form of Progressive Disclosure(lets users expand on demand, giving a sense of control).
Why: Reduces clutter, shortens page length, gives a page overview (like a table of contents), improves scannability, provides direct access to content. But it has costs.
| Advantages | Usability issues |
|---|---|
| Reduces page clutter (TurboTax segmented forms) | Fragmented information access: to view multiple blocks you must expand them one by one; auto-collapse hinders comparison (ACL) |
| Shortens the page (Logitech product pages) | Increases interaction cost (USDA hides short mask guidelines that should be displayed directly) |
| Provides an overview (Codecademy course syllabus) | Reduces discoverability (if titles are unappealing they get ignored) |
| Improves scanning (USCIS step-by-step) | Accessibility: titles must be buttons, state changes must be read aloud |
| Direct access to content (Google "People also ask") | Inconvenient for printing: must expand each one individually |
| When to use | When to not use |
|---|---|
| Users only need a small amount of information (Delta FAQ) | Users need to see all content (Northeastern application requirements, should be fully displayed) |
| Logical step-by-step flow (Sephora checkout expands step by step) | Page content is already very little (looks empty, mistakenly perceived as lacking value) |
| Content is independent of each other | Content has deep hierarchy (nested accordions cause disorientation, use vertical navigation/tabs instead) |
| Long pages + small windows (especially mobile) | Content is hard to summarize into concise titles (Rotten Tomatoes blurbs) |
| Requires continuous reading (long articles, should be scrollable, Vox) |
Implementation notes: Titles accurately reflect content, clearly indicate clickability (plus sign/arrow), provide "expand all/collapse all", do not hide critical information.
3.3 Tabs vs Accordions: A selection table
Core principle: Both compress large amounts of content into small spaces and reduce visual clutter, but they have different orientations.
| Dimension | Tabs | Accordions |
|---|---|---|
| Arrangement | Horizontal | Vertical (expansion pushes content below downward) |
| Content length tolerance | Suitable for few but long chunks | Suitable for many but short chunks |
| Title length | Must be short (single line) | Can be long, even multi-sentence phrases |
| Typical scenarios | Parallel topics (project information subtopics) | FAQ, long mobile pages |
| Common shortcomings | Neither is suitable for comparing content across blocks; both require logically clear chunks |
3.4 In-Page Links: The "elevator" within a page
Core principle: In-page links (anchor links/jump links) = click to jump directly to a section on the same page(like an elevator going straight to a floor), often placed in a table of contents at the top of the page.
Why: Skip uninteresting content, reduce scrolling; a top-of-page table of contents also gives users an overview of the page and helps build a mental model. But users occasionally mistakenly think it jumps to another page (Phone Arena case) —Clearly label it "Table of Contents" / "On this page"can be avoided.
When to use: Only worth it when the page is long enough (adding a TOC to a short page pushes key content further down); first consider whether content can be streamlined; for extra-long pages covering multiple topics, consider splitting them into multiple pages (single long pages load slowly and are not mobile-friendly); content must be logically divisible into sections (do not use it for coherent interview-style content that is hard to split).
Comparison of alternatives (TOC vs Accordion vs Tabs):
| In-page links | Accordion | Tabs | |
|---|---|---|---|
| Function | Navigation | Content structuring | Content structuring |
| Page length | Increases | Decreases | Decreases |
| Content hidden by default | No | Yes | Yes |
| Access to multiple sections | Yes | Yes (if multiple can be opened) | No |
| Primary use case | Table of contents | Formatting multiple short sections | Parallel content |
3.5 Table of Contents: The Ultimate Design Guide (Decision Tree)
Core principle: A TOC is an ordered, clickable list of headings corresponding to each section of the page, supporting direct jumps. Advantages: provides a page overview, enables direct access to any section, improves visibility of bottom content, facilitates sharing of specific sections (via URL fragment identifier #),improves SERP visibility(search engines can recognize TOC headings and generate sitelinks).
Why: A good TOC requires choices across two dimensions — "layout + styling" — and the core tradeoff is discoverability vs space occupation vs not being mistaken for ads/external links.
| Decision dimensions | Options and recommendations |
|---|---|
| Position: Main body vs Sidebar | Main body is the most universal and best for mobile; a left sidebar works well for multi-column large screens with good visual separation but is unavailable on mobile; a right sidebar is rare and easily ignored (right-rail blindness). |
| Sticky vs Non-sticky | Sticky is suitable for sidebars, letting users track their position at any time while scrolling (Time bolds the section the user has scrolled to); non-sticky is suitable for the main body to avoid conflicting with global navigation. |
| Top of page vs Middle of content | Top of page is best(below the title/overview); placing it in the middle of the main text reduces discoverability and makes it easy to confuse with other links. |
| Styling: Vertical/Horizontal/Multi-column | Vertical is most common, suitable for long headings and easy to scan; horizontal saves vertical space but only works for short headings and is hard to scan; multi-column is suitable for long lists, saves space and is easy to scan. |
Best practices: Use clear labels ("Table of Contents" / "On this page" / "ON THIS PAGE"; ❌ Robinhood's "Tell me more…" was mistaken for an external link), link labels should match section titles exactly (❌ ready.gov's label "Prepare in Advance" did not match the section "Before an Event"), keep headings concise and scannable,do not include external links(users expect all jumps to be within the page), do not skip content above the fold, include a "Back to top" link, and keep styling consistent across the whole site (❌ FDA used 4 different styles on adjacent pages).Counterexamples: WebMD styled its TOC as chips (the conventional style for filters/tags); Wirecutter did not color its links and only showed an underline on hover, leading to no interaction.
IV. Global Structural Elements: Footer · Sticky Header · Mobile Subnavigation
4.1 Footers 101: The Underrated "Last Stop" (7 Types of Components)
Core principle: The footer is a "harmless but beneficial" area at the bottom of the page — low cost, does not interfere with main content, yet serves two types of users:people who did not find what they were looking for(providing a re-engagement entry point) and people who go straight to the footer for specific information(contact information/company information/social media).
| # | Component | Applicable scenarios |
|---|---|---|
| 1 | Utility Links (address/phone/privacy policy/terms) | All websites (repeat them in the footer even if they appear in the header) |
| 2 | Doormat Navigation (repeats the top global navigation) | Long pages, or mobile sites without global navigation at the bottom |
| 3 | Secondary Tasks (recruitment/media kit/investors) | Multi-purpose sites with multiple user groups |
| 4 | Site Map (top-level + subcategories) | Large sites with deep information hierarchies (CNN) |
| 5 | User testimonials/awards | New companies/startups with low brand awareness (use in moderation; too many looks unpolished) |
| 6 | Sub-brand display | Large enterprises with multiple sub-brands (Walmart lists Hayneedle/Jet) |
| 7 | User engagement (email subscription/social media/embedded feeds) | All sites can include social media; visual brands can embed feeds (The Good Trade) |
Two variants: ① Infinite scroll → the traditional footer disappears, replaced by a mini footer(LinkedIn right sidebar) or content is moved up into the global navigation (Barstool); ②contextual footer— customized by user role (Medium emphasizes membership benefits to logged-out users).
Common pitfalls → Solutions: Too many information hierarchy levels → limit to1–2 levels and prioritize important content; vague link names ("Resources"/"Help") → use clear terms ("Contact Us"/"Customer Support"); chaotic structure → group content and apply visual hierarchy; hidden/hard to read (small font, accordion-collapsed footers, Reserved.com) → use clear font colors and do not collapse the footer.
4.2 Sticky Headers: Headers That Follow You As You Scroll (5 Tactics)
Core principle: A sticky header is a header (navigation/search) fixed to the top of the screen during scrolling. There are two types:fully sticky(always fixed),partially sticky(appears only when scrolling up, hides when scrolling down). The benefit is that navigation is always available; poorly designed, it is annoying and crowds content.
| # | Optimization methods | Key points |
|---|---|---|
| 1 | Maximize Content-to-Chrome Ratio | Keep the header small and functional: click target ≥1cm×1cm, text ~16pt; do not waste height on an oversized Logo (The New Yorker has a 13:1 ratio on iPhone) |
| 2 | Sufficient contrast | Use an opaque background with high contrast against content; avoid translucency; add dividers for expanded menus |
| 3 | Keep animations minimal, natural, and fast | In most cases a fixed state is sufficient; keep necessary animations concise; avoid stalker menu(exaggerated delayed following of scroll); shrinking speed should follow the finger |
| 4 | Consider partial stickiness | Slide in only when scrolling up, with animation300-400ms, triggered after scrolling a few pixels; do not make it overly sensitive or delayed (CB2) |
| 5 | Evaluate whether it is truly needed | Do a cost-benefit analysis — if users do not often switch categories or use header elements, a sticky header has limited value and should not waste screen space |
4.3 Mobile Subnavigation: How to Fit Lower Levels on Small Screens?
Core principle: On mobile, lower levels of IA must be packed into small screens, and there are four implementation approaches. Design goals:minimize interaction cost + support typical navigation paths + improve discoverability(users must be able to distinguish main navigation from subnavigation).
| Type | How to use | Pros / Cons |
|---|---|---|
| Accordions (within the main menu) | Main categories are collapsed; tapping expands to show subcategories | ✅ Low interaction cost, supports multiple paths; ❌ Too many subcategories (>6) make the main menu too long (SBNation exceeds 3 screen heights) |
| Sequential Menus | After selecting a main category, the entire menu is replaced by subcategories, relying on an in-menu "Back" button | ✅ Suitable for many categories + small screens; ❌easy to get disoriented; ❌ Physical back button trap (HIV.gov: pressing the system back button jumps to the previous web page instead of the upper menu level); ❌ Does not support frequent cross-section navigation (Macys/Mayoclinic) |
| Section Menus | Place a standalone menu on the section homepage | ✅ Accommodates more subcategories, suitable for extended stays in a single section; ❌ Inefficient for cross-section navigation; ❌ UI collision with main navigation causes confusion (Breastcancer.org reuses the "Menu" button) |
| Category Landing Pages | The landing page lists all subcategory links as a hub | ✅ Suitable for extremely many subcategories/extremely complex IA (Stanford admissions is 6+ screens long); ❌ Every switch requires returning to the landing page and reloading, high interaction cost |
Selection decision algorithm: If subcategories per main category< 6 → Accordion/submenu; if some main categories6-15 → Section menu; if each main category> 15 → Category landing page.
V. User Search Behavior: Keyword Foraging · How Search Engines Shape Gaze
5.1 Keyword Foraging: "The Search Before the Search"
Core principle: Users often do not know the name of what they are looking for, so they first probe with vague queries, find the right term, then search precisely — this preliminary process is keyword foraging.
Why: In e-commerce, "a product that cannot be found = a product that cannot be sold." Four typical scenarios: ① Know the appearance but not the name (pointed-toe shoes = "wingtip") ② Know the problem but not the tool name ("grille trim") ③ Knew it before but forgot now ("hangar" → searches "aircraft shed") ④ Only familiar with the term in one language ("spring onions" vs American "scallions").
How to help users (5 points): ① Recognize when users are unfamiliar with the domain (common in skincare/auto parts/home improvement); ② Provide a faceted system/filters to progressively clarify needs and teach users terminology along the way(Home Depot filters); ③ Image search has potential (but most sites cannot match Google's level); ④ Review site search logs, pay attention to users' actual wording, and support fuzzy queries; ⑤do not coin unnecessary new brand terminology(renaming "self-cleaning" to "SmartClean Technology" makes it unsearchable) — if you must coin a term, supplement it with common alternative words on the site (balancing SEO + user education).
Counterexample: Users with low research skills searched "Paris shopping" before a trip to find currency information → got shopping district recommendations instead of currency information; foraging failed.
5.2 How Search Engines Shape Gaze: Google vs Baidu
Core principle: SERPs have evolved from "simple organic result lists" into complex pages with "knowledge panels + image packs + video packs + People Also Ask," and layout directly shapes users' eye-movement patterns. Google tends to place content in the main area, while Baidu tends to place recommendations in the right sidebar.
Why: Content in Baidu's right sidebar has low relevance(ads/trending searches), which over time trains users to develop Banner Blindness toward the right rail — even when relevant content is occasionally placed there, it is habitually ignored (searching "Shanghai Museum" shows related recommendations in the right rail but they are obscured by ads above, so users skip them directly). Google uses knowledge panels(highly relevant: clinic ratings/addresses/reviews) to rewrite users' mental model of the right rail, attracting attention instead.
Key lessons: ① Optimize content relevance (highly relevant promotional content can also be accepted; when Baidu answers "What to do at the Summer Palace," it successfully promotes its own Baike/Zhidao/Maps); ② Diversify content formats (text/image/video); ③ Avoid low-relevance content (it trains users to ignore the area and worsens blindness); ④ Draw on SERP features such as featured snippets for site search; ⑤it takes a long time to reverse users' formed negative expectations(in one study, it took about1 year for a new design to be accepted and stabilize).
VI. Search Results Pages and Features: Pinball Pattern · Three Major SERP Features · Rich Suggestions · Enterprise Internal Search
6.1 Complex SERPs Change Search Behavior: The Pinball Pattern
Core principle: In the past, SERPs were "10 blue links," and users read line by line from top to bottom (linear scanning). Today, with more images/videos/interactive features, users' gaze jumps like a pinball between visually prominent elements and keywords.
Why: The visual weight of each element determines the scanning path — gaze jumps more easily near prominent elements (featured snippets, shopping ads, knowledge panels); even organic results are more complex now (with sitelinks, in-site search boxes), attracting more gaze.
Key data (countering the old SEO dogma of "either first or last"):
| Metric | Data |
|---|---|
| Click share of the first result | 2006: 51% → 2016–2018: 28%(nearly halved) |
| Click share of the top three results | still 59% |
| Sixth result receives attention | 36% (in 2010: 59% of users did not look past the third result) |
| Featured snippets receive attention | 74% in cases |
| Second-page clicks | Only 2% of queries |
| Clicks below the fold | Simple/fact-finding tasks 5% vs research tasks 20% |
| Top five results | click rate ~10-20%, attention rate 40-80% |
Practical lessons: ① You do not always need to rank first, but you must be on the first page(page two gets only 2%); ② The more complex the task, the more willing users are to scroll down; ③ Even without clicks, being "glimpsed" improves brand awareness and benefits future clicks; ④ For complex tasks, users engage in "sustained browsing" — if they click and are unsatisfied, they return to the SERP to select another previously noticed result; ⑤ Simple needs are often satisfied directly on the SERP (no clicks), challenging traditional traffic models.
6.2 Three Major SERP Features: Featured Snippets · People Also Ask · Knowledge Panels
Core principle: These three features strongly influence user behavior and can be borrowed for site search.
| Feature | What it is | Function |
|---|---|---|
| Featured Snippets | A brief card answering the query (paragraph/list/table/video), some interactive (tapping tags switches keywords to load new snippets) | Provides answers directly; teaches users more precise terminology ("clean marble" → prompts "polish marble") |
| People Also Ask | A collapsible list of related questions; expanding an item reveals a featured snippet and loads more entries | Acts like parallel search previews, no need to leave the SERP |
| Knowledge Panels | Entity information in the right column (people/places/organizations: photos/definitions/addresses/phone numbers/CEOs/stock prices) | A high-level overview users rely on when researching a new company or institution |
Four core roles:①Signpost(Image thumbnails help quickly verify whether the query is correct — when searching for "copperhead", seeing a snake picture immediately tells you the query is wrong; adding an "s" returns the Civil War political faction); ②Attract attention(Visual prominence + low interaction cost create pinball-style jumping between results); ③Adjust query/task(When looking up "Botox price", seeing "Is Botox safe?" in People Also Ask leads users to shift toward non-invasive treatments — Google redirects the user); ④Provide quick answers(For simple questions there is no need to click a link, achieving benign "task termination").
Site search applications: If you can’t beat Google, copy it — imitate featured snippets by turning preferred results for common queries into summaries (Encyclopedia Britannica already does this);Avoid banner blindness: Some users skip ad-like featured snippets, but the same content at the same time still gets clicked when it appears as a traditional text result; copying Google’s visual design lets you leverage users’ existing mental models (a rare opportunity to "reasonably imitate a major site").
6.3 Enriched Suggestions: Great in theory, rarely used in practice
Core principle: Enriched suggestions = while the user types, in addition to text autocomplete, you also display trending searches/recently viewed items/recommended products/image-and-text cards. It sounds useful, but in e-commerce research users only used them 7 times out of 60.
Why (four reasons for failure):①Mismatch with the "searching" mindset— When searching, users have a clear goal and want to bypass browsing (like heading straight for an ingredient in a supermarket); recommendations unrelated to the query are treated as distractions; ②Slow loading— When images are included, they can’t keep up with typing speed, causing content to jump and lag (on saksoff5th, when searching for "men’s cashmere sweaters", related results only appeared after pressing Enter, which was too late); ③Banner blindness— Ad-like styling + placement far from the search bar caused even directly matching product images to be ignored (users looking for a PS5 did not notice the PS5 image in the right column, thinking it was a "trending search"); ④Mistaken for promotional content— When there is no label or clear reason for display, they are ignored as "cross-sells".
Recommendations: Keep simple text autocomplete (it is used heavily); limit graphical/dynamic content (reduce load + mitigate blindness); clearly label suggestion types (bestseller/recommended/recently viewed); keep content types in fixed positions; don’t assume users will get used to it over time.
6.4 Intranet Search: High expectations, low trust
Core principle: Employees expect intranet search to work like Google, but in reality it often fails → loss of trust → users switch to navigation (which is slower) → erodes confidence in the entire intranet.Design + process are both indispensable.
| Design practices (11 items) | Key points |
|---|---|
| Use a search box, not just an icon | Place a visible search box in the upper right corner |
| Integrate into a single search box | One box searches content/people/tools; don’t split into multiple boxes; index the whole system as much as possible |
| Effective placeholder text | Explain searchable scope, be concise; disappear on input, reappear when text is deleted |
| Fast, relevant input suggestions | Fast, automatic, non-intrusive; don’t let slow suggestions cause mis-selection; allow searching the original term directly |
| Clean, columned results page | Separate columns for content/people/tools; people entries include name/position/contact information |
| Clear metadata | Consistent titles/descriptions/labels |
| Show dates | Publication/update dates help assess timeliness; regularly clear outdated content |
| Sorting + filtering | Show filters on the left by default, support multi-select, show result counts for each item; sorting in the upper right (newest/oldest) |
| Highlight important results | Use pinning to keep critical content at the top, findable even when the query changes |
| Spelling suggestions | "Did you mean", plus synonym/multiple-spelling/polysemy matching |
| Pagination, not infinite scroll | Preserve accessibility + users’ sense of control over result count |
Process practices: Conduct regular usability testing + review search logs, monitor high-frequency terms and zero-result queries, provide feedback forms and issue monthly reports, proactively promote search improvements (employee confidence rises significantly after promotion).
VII. Filters, Pagination, and Navigation Evaluation: Filter categories · Pagination alternatives · Tree testing
7.1 Filter Categories and Values: Four traits of usable filters
Core principle: Filters consist of two parts —Filter Category(attributes, such as "color" "price") + Filter Value(specific values, such as "red" "under $100"). Good filters give users a sense of control when facing massive choices.
Why: All four traits are required —
| Trait | Meaning | Counterexample / Positive example |
|---|---|---|
| Appropriate | Covers the dimensions users care most about; generic categories (brand/material/color/rating/price/size/in-stock) are not enough — customize by category (washing machines need "capacity", dishwashers need "water consumption") and localize currency units | ❌ Nordstrom promotional shoes lack a "size" filter |
| Predictable | Users can roughly guess what values are in each category and how categories differ (collapsed value lists on mobile test this more severely) | ❌ DSW uses the vague label "product type", and "style" contains "gladiator sandals" instead of the general "sandals"; ✅ Revised to layered filtering (Amazon-style) |
| Free of Jargon | Use plain language for labels/values, no internal codes | ❌ SPCA uses "purple/orange/green" as behavior filters (internal codes with no meaning); ✅ Best Buy adds a tooltip next to "processor model" ("the brain of the computer") |
| Prioritized | Put the most commonly used generic categories (brand/price/rating) at the top, technical specs at the bottom; numeric values low→high or high→low, text values alphabetical (unless there is clear user priority) | Exception: washing machine "capacity" has high impact and should be prioritized |
7.2 Alternatives to Pagination: Infinite loading vs. Show More
Core principle: On e-commerce listing pages, besides traditional pagination (next page/page numbers), there are two alternatives —Infinite Loading(auto-load when scrolling to the bottom) and Show More(load on button click). Which one to choose depends on product quantity.
Why: Infinite loading has two hard flaws for large-scale product sets — ① it continuously pushes the footer away (users can’t reach return policies, etc.), ② users lose a sense of progress and easily get disoriented. That is why massive product sets like Amazon still use traditional pagination(precise control, prevents overload).
| Solution | Applicable scenario | Key requirements |
|---|---|---|
| Infinite loading | Few products (< 40 items/page), good filters, total count shown | Loading must be fast (the baseline users accept); show total count + sense of progress (Ann Taylor uses a thickened border ring as a progress indicator) |
| Show More | Mobile, users want control over whether to load more | Avoid footer obstruction (only loads on click); show total count + loaded count + remaining count(Lululemon "Viewing 40 of 333 items", button disappears after loading completes) |
Universal requirement: remember user position (bounce back)— When users go from a listing page to a detail page and then return, they should land back at the original scroll position, not be forced to re-scroll (Christian Louboutin infinite scroll + position memory is especially important on mobile, because opening new tabs is more cumbersome there). Usability testing should be conducted when adopting either alternative.
7.3 Tree Testing: Evaluate navigation without drawing a single pixel
Core principle: Tree testing = a task-based research method that extracts IA into a plain-text clickable menu (tree), and asks users to find specified resources on a"bare skeleton" without visual design/content/search/dropdowns — specifically testing whether category labels and hierarchy are clear. Only two preparations are needed: a tree structure (organized in a spreadsheet, top level in the first column, child levels extending to the right; Treejack/UserZoom automatically converts it into a clickable menu) + test tasks.
Why: Enables fast IA iteration without development; it is usually unmoderated and can collect quantitative data from large samples. However, it lacks context, so it should be paired with a small number of moderated studies + post-test surveys to supplement qualitative insights; answers can usually only select leaf nodes; it is not suitable for evaluating complex navigation such as mega menus.
Key metrics + interpretation:
| Metric | Meaning | Benchmark (Albert & Tullis) |
|---|---|---|
| Success Rate | Proportion of users who found the correct category | <40% Poor / 41–60% Fair / 61–80% Good / 81–90% Very Good / >90% Excellent (key task target >90%) |
| Directness | Proportion of users who entered the correct category on the first try (no backtracking) | 74% success rate but only 50% directness → labels are not clear enough |
| Time Spent | Average completion time | Even with success, long time spent = the task is too complex |
| Pathways | Selection frequency for each category,first click, final selection | The first click often determines success or failure |
Task design: Don’t directly reveal the answer using label names (❌"Find information about 'starting a business'" → ✅"You plan to open a lawn care company, see if there are resources to help you start your business"); task types include resource finding/problem detection/comparative testing/warm-up tasks.
Turning data into action: ① Scattered first clicks → restructure the architecture or add Polyhierarchy(placing the same resource under multiple parent categories to accommodate different mental models; but overuse causes chaos — if a correct path is almost never taken, there is no need to keep it); ② Correct first clicks but low success rate → optimize subcategory labels (too much overlap between subcategories, e.g., both "Arts and Culture" and "Explore Fascinating Places" get selected); ③ Long time spent/complex paths → simplify hierarchy. Compare multiple trees using between-subjects experiments (each person tests one tree) + manually calculate significance (use N-1 two-proportion test for binary success rates, t-test/ANOVA for time spent).
vs Card sorting: Card sorting generates categories (observing how users naturally organize content, reflecting mental models) → tree testing validates the existing hierarchy (whether users can find the target). Common sequence: card sorting generates a scheme → tree testing validates → design and development.
Sourced from NNGroup Topics / Design Patterns - Design Patterns (Navigation and Search subset, 25 patterns). For usability testing and the ten heuristics, see NNGroup Usability Testing and the Ten Usability Heuristics (Complete table of 10 heuristics · Complex application use · User pleasure hierarchy · Testing methods: 5-user rule/recruitment/remote/task scenarios/step-by-step tasks/attitude vs behavior/4-step analysis/small-sample errors/competitive evaluation); for form and input patterns, see NNGroup Interaction Patterns · Forms and Input Controls (19 patterns · Form validation/checkboxes/date/steppers/parameter controls/listbox vs dropdown/toggles/split buttons/cancel vs close/link labels/passwordless login/wizards/drag and drop/accelerators/calculator quiz); for feedback and dialog patterns, see NNGroup Interaction Patterns · Feedback · Dialogs · Notifications · Loading · Prompts · Empty States · Data Presentation (15 patterns · When to use/how to choose/counterexamples); for user research methods, see NNGroup UX Research Method Selection (Quick reference for 23 methods/four-quadrant positioning/selection by question-stage-budget/five families: qualitative exploration · quantitative validation · expert evaluation · IA · behavioral analysis). Images/original documents (including eye-tracking heatmaps, decision tree diagrams, screenshots and videos of each site) are retained in sources.
Sources and related materials
- NNGroup Interaction Patterns · Forms and Input Controls (19 patterns · Form validation/checkboxes/date/steppers/parameter controls/listbox vs dropdown/toggles/split buttons/cancel vs close/link labels/passwordless login/wizards/drag and drop/accelerators/calculator quiz)
- NNGroup Interaction Patterns · Feedback · Dialogs · Notifications · Loading · Prompts · Empty States · Data Presentation (15 patterns · When to use/how to choose/counterexamples)
- NNGroup Usability Testing and the Ten Usability Heuristics (Complete table of 10 heuristics · Complex application use · User pleasure hierarchy · Testing methods: 5-user rule/recruitment/remote/task scenarios/step-by-step tasks/attitude vs behavior/4-step analysis/small-sample errors/competitive evaluation)
- NNGroup UX Research Method Selection (quick reference for 23 methods/four-quadrant positioning/selection by question-stage-budget/five major families: qualitative exploration, quantitative validation, expert evaluation, IA, and behavioral analysis)