Web Application Design Patterns pdf

Praise for
Web Application Design Patterns

This is the type of book you’ll want to read with your entire team and a fl ip chart because
every page will produce a list of actionable changes for the applications you’re developing.
Pawan Vora has produced an amazing catalogue of the essential patterns for designing
today’s web-based applications.
— Jared Spool, Founding Principal, User Interface Engineering
A generation has watched the Internet work its way into every part of society as talented
designers and developers have explored new user interfaces and as the most robust design
patterns have emerged through the refi ning fi re of hundreds of millions of users. Pawan Vora
has done a wonderful service in capturing these best practices in
Web Application Design
Patterns
. This book will be valuable to people ranging from those putting together their fi rst
website to those shaping corporate web experiences, and from practitioners to researchers
benchmarking existing patterns as new interface paradigms are created.
— Arnie Lund, User Experience Director, Microsoft

Web Application Design Patterns
is a must-read if you are in the business of designing
web applications, or you simply want to understand the elements of a well-designed web
application. Pawan Vora has condensed best practices, along with research and his solid
experience, to create a useful reference about designing web applications. Even if you skim
the book and look at the designs, it will spark creative design ideas.
— David Dick, Senior Member of STC, User and UX Special Interest Group
Excellent! A very complete and exhaustive overview of patterns for web applications with
many previously undocumented patterns. This book is written in a very accessible way and
will tell you (nearly) everything you need to know when designing web applications. A must-
have for any designer!

— Martijn van Welie, Pattern Author, Philips Design
This page intentionally left blank
Web Application
Design Patterns
Pawan Vora


AMSTERDAM • BOSTON • HEIDELBERG • LONDON
NEW YORK • OXFORD • PARIS • SAN DIEGO
SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO
Morgan Kaufmann Publishers is an imprint of Elsevier
Morgan Kaufmann Publishers is an imprint of Elsevier.
30 Corporate Drive, Suite 400, Burlington, MA 01803
This book is printed on acid-free paper.
Copyright
©
2009 by Elsevier Inc. All rights reserved.
Designations used by companies to distinguish their products are often claimed as
trademarks or registered trademarks. In all instances in which Morgan Kaufmann
Publishers is aware of a claim, the product names appear in initial capital or all
capital letters. Readers, however, should contact the appropriate companies for more
complete information regarding trademarks and registration.
No part of this publication may be reproduced, stored in a retrieval system, or
transmitted in any form or by any means — electronic, mechanical, photocopying,
scanning, or otherwise — without prior written permission of the publisher.
Permissions may be sought directly from Elsevier’s Science & Technology Rights
Department in Oxford, UK: phone: ( ϩ 44) 1865 843830, fax: ( ϩ 44) 1865 853333,
e-mail: You may also complete your request on-line via
the Elsevier homepage ( ), by selecting “ Support & Contact ” then
“ Copyright and Permission ” and then “ Obtaining Permissions. ”

Library of Congress Cataloging-in-Publication Data
Application submitted.
ISBN: 978-0-12-374265-0
For information on all Morgan Kaufmann publications,
visit our Web site at www.mkp.com or www.books.elsevier.com .
Printed in Canada
09 10 11 12 13 10 9 8 7 6 5 4 3 2 1

To my little princess, Sumi
Dedication
This page intentionally left blank
Contents
vii
ACKNOWLEDGMENTS xi
ABOUT THE AUTHOR
xiii
CHAPTER 1: Introduction 1
Introduction 1
Benefi ts of Web Applications 1
Challenges to Designing Interfaces for Web Applications 5
Design Patterns 9
Documenting Patterns 10
Organization of the Patterns in This Book 11
Using Patterns in This Book 14
Companion Web Site 14
CHAPTER 2: Forms 15
Introduction 15
Clear Benefi ts 16
Short Forms 18
Logical Grouping 22

Label Alignment 24
Required Field Indicators 27
Smart Defaults 30
Forgiving Format 32
Keyboard Navigation 34
Input Hints/Prompts 37
Action Buttons 40
Error Messages 45
CHAPTER 3: User Authentication 49
Introduction 49
Registration 49
CAPTCHA 58
Log In 61
Log Out 69
Contents
viii
Automatic Logout 71
Forgot Username/Password 74
CHAPTER 4: Application Main Page 79
Introduction 79
Inbox
80
Control Panel 81
Dashboard 84
Portal 90
Personalization 94
Customization 98
Blank Slate 106
CHAPTER 5: Navigation 111
Introduction 111

Primary Navigation 112
Secondary Navigation 117
Utility Navigation 120
Faceted Navigation 122
Supplementary Navigation 126
Tag Clouds 128
Breadcrumbs 133
Wizards 136
CHAPTER 6: Searching and Filtering 143
Introduction 143
Simple Search 144
Parametric Search 149
Advanced Search 151
Search Tips 155
Search Results 157
Sorting 164
Pagination 165
Continuous Scrolling 170
Filtering 172
Faceted Search 174
Saved Searches 176
CHAPTER 7: Lists 181
Introduction 181
Simple List 182
Tabular List 185
Contents
ix
Hierarchical List 191
Event List 195
Timelines 198

Image Lists/Grids 202
Maps 206
List Actions 212
List Utility Functions 220
CHAPTER 8: Rich Internet Applications
225
Introduction 225
Rich-Text Editor 226
Rich Form 229
Autosuggest/Autocompletion 231
Edit-in-Place 234
Overview-Plus-Detail 236
Dynamic Querying 238
Live Preview 239
Drag-and-Drop 241
Slider 245
Animations/Transitions 247
Delay/Progress Indicators 251
Spotlight/Yellow-Fade 253
Carousel 255
Usability Issues Inherent with RIAs 256
CHAPTER 9: Social Applications 259
Introdcution 259
Add/Upload Content 260
Tagging 263
Ratings 267
Reviews 272
Vote to Promote 274
User Profi le 277
Reputation 283

Discover Network Members 287
Friend List 291
Groups and Special-Interest Communities 293
Messaging 297
Presence Indicator 299
Sharing 301
Collaboration 305
Contents
x
CHAPTER 10: Internationalization 311
Introduction 311
Extensible Design 312
Date Format 321
Time Format 324
Number Format 326
Currency and Currency Format 329
Global Gateway 332
Language Selector 334
CHAPTER 11: Accessibility
339
Introduction 339
Progressive Enhancement 341
Semantic Markup 342
Unobtrusive Style Sheets 345
Unobtrusive JavaScript 347
Accessible Forms 349
Accessible Images 352
Accessible Tables 356
Accessible Navigation 359
Accessible Alternative 361

Accessibility and Rich Internet Applications 363
CHAPTER 12: Visual Design
365
Introduction 365
Liquid-Width Layout 366
Fixed-Width Layout 368
Progressive Layout 371
Grid Structure 373
Visual Hierarchy 376
Highlight 380
Icons 383
CHAPTER 13: Pattern Libraries
389
Introduction 389
Pattern Library 389
REFERENCES 405
INDEX 417
My sincere and heartfelt thanks to:

■
The technical reviewers — Wendy Castleman, David Dick, Kaaren Hanson,
Arnie Lund, and Dave Rogers — for taking the time and offering advice
and constructive feedback. Their insightful suggestions have improved
this book several-fold. Any errors or shortcomings, however, are my own
and likely caused by not heeding their advice.

■
Len Beasley, for assisting with research and helping with endless rounds
of editing drafts of the book’s chapters.

■
The team at Elsevier: Mary James, my editor, for being patient as I experi-
enced the fi rst-time author struggles and for helping me stay focused and
on (revised) schedule; Denise Penrose and Diane Cerra, for giving me the
opportunity to write a book on a topic I am so passionate about; and
the production team, including copyeditor Jodie Allen and proofreader
Deborah Prato, for their talents in clarifying content and designing and
laying out the book.

■
Clients, colleagues, and friends, who continue to teach, guide, listen, and
encourage.

■
Sona, my dear wife, for her support and putting up with me during my
extended work during the writing and review schedule and for not letting
me give up when the going got tough.

■
And, Sumi, my little princess, for understanding that daddy needed time
by himself to fi nish the book and for offering to write it so that he had
time to play with her.
Pawan Vora
Acknowledgments
xi
This page intentionally left blank
xiii
Pawan Vora is the founder and president of Alpha Cube, Inc., a user experience
design consultancy focused on designing, reviewing, and evaluating user inter-
faces for software and web-based applications.

He has been a user experience professional for more than 14 years and has
designed user interfaces for a range of applications for business-to-consumer,
business-to-business, consumer-to-consumer, and business-to-employee envi-
ronments. He has published and conducted a number of tutorials and in-house
training workshops on web site design, web application design, and design pat-
terns in the United States and internationally.
Pawan has a Ph.D. and M.S. in industrial engineering from the State University
of New York at Buffalo in addition to his bachelor’s degrees in production engi-
neering and mechanical engineering from Victoria Jubilee Technical Institute in
Mumbai, India.
About the Author
This page intentionally left blank
1
INTRODUCTION
Increasingly, software applications are built using web technologies and
made accessible via web browsers (e.g., Internet Explorer, Firefox, Safari, and
Opera). They are commonly referred to as web applications , or hosted applica-
tions — applications based on a software as a service (SaaS) model
1
or cloud
computing.
2
These web applications are different from more traditional web
sites in that their emphasis is on allowing users to accomplish tasks such as
send email, make travel reservations, fi nd homes, pay bills, transfer money, buy
products, send invitations, and so forth ( Figures 1.1 through 1.4 ). Web sites,
on the other hand, are content oriented and are designed to facilitate browsing
and consumption of rather static information ( Figure 1.5 ).
BENEFITS OF WEB APPLICATIONS
The trend in favor of web applications is understandable in view of the benefi ts

these applications offer, as described in the following sections (Baxley, 2003;
Turnbull, 2006).
Ease of access
Typically, the only software users need to access and use web applications is a
browser such as Internet Explorer, Firefox, Safari, and Opera. Users do not need
to download and install separate software to use different web applications,
although there are instances when they have to download helper applications
Introduction
CHAPTER 1
CHAPTER 1

1
SaaS is a software application delivery model where a software vendor develops a Web-native
software application and hosts and operates it (either independently or through a third party)
for use by customers over the Internet. Customers do not pay for owning the software; they sub-
scribe to it and pay a regular subscription fee for using it.

2
Web applications are considered to be a form of “ cloud computing ” because applications and
fi les are hosted in the Internet “ cloud, ” which consists of thousands of computers and servers,
all linked together and made accessible via the Internet.
CHAPTER 1 Introduction
2

FIGURE 1.1
Users can manage their email via the Web, as in this example from Yahoo! Mail, which is similar to its
desktop counterparts such as Microsoft Outlook, Mozilla Thunderbird, and Eudora.
or plug-in modules, such as Adobe Flash, Java, Microsoft Silverlight, and so
forth, to access all or part of a web application.
Moreover, because both the application and information are stored on serv-

ers of the application’s providers and not on users ’ computers, users can access
web applications from almost anywhere, as long as the computer they use has
a web browser and Internet connectivity. This remote data storage also facili-
tates sharing and collaboration among users; for example, users can share
bookmarks with applications such as Delicious ( www.delicious.com ) and Furl

FIGURE 1.2
Users can search for travel options and make reservations using web applications
like Expedia.
3
Benefi ts of Web Applications

FIGURE 1.3
Users can fi nd homes for sale, assess the value of a home, and see recent sales of homes in a
neighborhood on sites such as Zillow.com.

FIGURE 1.4
Users can buy products on sites like Buy.com.
CHAPTER 1 Introduction
4
( www.furl.net ), and remotely collaborate on the same documents using produc-
tivity applications such as Google Docs and Spreadsheets ( docs.google.com ) and
Zoho ( www.zoho.com ).
Ease of deployment
Web applications are also popular with businesses and software developers
because they can be developed, updated, and maintained remotely without
requiring users to install (or reinstall) them. A related advantage of web appli-
cations is that they can perform as specifi ed regardless of the operating system
on users ’ computers. They can be built once and deployed to almost any user,
rather than creating separate versions of applications for Microsoft Windows,

Macintosh OS X, GNU/Linux, and other operating systems.
“ Trained ” user base
The Web’s growth and widespread adoption (from 16 million users in
December 1995 to almost 1.5 billion users in June 2008, according to Internet
World Stats; www.internetworldstats.com ) has made the Web style of interaction
familiar to a large number of users. Most Internet users can now be expected to
be familiar with web browser terminology such as home, back, forward, book-
marks, hypertext links, submit buttons, and so forth. With this knowledge, and
the fact that using web applications does not require elaborate installations,
barriers to their use (or at least to try them out) are much lower. Further, it
helps that many popular web applications are now available for free or have a
free trial period.

FIGURE 1.5
Ultragrain allows users to access static information about the company and its
products on its web site (www.ultragram.com) .
5
Maturity and reliability of network connectivity
and web technologies
An important roadblock for earlier web applications was unreliable network con-
nectivity and signifi cantly inconsistent web standards support — that is, HTML,
CSS, and JavaScript — in web browsers. This is no longer the case. Adherence to
web standards is improving, and browser inconsistencies that used to cause frus-
tration for web developers are decreasing. In addition, network connectivity and
broadband access is becoming more reliable, more ubiquitous, and cheaper to
use. According to Website Optimization the use of broadband Internet access
grew to 57 percent in US homes in March 2008 and was 90 percent among
active Internet users ( www.websiteoptimization.com/bw/0807/ ). This stable platform
has also spawned the availability of visual development tools and frameworks to
facilitate web application development.

CHALLENGES TO DESIGNING INTERFACES
FOR WEB APPLICATIONS
Despite these benefi ts and increasing use, designing interfaces for web applica-
tions remains diffi cult. Challenges in creating usable interactions are mainly
related to the underlying “ loosely coupled ” web architecture, a limited set of
interactive controls natively supported in web browsers, and the lack of design
guidance as to how user interactions should be implemented.
“ Loosely coupled ” web architecture
An important challenge faced by web application designers is caused by the
“ loosely coupled ” or “ stateless ” nature of the Web. The Web’s interaction par-
adigm is very simple: Users request web pages with web browsers, and serv-
ers respond by sending the requested pages to the browsers or informing users
if there are problems retrieving those pages. However, once a user’s request is
satisfi ed by the web server, by sending the web page to the browser, the con-
nection between the web server and the web browser is severed. When a user
makes a subsequent request, the connection is established again with the server
until the new web page is “ reloaded ” in the user’s browser.
Each page reload, or page refresh, is marked by perceptible delays caused by
the need to establish the connection, the server to respond to the request, the
network to receive the page, and the browser to reload the page. This creates a
jumpy and discontinuous experience for web application users. For example, a
user browsing a hierarchical tree structure of items may have to wait after every
click to expand, or collapse, a data node for the page to reload and see the
expanded, or collapsed, view. Although this problem is addressed to a great
extent by the use of scripting technologies such as JavaScript and Rich Internet
Applications (see Chapter 8), it’s an important user experience issue faced by
most web applications.
Challenges to Designing Interfaces for Web Applications
CHAPTER 1 Introduction
6

Limited set of controls, or widgets, to support
application design
In the current version of HTML (version 4.01), native support for controls is
limited to text boxes, radio buttons, checkboxes, dropdown lists, and com-
mand or action buttons. It does not offer support for sophisticated interactions
common in desktop applications such as spin controls, calendars, wizards,
tabs, toolbars, drag-and-drop, fl oating palettes, dialog boxes, context-sensitive
menus, and so forth, which are available in even basic desktop applications.
Although such controls can be developed using JavaScript and Cascading Style
Sheets (CSS), a lack of inherent support for them has led to a variety of imple-
mentations with inconsistent presentations and interactions.
Inconsistent interaction approaches
Both the underlying technological architecture of the Web and the limited
set of controls available make it diffi cult to create interactions for web appli-
cations comparable to desktop applications. Additionally, because most web
applications are designed to be browser-agnostic, interactions and appearance
cannot be simulated to match all operating systems; for example, tabs in the
Macintosh OS X Aqua interface are visually quite different than the tabs in the
Windows Vista interface ( Figure 1.6 ).
Although the Web’s relatively unrestricted development environment offers
considerable creativity and fl exibility to designers, the resulting diversity and
inconsistency in user interfaces and interaction approaches in web applications
is often challenging for users. This is due to the fact that users are faced with
a variety of styles of interfaces and interactions, each with its own vocabulary
of objects, actions, and visuals mixed together in the same application (see
Tidwell, 2006). Figure 1.7 shows an example of changing the tab name in Zoho
Notes (a note-taking web application like Microsoft OneNote) and Zoho Sheet
(a worksheet web application like Microsoft Excel). To change the tab name in
Zoho Notes, users must double-click the tab name and a Rename dialog pops
up. In order to change the tab name in Zoho Sheet, users must right-click the

NOTE
The next version of HTML (version 5) will support additional form elements that are
currently part of the World Wide Web Consortium’s (W3C) Web Forms 2.0 ( www.w3.org/
TR/web-forms-2/ ). This new version offers additional form controls (e.g., the < datalist >
element to create combo-boxes and the < output > element to show values derived
from other form controls) as well as an extension to existing form controls (e.g., < input
type="date" / > , < input type="email" / >
, etc.), which makes web application development
a little easier. Opera (version 9 and above) currently supports Web Forms 2.0 enhance-
ments and offers a good platform to develop interactive prototypes.
7
Challenges to Designing Interfaces for Web Applications

FIGURE 1.6
Tab controls in the Macintosh OS X Aqua interface (a) and Windows Vista interface (b).
(a)
(b)

FIGURE 1.7
Two different interaction approaches for changing the tab name in Zoho Notes (a)
and Zoho Sheet (b).
(a)
(b)
CHAPTER 1 Introduction
8
tab and select the “ Rename ” option, which displays a pop-up window to allow
users to change the tab name; double-clicking just selects the text.
To address these design challenges and accompanying usability problems,
many corporations develop user interface design guidelines and style guides to
manage the web application’s “ look and feel. ”

Applying design guidelines to develop usable web applications is not easy,
however. Design guidelines are limited in their effectiveness, as they often
advocate high-level principles (e.g., make system status visible; recognition
is better than recall; prevent errors) or offer very specifi c guidance (e.g., align
table headings to match the alignment of column data). On the other hand,
design style guides focus on branding and visual design aspects and are usu-
ally specifi c to a platform (e.g., Macintosh OS X Aqua and Windows Vista) or
to applications developed by a specifi c corporation (e.g., “ Oracle Browser Look
and Feel [BLAF] Guidelines, ” 2004), and do not necessarily provide detailed
guidance for developing usable interactions.
Design guidelines and style guides are also quite lengthy and diffi cult to fol-
low, because implementing one interaction requires user interface designers
to be familiar with several sections within the document. For example, Apple’s
“ Human Interface Guidelines ” document is about 400 pages long, and to
create a dialog with form controls, a designer would have to be familiar with
several sections within “ Part III: The Aqua Interface ” ( Figure 1.8 ), which has
about 250 pages allocated to it.
Finally, design guidelines and style guides can also become too esoteric to be
useful to those not familiar with human – computer interaction. This can limit
their effectiveness as a means of communication among web application
development team members, including customers, subject matter experts, cli-
ents, requirement analysts, software developers, product managers, and mar-
keters, who are unlikely to be well-versed in human – computer interaction and
usability.

FIGURE 1.8
“ Part III: The Aqua Interface ” section of Apple’s “ Human Interface Guidelines ”
comprises about 250 out of the document’s 400 pages.
9
Using design patterns addresses many of these concerns and can complement

design guidelines and style guides to create better, and consistent, interface
designs and improve usability of web applications.
DESIGN PATTERNS
The notion of patterns was introduced in the fi eld of architecture by
Christopher Alexander and his colleagues in A Pattern Language (Alexander et
al., 1977) and The Timeless Way of Building (Alexander, 1979). They explained
the nature of patterns as follows:
Each pattern describes a problem that occurs over and over again in our
environment, and then describes the core of the solution to that problem,
in such a way that you can use this solution a million times over, without
ever doing it the same way twice. (Alexander et al., 1977, p. x)
Thus, patterns explicitly focus on the problem within the context of use and
guide designers on when, how, and why the solution can be applied. Patterns
are practical and describe instances of “ good ” design while embodying high-
level principles and strategies.
Patterns have recently become attractive to user interface and software designers
3

as well for their following benefi ts:
Proven design solutions and guidance for their use . Patterns identify real
solutions and not abstract principles or guidelines. In addition, by mak-
ing the context and problem explicit and summarizing the rationale for
their effectiveness, patterns explain both how a problem can be solved and
why the solution is appropriate for a particular context. However, because
it’s a generic “ core ” solution, its use can vary from one implementation to
another without making it look “ cookie-cutter ” or discouraging creativity.
Improved design process. Identifying design patterns and cataloging them
can help user interface designers increase productivity by reducing time
spent “ reinventing the wheel. ” Furthermore, if user interface components
are built for patterns in the form of a design pattern library (see Chapter

13), designs can be developed, tested, and iterated rapidly, and can help
shorten release cycles.
Reusability and consistent interfaces. Developing a library of reusable user
interface components can also facilitate development of consistent inter-
faces both within and across applications. This is particularly useful in
Design Patterns

3
Inspired by Alexander’s work in the fi eld of architecture, the concept of patterns was applied
and became popular in the fi eld of software after the publication of Design Patterns: Elements
of Reusable Object-Oriented Software (1994) by Erich Gamma, Richard Helm, Ralph Johnson,
and John Vlissides (commonly referred to as the Gang of Four or simply GoF). Subsequently,
patterns also became popular in the fi eld of human – computer interaction from the works of
Tidwell ( www.designinginterfaces.com ), Welie ( www.welie.com ), Borchers (2001), Graham (2003),
and Van Duyne et al. (2002, 2006).
CHAPTER 1 Introduction
10
large corporations with multiple and distributed design teams, where dif-
ferent solutions may be applied for the same problems by different design
groups, leading to inconsistent interfaces among designs produced within
the same company. By cataloging and communicating design patterns,
teams can increase consistency, predictability, and usability of their designs
(Leacock et al., 2005) and can serve as a corporate memory of design
expertise (Borchers, 2001).
A common, shared language. Patterns help support and improve communica-
tion among team members from diverse disciplines b
y developing a com-
mon language or vocabulary when explaining and discussing the design
solutions (Borchers, 2001; Erickson, 2000). This is very important because
user interface designers often work in an interdisciplinary team with devel-

opers, application domain experts, and users or user representatives, and
these groups typically lack a common terminology to exchange design
ideas and opinions.
Effective teaching aid and reference tool. Patterns also can be an effective
way for experienced designers to offer design guidance to those without a
formal background in design (Chen, 2003). Because of the approach used
in documenting patterns, by providing visual and textual description, it
is easier for novice interface designers to see examples of their successful
usage.
Usable web applications. Finally, because patterns are based on a history of
successful usage, their use can make the web application usable because
interactions afforded by patterns would be familiar to users.
DOCUMENTING PATTERNS
It’s important that patterns are documented to convey what they are, why
they work, and how they should be applied to solve a design problem to reap
the aforementioned benefi ts. Interestingly, however, there is no “ pattern ” for
documenting patterns (see Chapter 13). Pattern authors have used a range of
approaches, from those following a more descriptive Alexandrian notation
(Borchers, 2001; Graham, 2003; van Duyne et al., 2002, 2006) to those follow-
ing a more structured, albeit casual and minimalist, approach (Laasko, 2003;
Tidwell, 2006; www.welie.com ).
4

In this book, patterns are presented using a rather minimalist approach.
Specifi cally, each pattern includes:

■
Pattern name . A short title describing the design solution. Following the
convention used in other pattern collections, pattern names are written
in CAPITAL LETTERS to make them stand out from the rest of the text.

4
To bring order to the varied and inconsistent forms pattern authors have used and to fi nd a way
to combine patterns and pattern languages from different authors into specifi c, thematic pattern
collections, participants at the CHI 2003 (April 6–7) Workshop Perspectives on HCI Patterns:
Concepts and Tools proposed an XML-based markup language called Pattern Language Markup
Language (PLML; pronounced “ Pell-Mell ” ). For more information, see Fincher (2003).