The Design of Sites: Pattern Group H — Helping Customers Complete Tasks
Pattern Group H from The Design of Sites (van Duyne, Landay, and Hong, 2006). Covers thirteen patterns for structuring a site to minimize problems and improve task-completion rate, spanning process flow, account/session management, non-intrusive supplementary information, and form-input techniques.
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
- H1 PROCESS FUNNEL — a stepped-task sequence kept to two to six steps, stripped of tangential links while keeping brand reinforcement, using floating windows for extra detail without leaving the funnel; see Process Funnel
- H2 SIGN-IN/NEW ACCOUNT — minimal-information account creation, required/optional field marking, forgotten-password handling, and deferred sign-in for first-time visitors; see Sign-In and Account Creation
- H3 GUEST ACCOUNT — offering account creation as an optional step at the end of a process rather than a barrier at the start; see Sign-In and Account Creation
- H4 ACCOUNT MANAGEMENT — a single consolidated page for all customer account data, plus task-based contextual access to the same data; see Account Management
- H5 PERSISTENT CUSTOMER SESSIONS — temporary vs. persistent sessions, cookies vs. session IDs, and the identification/authentication distinction; see Customer Sessions
- H6 FLOATING WINDOWS — a non-blocking DHTML overlay that replaces intrusive pop-ups for supplementary content; see Floating Windows
- H7 FREQUENTLY ASKED QUESTIONS — gathering, organizing, and placing a FAQ page as a redundant (not primary) usability aid; see Frequently Asked Questions
- H8 CONTEXT-SENSITIVE HELP — placing help text and links spatially near the point of need; see Context-Sensitive Help
- H9 DIRECT MANIPULATION — drag-based interaction for organizing sets, layouts, and views, with grab techniques and feedback cues; see Direct Manipulation
- H10 CLEAR FORMS — value-proposition framing, label placement, automatic formatting, short/split forms, and error handling; see Form Design
- H11 PREDICTIVE INPUT — pick-list type-ahead and predictive text input, preloaded or dynamically loaded; see Predictive Input
- H12 DRILL-DOWN OPTIONS — hierarchical pick lists and hierarchical menus for interdependent option sets; see Drill-Down Options
- H13 PROGRESS BAR — outlining steps, showing completion state, clickable vs. non-clickable navigation, and step-specific edit links; see Progress Bar
Sites used as examples: Honda, Half.com, MSN Hotmail, eBay, Half.com/eBay, Wine & Spirits Magazine, Pottery Barn Kids, U.S. Mint, Outpost.com, Taxpayers Australia, LinkedIn, CDNOW, Kodak EasyShare Gallery, The Knot, Virgin Mobile, cookiecentral.com, Netflix, Gap, Businessweek, Snapfish, java.sun.com, rec.birds Usenet newsgroup, Dell, Monster, Yahoo! Mail, My Yahoo!, Flickr, Google News, Google Maps, Salesforce, Citibank, Kayak, Yahoo! Maps, Google Suggest, Yahoo! Autos, T-Mobile, memory.shopper.com, Cisco, American Airlines, Amazon, Apple Store, and Yahoo! Small Business.