WEB application design handbook

Critical Acclaim For
WEB APPLICATION DESIGN HANDBOOK
Best Practices for Web-Based Software

“Susan and Victor have written the ‘Junior Woodchucks Guidebook’ of
Web applications: Everything you need to know is in there, including tons
of best-practice examples, insights from years of experience, and assorted
fascinating arcana. If you’re writing a Web application, you’d be foolish not to
have a copy.”
STEVE KRUG Author of Don’t Make Me Think! A Common Sense Approach to Web
Usability

“Web sites are so nineties. The cutting edge of Web-design has moved to Web
applications. If you are, like many Web designers, struggling to create dynamic,
highly-functional Web-based applications, you need this book. It describes how
Web applications differ from Web sites, and provides excellent guidance for
common Web-application design problems, such as navigation, data input,
search, reports, forms, and interactive graphic output.”
JEFF JOHNSON Principal Usability Consultant, UI Wizards, Inc., and author of
Web Bloopers and GUI Bloopers

“User interface designers have been debating among themselves for years
about how to design effective Web applications. There were no comprehensive
references that covered the myriad topics that emerged in these debates until
Fowler and Stanwick took on the challenge and wrote Web Application Design
Handbook, the first comprehensive guide to building Web applications.
This book tackles design problems faced by every Web development team
with uncommon wisdom, clear prose, and detailed examples. Key topics
include: modifying the browser interface to meet application security and
efficiency requirements, searching, sorting, filtering, building efficient and

usable data input mechanisms, generating reports, preventing errors, and using
creative visualization techniques to optimize the display of large sets of data.


Endorsements Continued

This thorough work should be a primary reference for everyone designing
Web applications.”
CHAUNCEY E. WILSON Principal HCI Architect, WilDesign Consulting

“Every so often you run into a book and say to yourself: ‘It’s so obvious that
this book should be read by every developer, so why wasn’t it written years ago?’
This is one of those books.”
SCOTT AMBLER Author of The Object Primer: Agile Model Driven Development
with UML 2


WEB APPLICATION
DESIGN HANDBOOK
Best Practices for Web-Based Software


The Morgan Kaufmann Series in Interactive Technologies
Series Editors: Stuart Card, PARC; Jonathan Grudin, Microsoft; Jakob Nielsen, Nielsen Norman Group
Web Application Design Handbook: Best Practices for
Web-Based Software
Susan Fowler and Victor Stanwick

Usability Engineering: Scenario-Based Development of
Human-Computer Interaction

Mary Beth Rosson and John M. Carroll

The Mobile Connection: The Cell Phone’s Impact on Society
Rich Ling

Your Wish is My Command: Programming by Example
Edited by Henry Lieberman

Information Visualization: Perception for Design, 2nd Edition
Colin Ware

GUI Bloopers: Don’ts and Dos for Software Developers and
Web Designers
Jeff Johnson

Interaction Design for Complex Problem Solving:
Developing Useful and Usable Software
Barbara Mirel
The Craft of Information Visualization: Readings and
Reflections
Written and edited by Ben Bederson and Ben Shneiderman
HCI Models, Theories, and Frameworks: Towards a
Multidisciplinary Science
Edited by John M. Carroll
Web Bloopers: 60 Common Web Design Mistakes, and
How to Avoid Them
Jeff Johnson
Observing the User Experience: A Practitioner’s Guide to
User Research
Mike Kuniavsky

Paper Prototyping: The Fast and Easy Way to Design and
Refine User Interfaces
Carolyn Snyder
Persuasive Technology: Using Computers to Change What
We Think and Do
B. J. Fogg
Coordinating User Interfaces for Consistency
Edited by Jakob Nielsen
Usability for the Web: Designing Web Sites that Work
Tom Brinck, Darren Gergle, and Scott D.Wood

Information Visualization: Perception for Design
Colin Ware
Robots for Kids: Exploring New Technologies for Learning
Edited by Allison Druin and James Hendleer 2003).

Date, Time, Address, and Number Standards and Internationalization
Bainbridge, Alex. July 2002. “Hotel date entry, design and usability.” Travel UCD. http://www.
travelucd.com/research/date_entry_hotel_july2002.php (accessed 30 October 2003).
Caldwell, Lori. 3rd Quarter 2000. “User preferences for date controls.” Usable Bits.
(accessed 28 October 2003).
Eastlake, D., T. Goldstein. “ECML v1.1: Field specifications for e-commerce.” The Internet
Engineering Task Force (IETF). (accessed 23 October 2003).
ISO. November 25, 2002. “ISO 4217:2001, Codes for the representation of currencies and funds.”
ISO Currency Codes. />(accessed 30 October 2003).
OASIS. “XML standards for ‘global’ customer information management.” http://www.
oasis-open.org/committees/ciq/ciq.shtml (accessed 30 October 2003).
Sato, Takayuki K. (ed.). “Data book of cultural convention in Asian countries.” Center of the
International Cooperation for Computerization (CICC). />hyoujyunka/databook/contents.htm (accessed 30 October 30, 2003).
Universal Postal Union. “Postal addressing systems in member countries.” />post_code/en/addressing_formats_guide.shtml (accessed 30 October 2003).

Xencraft. 2003. “Currency internationalization (i18n), multiple currencies and foreign exchange
(FX).” (accessed 30 October, 2003).

Dropdown Type-Ahead
Kruse, Matt. Undated. AutoComplete. />(accessed 29 October 2003).
Zakas, Nicholas C. “Make life easy with autocomplete textboxes.” Sitepoint. epoint.
com/article/1220 (accessed 23 October 2003).

Flash for Input Forms
Klee, Matthew. Undated. “Flash + information visualization = great user experiences.”
(accessed 21 January 2003).
Nielsen, Jakob. November 25, 2002. “Flash and web-based applications.” Alertbox.
(accessed 30 October 2003).
Nielsen, Jakob. Undated. “Usability review of the Pet Market demo: Good high-level ideas, some bad
details.” (accessed
23 July 2002).

621


622

Resources

Perfetti, Christine. August 20, 2002. “Flash strikes back: Creating powerful web applications.” (accessed 21 January
2003).
Perfetti, Christine. December 11, 2002. “iHotelier: Demonstrating the potential of Flash for web
app design.” (accessed
21 January 2003).
Pressman, Eric. Undated.“The usability testing process for Pet Market.” />devnet/mx/blueprint/articles/usabilitybp.html (accessed 23 July 2002).

Schroeder, Will, Christine Perfetti, Jared M. Spool. 2002. “Enhancing user interaction in Pet Market.”
User Interface Engineering. (accessed 23 October 2003).

Input Form Design
Jarrett, Caroline. 2000. “Designing usable forms: The three-layer model of the form.” Forms
That Work. (accessed 5 August
2003).
Miller, Sarah, Caroline Jarrett. 2001. “Should I use a dropdown? Four steps for choosing form
elements on the Web.” Forms That Work. />(accessed 5 August 2003).

Syndication and Cross-Site Interactions
Kindlund, Erika. September/October 1997. “Navigating the applet–browser divide.” IEEE Software.
16(5): 22–25. Also available at (accessed
1 November 2003).
OASIS. September 26, 2003. “RDF Rich Site Summary (RSS).” Cover Pages. erpages.
org/rss.html (accessed 1 November 2003).
Shubin, Hal. November 1997.“Navigation in web applications.” Interactions. 4(6):13–17. Also available
at (accessed 1 November 2003).

Data Retrieval
Articles and Web Sites
Chen, Hsin-Liang, Edie M. Rasmussen. Fall 1999. “Intellectual access to images.” Library Trends.
49:2, 291–302.
Cockburn, Andy, Bruce McKenzie. April 20–25, 2002. “Evaluating the effectiveness of spatial
memory in 2D and 3D physical and virtual environments,” CHI 2002. 4(1):203–210.
Danzico, Elizabeth. November 16, 2001. “Search interface standards.” />search_p1.html (accessed 10 September 2003).
FacetMap, faceted (filtered) classification system: />Hastings, Samantha K. Fall 1999. “Evaluation of image retrieval systems: Role of user feedback.”
Library Trends. 49:2, 438–452.
Mescellany, Peter. September 23, 2001. “Innovation in classification.” />archives/00000063.html (accessed 10 September 2003).
Morris, Joan, Pattie Maes. June 3–June 7, 2000. “Sardine: An agent-facilitated airline ticket bidding

system.” Software


Data Output

Demos, Proceedings of the Fourth International Conference on Autonomous Agents (Agents 2000),
Barcelona, Catalonia, Spain (accessed 20 June 2002).
Quesenbery, Whitney. 2001. “Search interfaces for information portals.” netics.
com/papers/whitney/search-ui.pdf (accessed 10 September 2003).
Rappoport, Avi. January 3, 2003. “Search tools for web sites and intranets.” http://www.
searchtools.com/ (accessed 1 February 2004).
Ruthven, I., M. Lalmas, C. J. van Rijsbergen. 1999. “Retrieval through explanation: An abductive
inference approach to relevance feedback.” />(accessed 2 July 2002).
Sarwar, Badrul, George Karypis, Joseph Konstan, John Reidl. April 2001. “Item-based collaborative
filtering recommendation algorithms.” Proceedings of the Tenth International Conference on
World Wide Web, pp. 285–295.
Scott, Stacey D., Neal Lesh, Gunnar W. Klau. April 20–25, 2002. “Investigating human–computer
optimization” CHI 2002, pp. 155–162.
Shearin, Sybil, Henry Lieberman. January 14–17, 2001. “Intelligent profiling by example.”
Proceedings of
the International Conference on Intelligent User Interfaces (IUI 2001), Santa Fe, NM, pp. 145–152
(accessed 20 June 2002).
Westera, Gillian. September 9, 2003. “Comparison of search engine user interface capabilities.” (accessed 10 September
2003).
Youll, Jim, Joan Morris, Raffi Krikorian, Pattie Maes. 2001. “Impulse: Location-based agent
assistance.” />Web Intelligence 2001 (accessed 2 July 2002).

Data Output
Formatting
For more on “green bars” for reports, see Tom Tullis’s article “Usable Bits:

Designing Data Tables for the Web,” Second Quarter, 2001: http://hid.
fidelity.com/q22001/tables.htm.

Paper Sizes
EDS, Inc. 2004. “Guide to international paper sizes, concise tables of measurements.”
(accessed 1 February 2004).
Kuhn, Markus. December 23, 2003. “International standard paper size.” s />~mgk25/iso-paper.html (accessed 1 February 2004).

Printing
For printing in Java, see Printing Help for Java™ Developers at
(accessed 04 October 2002).

623


624

Resources

Software Reporting & Document Management Packages
Actuate Corporation, />Crystal Decisions, />Jinfonet Software, />SwiftView, Inc., .

Output Forms, XML, and Business
An umbrella organization, ebXML, is developing standards for messaging,
collaborative work, business processes, and core components as well. See
“ebXML: Enabling a Global Electronic Market,” />(accessed 11 October 2002).
The OASIS Universal Business Language Technical Committee is developing a standard library of XML business documents (purchase orders, invoices,
and so on). See “OASIS Universal Business Language (UBL) TC,” http://www.
oasis-open.org/committees/ubl/ (accessed 11 October 2002).
RosettaNet offers messaging standards for the information technology (IT),

electronic components (EC) and semiconductor manufacturing (SM) supply
chain, including manufacturers, distributors, resellers, shippers and end users.
See “Standards,” (accessed 10 October
2002).
The Uniform Code Council addresses XML standards in food and beverage,
government, general merchandise, health care, and industrial and commercial
areas. See “Uniform Code Council, Inc.: The Global Language of Business,”
(accessed 10 October 2002).
The XML Common Business Library organization is creating e-commerce
standards for global integration for business services. See “XCBL.org: XML
Common Business Library,” (accessed 11
October 2002).

Typefaces
Accessible Typefaces
Bitstream, Tiresias fonts—typefaces for the visually impaired in Windows and
Macintosh TrueType format: />index.html.

Articles
Haley, Allan. Undated. “Typefaces for the web.” Fontent. />fontent_home.asp?nCo=AFMT&con=web (accessed 15 August 2002).
Kahn, Paul, Krzysztof Lenk. November/December 1998. “Design: principles of typography for user
interface design,” Interactions. 5(6): 15–29.


Graphs And Charts

Online Typography Information
Apple Computer: />Microsoft Typography: />
Type Foundries
Note: These larger and well-known U.S. foundries sell international typefaces,

but if you are using a non-Latin typeface, you may want to look locally as well.
Locally produced typefaces may be more attuned to the local esthetic.
Adobe Type Library: />Agfa|Monotype: />Bitstream, Inc.: />International Typeface Corporation: />P22 Online: />
Graphs and Charts
Data Scraping
123 ASPX Directory of ASP.NET Resources, multiple articles and tutorials: http://www.
123aspx.com/directory.asp.
Advanced Information Extractor, web scraping software: />ASP Alliance, various articles: />Connotate Technologies, automated data extraction, web scraping, and web mining software:
/>Electric Sheep Web, Cool ColdFusion Resources, “The secret art of data scraping”:
/>Rick Leinecker’s e-book, Data scraping information from the web with ASP.NET, available from
Amazon.com.

Software Packages
CORDA Technologies, Inc., />Critical Tools, />Crystal Decisions, />ILOG, Inc., />Intellisys Inc., />Inxight Software, Inc., />netViz Corporation, />Rational Rose, />RFF Electronics, />SmartDraw.com, />SPSS, Inc., />Tensegrity Software, />Tom Sawyer Software, />University of Maryland’s Human-Computer Interaction Lab, />Visual Mining, Inc., />
625


626

Resources

Statistical Analysis
Box, George E. P., et al. 1978. Statistics for experimenters: An introduction to design, data analysis,
and model building. New York: Wiley Interscience.
Campbell, Donald T., Julian C. Stanley. 1966. Experimental and quasi-experimental designs for
research. Boston: Houghton-Mifflin.
Cleveland, William S. Bell Laboratories: />(accessed 6 October 2003).
Hawkes Learning Systems. CD-ROM tutorials for statistics and business statistics: http://www.
quantsystems.com/sta.htm (accessed 6 October 2003).
Huff, Darrell. 1982. How to Lie with Statistics. New York: W.W. Norton & Co.

MiC Online Courses, “Primer in Statistics—Part I,” / />Montgomery, Douglas. 2000. Design and analysis of experiments. 5th ed. New York: John Wiley
& Sons.
Moore, David S. 2000. Statistics concepts and controversies, 5th ed. New York: W H Freeman & Co.
Niles, Robert. “Robert Niles’s Journalism Help: Statistics Every Writer Should Know,”
(accessed 6 October 2003).
Rosenthal, Robert, Ralph L. Rosnow. 1991. Essentials of behavioral research: Methods and data
analysis, 2nd ed. New York: McGraw-Hill.
Rumsey, Deborah. 2003. Statistics for dummies. Columbus, OH: For Dummies.
Wilkinson, Leland, SPSS, Inc., Java graphing applets: />(accessed 6 October 2003).

Diagrams
Software and APIs
ILOG, Inc., />Inxight Software, Inc., />SmartDraw.com, />Tom Sawyer Software, />University of Maryland’s Human–Computer Interaction Lab, treemaps, />hcil/treemap-history/index.shtml.

Cause-and-Effect Diagrams
Xu, Yan. 2001. “Cause-classified control chart and its application.” Management Auditing Journal.
16(4):227–233. Also available at />(accessed 3 October 2003).

Software Design Diagrams
Software Packages
ERwin Data Modeler from Computer Associates. “AllFusion ERwin Data Modeler is a powerful
database development tool, automatically generating tables and thousands of lines of stored
procedure and trigger code for leading databases.” See (accessed 7 May
2003) for more information.


Diagrams

Oracle Designer from Oracle. “Oracle9i JDeveloper lets J2EE developers take advantage of UML
modeling directly from their integrated development environment . . . . Oracle9i Designer

models business processes, data entities and relationships. Models are transformed into designs
from which complete applications and databases are generated.” See />(accessed 7 May 2003) for more information.
Rational Rose Professional Data Modeler from IBM. “In the past, data modelers have used ER notation to describe the database and data access, while developers and business analysts use the
Unified Modeling Language (UML), the standard notation for software architecture, for design
and use case modeling. By integrating the modeling environment with the database design
environment, Rose Professional Data Modeler maps the object and data models, tracking
changes across business, application and data models.” See (accessed
7 May 2003) for more information.

Text and Online Sources
Ambler, Scott W. 2002. The elements of UML™ style. New York: Cambridge University Press.
Also online at o/ (accessed 2 May 2003).
Ambler, Scott W., Larry Constantine. 2000. The Unified Process construction phase: Best practices in
implementing the UP. Gilroy, CA: CMP Books.
Bittner, Kurt, Ian Spence. 2002. Use case modeling. Boston: Addison-Wesley Publishing Co.
Booch, Grady, Ivar Jacobson, James Rumbaugh. 1998. The Unified Modeling Language user guide.
1st ed. Boston: Addison-Wesley Publishing Co.
Cockburn, Alistair. 2000. Writing effective use cases. Boston: Addison-Wesley Publishing Co.
Conallen, Jim. 2002. Building web applications with UML. 2nd ed. Boston: Addison-Wesley
Publishing Co.
Fowler, Martin, Kendall Scott. 1999. UML distilled: A brief guide to the standard object modeling
language. 2nd ed. Boston: Addison-Wesley Publishing Co.
Garrett, Jesse James. March 6, 2002. A visual vocabulary for describing information architecture and
interaction design. (accessed 14 October 2003).
Leffingwell, Dean, Don Widrig, Edward Yourdon. 1999. Managing software requirements:
A unified approach. Boston: Addison-Wesley Publishing Co.
Naiburg, Eric, Robert Maksimchuk. 2001. UML for database design. Boston: Addison-Wesley
Publishing Co.
Object Management Group. January 21, 2004. Unified Modeling Language resource page.,
(accessed 1 February 2004).

Rosenberg, Doug, Kendall Scott. 2001. Applying use case driven object modeling with UML,
An annotated e-commerce example. Boston: Addison-Wesley Publishing Co.
Rumbaugh, James, Ivar Jacobson, Grady Booch. 1998. The Unified Modeling Language reference
manual. Boston: Addison-Wesley Publishing Co.
Yourdon, Edward. May 10, 2001. Just enough structured analysis. />msa2e/ (accessed 24 April 2003).

Symbols and Standards
American National Standards: Operations, administration, maintenance, and provisioning
(OAM &P)—G interface specification for use with the telecommunications management network
(TMN), ANSI T1.232-1996. For the ANSI online catalog, see />ansidocstore/find.asp?. It is possible to search on “flowcharts.”

627