The Design of Sites: Pattern Group K — Making Navigation Easy
Pattern Group K from The Design of Sites (van Duyne, Landay, and Hong, 2006). Covers seventeen patterns for organizing and displaying navigation elements so customers can find links and predict where they lead — spanning navigation bar structure, link-naming and link-styling conventions, error handling, and URL design.
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
- K1 UNIFIED BROWSING HIERARCHY — cross-linking a site’s content, commerce, and community sections instead of forcing navigation back through the homepage; see Unified Browsing Hierarchy
- K2 NAVIGATION BAR — three navigation bar layouts (top-running, side-running, top-and-left/inverted-L) and icon+text labeling; see Navigation Menus
- K3 TAB ROWS — active-tab styling, the indicator line, and the roughly-ten-tab limit; see Navigation Menus
- K4 ACTION BUTTONS — graphical vs. HTML buttons, minimum target size, and the transparent-halo sizing trick; see Action Buttons
- K5 HIGH-VISIBILITY ACTION BUTTONS — placement and sizing rules for the one button that must complete a task; see Action Buttons
- K6 LOCATION BREAD CRUMBS — the three orientation questions a breadcrumb trail answers; see Breadcrumb Navigation
- K7 EMBEDDED LINKS — in-text links as an exploration aid, balanced against skimmability; see Embedded Links
- K8 EXTERNAL LINKS — minimizing link rot, marking off-site destinations, and when to open a new window; see External Links
- K9 DESCRIPTIVE, LONGER LINK NAMES — link text as a preview of the destination page; see Browsable Content
- K10 OBVIOUS LINKS — the case for the conventional blue underline; see Affordance
- K11 FAMILIAR LANGUAGE — writing in customers’ own vocabulary; see Plain Language
- K12 PREVENTING ERRORS — format hints, sample values, and flexible input parsing; see Form Design
- K13 MEANINGFUL ERROR MESSAGES — four characteristics of a recoverable error message; see Error Messages
- K14 PAGE NOT FOUND — a custom 404 page as a recovery tool, not a dead end; see Page Not Found
- K15 PERMALINKS — generic vs. content-specific URLs, temporary URLs, and durable URL design; see Permalinks
- K16 JUMP MENUS — an expandable/collapsible navigation menu for large link sets; see Jump Menus
- K17 SITE MAP — a comprehensive, last-resort navigation page; see Site Map (Navigation Page)
Sites used as examples: Yahoo! (Movies, Groups, News), Epicurious, Microsoft, LinkedIn, Amazon, The Knot, Crate & Barrel, Geocaching.com, Nordstrom, Eddie Bauer, WhatIs.com, CNET News.com, LUGNET, They Might Be Giants, Edmunds.com, MSN Hotmail, MyCiti, Dell, Google (Search, Maps, Site Map), New York Times, Autoblog, Yahoo Groups, E-LOAN, Wells Fargo, State Farm, Apple, Metacritic, Tiffany & Co., and Boing Boing.
Cited In
Patterns
- Action Buttons
- Breadcrumb Navigation
- Browsable Content
- Embedded Links
- Error Messages
- External Links
- Form Design
- Jump Menus
- Navigation Menus
- Page Not Found
- Permalinks
- Plain Language
- Site Map (Navigation Page)
- Unified Browsing Hierarchy