Ch-3 Billboard Design 101 - sociallery.com

Chapter-3

Billboard Design 101

Designing For Scanning, Not Reading

Summary

Chapter 3 focuses on designing for scanning rather than reading. Since users scan web pages looking for what they need, good web design is like billboard design – it must convey the message at a glance.

This chapter introduces key principles: Create clear visual hierarchies to guide the eye, use conventions that users already understand, break pages into clearly defined areas so users can quickly decide what to focus on, make it obvious what’s clickable, and keep visual noise to a minimum.

These principles help users find what they need quickly without having to think, which is the essence of good usability.

key Points

Designing for Scanning: Core Principles

Web design should be like billboard design – conveying information at a glance
Users are moving through pages quickly, scanning for what they need
Design must support scanning behavior, not fight against it

Principle 1: Create Clear Visual Hierarchies

Visual hierarchy shows relationships and importance at a glance
The more important something is, the more prominent it should be
“Use size, color, and positioning to indicate importance”
Things that are related logically should be related visually
“Group related items together under clear headings”
Things should be nested visually to show parent-child relationships
“Indentation and spacing show what’s part of what”

Principle 2: Use Conventions

Conventions are your friends – they make pages easier to understand
Users come to your site with expectations based on other sites they’ve visited
Following conventions reduces cognitive load dramatically
“Examples: Logo in top left links to home, underlined text is clickable”
Only break conventions if you have a really good reason
“The value must clearly outweigh the confusion caused”
If you’re going to innovate, make one thing slightly different, not everything

Principle 3: Break Pages into Clearly Defined Areas

Users decide quickly which areas of a page to focus on and which to ignore
Clearly defined areas allow users to rule out sections that don’t interest them
“Navigation areas, content areas, promotional areas should be distinct”
White space creates clear divisions between areas
Use background colors and borders to define sections

Principle 4: Make It Obvious What's Clickable

Users shouldn’t have to think about what’s clickable and what’s not
Links should look like links and buttons should look like buttons
Shape, location, and formatting should all reinforce clickability
“Underline text links, use button-like shapes for actions”
Provide visual feedback on hover to confirm clickability

Principle 5: Keep Visual Noise to a Minimum

There are three types of noise: shouting, disorganization, and clutter
Shouting: Everything can’t be important – if everything screams, nothing is heard
“Avoid too much bold, all caps, or large fonts competing for attention”
Disorganization: Lack of visual hierarchy and structure creates chaos
“Group related items, use consistent spacing and alignment”
Clutter: Too many things on the page without enough breathing room
“Use white space generously – it’s not wasted space”

Formatting Text for Scanning

Use plenty of headings – they organize content and help users scan
Keep paragraphs short – long blocks of text intimidate users
Use bulleted lists whenever possible
Highlight key terms – but use highlighting sparingly
Break up long pages with descriptive subheadings

Key Takeaways

Design for scanning: users won’t read everything, so make key information stand out
Visual hierarchy is essential – show importance and relationships through design
Conventions reduce cognitive load – don’t reinvent the wheel without good reason
Clearly defined areas help users quickly identify relevant content
Obvious clickability removes guesswork from navigation
Minimize noise by avoiding shouting, disorganization, and clutter