The Design of Sites: Ch. 2 — Making the Most of Web Design Patterns
Chapter 2 of The Design of Sites. Explains the book’s design-pattern framework (Web Design Patterns): what a pattern is, the six-part format used to document each pattern (name, background, problem, forces, solution, other patterns to consider), how patterns connect into a larger pattern language, and how patterns are grouped (A–M) to support different stages of the design process.
License: © 2006 Pearson Education / New Riders — all rights reserved, no open license; one of the book’s co-authors is a FuguUX founder, which is the basis for citing it here.
Key points
- Patterns are traced back to architect Christopher Alexander’s A Pattern Language: Towns, Buildings, Construction (1977), which proposed a shared language for design decisions. The authors adapt this idea to Web design, with an explicit emphasis on customer-centered design (Customer-Centered Design).
- Each pattern is documented in six parts, always in the same order: Name (a short phrase usable in a sentence, conventionally written in small capitals), Background (which other patterns lead into this one, and the pattern’s scope), Problem (a concise statement of the specific design problem), Forces (the competing concerns — user behavior, task requirements, technology constraints, social context — that make the problem non-trivial and that any solution must balance, e.g. bigger buttons are easier to click but consume more space, and image-based links load slower than text links), Solution (a succinct statement of how to resolve the problem, generally accompanied by a sketch), and Other patterns to consider (related patterns that can complete or extend the solution). A worked example, Action Buttons, demonstrates the full format and the idea of “forces” directly.
- Patterns are organized into thirteen lettered groups (A–M), roughly ordered by where they fit in the design process — from high-level site genres and navigation frameworks (A, B) through content, trust, and e-commerce concerns (D–H), to page layout, search, navigation mechanics, performance, and mobile concerns (I–M): Site Genres (A), Creating a Navigation Framework (B), Creating a Powerful Homepage (C), Writing and Managing Content (D), Building Trust and Credibility (E), Basic E-Commerce (F), Advanced E-Commerce (G), Helping Customers Complete Tasks (H), Designing Effective Page Layouts (I), Making Site Search Fast and Relevant (J), Making Navigation Easy (K), Speeding Up Your Site (L), and The Mobile Web (M).
- A second worked example, Search Action Module, shows the format applied to a more complex pattern with a background, search-selector trade-offs, and links to related patterns.
- A running example follows a designer, Sarah, using the pattern language plus customer testing (recruiting five participants, observing a checkout flow) to diagnose and redesign a broken checkout — illustrating Process Funnel and Customer-Centered Design in practice.
- The chapter argues that core interaction patterns (navigation bars, search boxes, checkout flows) have stayed stable across major sites (eBay, Amazon.com, Google, Yahoo!, CNN, MSN) from 2001–2006 even as visual styling evolved, supporting the claim that the underlying patterns are durable.