Navigation and Search
Navigation is the promise that users can always find their way. Search is the backup when structure fails or speed matters more than browsing.
Choose the Right Navigation Model
| Pattern | Best For | Watch Out For |
|---|---|---|
| Top navigation | Broad websites, marketing sites, lightweight apps | Too many items dilute meaning |
| Sidebar | SaaS and productivity apps with many destinations | Deep nesting creates maintenance and cognitive cost |
| Tab bar | Mobile apps and a few peer sections | Not for complex hierarchies |
| Mega menu | Large commerce or content catalogs | Can become a dumping ground |
| Command/search palette | Power-user flows | Needs good discoverability and keyboard support |
Good Navigation Rules
- Group by user mental model, not by internal teams.
- Keep labels concrete and familiar.
- Avoid overlap between categories.
- Highlight current location clearly.
- Make the path back obvious.
Wayfinding Cues
| Cue | Purpose |
|---|---|
| Page title | Confirms where the user is |
| Active nav state | Shows current section |
| Breadcrumbs | Helps in deep hierarchies |
| Filter chips | Reflects current scope |
| URL structure | Supports orientation and shareability |
Search UX
Search becomes essential when:
- inventory or content volume is high
- users know what they want
- time pressure is high
- browsing categories is slow or ambiguous
Good search includes
| Element | Why It Matters |
|---|---|
| Useful placeholder or label | Sets expectations for searchable content |
| Fast results | Search feels broken if latency is high |
| Autocomplete | Reduces typing and suggests vocabulary |
| Tolerant matching | Handles typos and partial queries |
| Clear empty results | Suggest next steps instead of dead ends |
| Filters and sort | Helps users refine without restarting |
Filters Without Frustration
- put high-value filters first
- show active filters visibly
- make clearing filters easy
- do not overload users with dozens of collapsed controls if only four matter
- preserve filter state when it improves task continuity
High-Converting Navigation Decisions
| Scenario | Strong Move |
|---|---|
| Marketing site hero | Keep nav light and CTA visible |
| Ecommerce category | Use filters that match buying criteria, not internal catalog quirks |
| SaaS onboarding | Reduce global nav until setup is complete |
| Pricing | Keep distraction low and make comparison easy |
Common Mistakes
- forcing users through deep menus for common actions
- using cute labels that hide the real destination
- changing nav patterns across adjacent sections without reason
- putting search behind an icon when it is a core behavior