Design for Scanning, Not Reading
"Create effective visual hierarchies"
Krug emphasizes that websites should be designed like billboards—optimized for quick scanning rather than careful reading. A clear visual hierarchy helps users understand what's important without having to read everything.
Given that users scan rather than read, websites should be designed to facilitate this behavior. A well-designed visual hierarchy does the following:
- Shows what's important: The most important elements stand out visually.
- Shows what's related: Related items are visually grouped together.
- Shows what's nested: Visual cues indicate which elements are parts of others.
Key Elements of Billboard Design:
- Clear visual prominence for the most important elements
- Logical organization that matches users' expectations
- Visual distinctions that convey meaningful differences
- Clean, uncluttered layouts that focus attention
Break Pages into Clearly Defined Areas
"Break pages up into clearly defined areas"
Dividing pages into clearly defined areas helps users quickly decide which parts of the page to focus on and which parts they can safely ignore.
Well-defined sections help users scan and process information more efficiently:
- Quick identification: Users can quickly identify what each section contains.
- Selective attention: Users can focus on sections relevant to their goals.
- Reduced cognitive load: Clear separation reduces mental effort required to understand the page.
Implementation Techniques:
- Use distinct background colors or borders to separate major sections
- Maintain consistent whitespace between different areas
- Apply consistent styling to related elements
- Use headings to clearly label each section
Make It Obvious What's Clickable
"Make it obvious what's clickable"
Users should never have to wonder whether something is clickable. Make clickable elements look distinctly clickable through visual cues.
Since users scan pages quickly, clickable elements need to be immediately recognizable:
- Consistent styling: Links and buttons should have consistent, recognizable styling.
- Visual affordances: Elements should look clickable through familiar visual cues.
- State changes: Interactive elements should change appearance on hover or focus.