Patterns

Selected patterns from the book are featured here on the website, in their entirety.

The complete list

Here are all of the patterns in the second edition of the book, sorted by chapter. Most of these patterns are not online yet, but many of them will become available over time as featured patterns. Patience!

What users do

Patterns of user behavior
  • Safe Exploration
  • Instant Gratification
  • Satisficing
  • Changes in Midstream
  • Deferred Choices
  • Incremental Construction
  • Habituation
  • Microbreaks NEW
  • Spatial Memory
  • Prospective Memory
  • Streamlined Repetition
  • Keyboard Only
  • Other People’s Advice
  • Personal Recommendations NEW

Organizing the content

Information architecture and application structure

Getting around

Navigation, signposts, and wayfinding

Organizing the page

Layout of page elements
  • Visual Framework
  • Center Stage
  • Grid of Equals NEW
  • Titled Sections
  • Module Tabs
  • Accordion NEW
  • Collapsible Panels
  • Movable Panels
  • Right/Left Alignment
  • Diagonal Balance
  • Responsive Disclosure
  • Responsive Enabling
  • Liquid Layout

Lists of things

Images, messages, search results, etc.

Doing things

Actions and commands
  • Button Groups
  • Hover Tools NEW
  • Action Panel
  • Prominent “Done” Button
  • Smart Menu Items
  • Preview
  • Progress Indicator
  • Cancelability
  • Multi-Level Undo
  • Command History
  • Macros

Showing complex data

Trees, charts, and other information graphics
  • Overview Plus Detail
  • Datatips
  • Data Spotlight NEW
  • Dynamic Queries
  • Data Brushing
  • Local Zooming
  • Sortable Table
  • Radial Table NEW
  • Multi-Y Graph
  • Small Multiples
  • Treemap

Getting input from users

Forms and controls
  • Forgiving Format
  • Structured Format
  • Fill-in-the-Blanks
  • Input Hints
  • Input Prompt
  • Password Strength Meter NEW
  • Autocompletion
  • Dropdown Chooser
  • List Builder
  • Good Defaults
  • Same-Page Error Messages

Using social media

  • Editorial Mix NEW
  • Personal Voices NEW
  • Repost and Comment NEW
  • Conversation Starters NEW
  • Inverted Nano-Pyramid NEW
  • Timing Strategy NEW
  • Specialized Streams NEW
  • Social Links NEW
  • Sharing Widget NEW
  • News Box NEW
  • Content Leaderboard NEW
  • Recent Chatter NEW

Going mobile

  • Vertical Stack NEW
  • Filmstrip NEW
  • Touch Tools NEW
  • Bottom Navigation NEW
  • Thumbnail-and-Text List NEW
  • Infinite List NEW
  • Generous Borders NEW
  • Text Clear Button NEW
  • Loading Indicators NEW
  • Richly Connected Apps NEW
  • Streamlined Branding NEW

Making it look good

Visual style and aesthetics
  • Deep Background
  • Few Hues, Many Values
  • Corner Treatments
  • Borders that Echo Fonts
  • Hairlines
  • Contrasting Font Weights
  • Skins and Themes