Web application design handbook: best practices for web-based software

689 Pages·2004·51.03 MB·English

by  Susan Fowler

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
ofbest-practice examples,insights from years ofexperience,and assorted
fascinating arcana.Ifyou’re writing a Web application,you’d be foolish not to
have a copy.”
STEVE KRUG Author ofDon’t Make Me Think! A Common Sense Approach to Web
Usability
“Web sites are sonineties.The cutting edge ofWeb-design has moved to Web
applications.Ifyou 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 Bloopersand 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 oflarge sets ofdata.
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 ofthose books.”
SCOTT AMBLER Author ofThe 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 Usability Engineering: Scenario-Based Development of
Web-Based Software Human-Computer Interaction
Susan Fowler and Victor Stanwick Mary Beth Rosson and John M.Carroll
The Mobile Connection: The Cell Phone’s Impact on Society Your Wish is My Command: Programming by Example
Rich Ling Edited by Henry Lieberman
Information Visualization: Perception for Design,2ndEdition GUI Bloopers: Don’ts and Dos for Software Developers and
Colin Ware Web Designers
JeffJohnson
Interaction Design for Complex Problem Solving:
Developing Useful and Usable Software Information Visualization: Perception for Design
Barbara Mirel Colin Ware
The Craft ofInformation Visualization: Readings and Robots for Kids: Exploring New Technologies for Learning
Reflections Edited by Allison Druin and James Hendler
Written and edited by Ben Bederson and Ben Shneiderman
Information Appliances and Beyond: Interaction Design for
HCI Models,Theories,and Frameworks: Towards a Consumer Products
Multidisciplinary Science Edited by Eric Bergman
Edited by John M.Carroll
Readings in Information Visualization: Using Vision to Think
Web Bloopers: 60 Common Web Design Mistakes,and Written and edited by Stuart K.Card,Jock D.Mackinlay,
Howto Avoid Them and Ben Shneiderman
JeffJohnson
The Design ofChildren's Technology
Observing the User Experience: A Practitioner’s Guide to Edited by Allison Druin
User Research
Mike Kuniavsky Web Site Usability: A Designer’s Guide
Jared M.Spool,Tara Scanlon,Will Schroeder,Carolyn
Paper Prototyping: The Fast and Easy Way to Design and Snyder,and Terri DeAngelo
Refine User Interfaces
Carolyn Snyder The Usability Engineering Lifecycle: A Practitioner's
Handbook for User Interface Design
Persuasive Technology: Using Computers to Change What Deborah J.Mayhew
We Think and Do
B.J.Fogg Contextual Design: Defining Customer-Centered Systems
Hugh Beyer and Karen Holtzblatt
Coordinating User Interfaces for Consistency
Edited by Jakob Nielsen Human-Computer Interface Design: Success Stories,
Emerging Methods,and Real World Context
Usability for the Web: Designing Web Sites that Work Edited by Marianne Rudisill,Clayton Lewis,Peter P.
Tom Brinck,Darren Gergle,and Scott D.Wood Polson,and Timothy D.McKay
W E B A P P L I C AT I O N
D E S I G N H A N D B O O K
Best Practices for Web-Based Software
Susan Fowler and Victor Stanwick
FAST CONSULTING
AMSTERDAM • BOSTON • HEIDELBERG • LONDON
NEW YORK • OXFORD • PARIS • SAN DIEGO
SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO
Morgan Kaufmann is an imprint ofElsevier
Publishing Director:Diane Cerra
Publishing Services Manager:Simon Crump
Editorial Coordinator:Mona Buehler
Cover Design:Hannus Design Assoc.
Cover Illustration:Spher spirals;M.C.Escher,1958,woodcut
Text Design:Frances Baca Design
Composition:Cepha Imaging Pvt.Ltd
Technical Illustration:Dartmouth Publishing,Inc.
Copyeditor:Simon & Associates
Proofreader:Jacqui Brownstein
Indexer:Steve Rath
Interior printer:CTPS
Cover printer:CTPS
Morgan Kaufmann Publishers is an imprint ofElsevier.
500 Sansome Street,Suite 400,San Francisco,CA 94111
This book is printed on acid-free paper.
© 2004 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 ofa 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 ofthis 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 ofthe publisher.
Permissions may be sought directly from Elsevier’s Science & Technology Rights Department in Oxford,UK:phone:(+44) 1865
843830,fax:[phone],e-mail:[email protected] may also complete your request on-line via the Elsevier
homepage (http://elsevier.com) by selecting “Customer Support”and then “Obtaining Permissions.”
Library ofCongress Cataloging-in-Publication Data
Application submitted
ISBN:1-55860-752-8
For information on all Morgan Kaufmann publications,
visit our Web site at www.mkp.com.
Printed in China
04 05 06 07 08 5 4 3 2 1
CONTENTS
Preface xxiii
Answering Questions xxiii
Trust What You Already Know xxiv
Predicting the Future xxiv
A Short History ofVisualization xxv
Visuals Provide More Context xxvi
Visuals Encourage Pattern Recognition xxvii
Visuals Speed Up Decisions xxviii
Acknowledgments xxix
CHAPTER 1
What is a Web Application?
1
What’s the Difference Between a Web Page and a Web Application? 1
What Difference Does the Platform Make? 4
Technical Note:Pros and Cons ofWeb Application Coding Systems 9
The Tentative Answer 12
Where Does My Program Fit? 13
What Is the Nature ofthe Relationship? 13
What Is the Conversation Like? 17
What Is the Nature ofthe Interaction? 17
What Are the Technical Requirements? 17
How Often Is It Used? 18
What Is the Expected Response Time (or the Perceived Distance)? 18
Are These Interactions in Real Time? 19
How Much Help Will the Users Need? 19
What Is the Interaction Style? 19
What Should It Look Like? 20
Does It Follow Any Standards? 21
vii
viii Contents
How Intense Is This Interaction? 22
What Should This Application Look Like? 22
CHAPTER 2
The Browser Framework
25
Browser Window:A Conceptual Model 25
Parts ofa Browser Window 26
Technical Note:Preventing Downloads 27
Parts ofthe Content Area 27
A Note About Navigation 29
Make Home Easy to Find 29
Put Local Navigation on the Left 30
Put Site-Wide Navigation on the Top 32
Repeat Links on the Bottom 33
Try Putting Advertising Banners in More Than One Spot 34
Overall Design Issues 34
Consider User Roles 34
Size Windows Correctly 35
Make Pages Printable 39
Technical Note:IfYou Must Use Tables 39
Use the Right Colors 40
Make Sure the Application Can Be Localized 41
Make Sure Pages Are Accessible 46
Technical Note:How to Create Bread Crumbs 50
Use Standard Separators 50
Code Sample 51
Technical Note:How to Create the Window-Size Markers 54
Technical Note:Use CSS to Format Pages Correctly 54
CHAPTER 3
Data Input: Forms
59
Conceptual Model:Lists vs.Objects 59
Data-Input Forms:The Basics 60
Use Fields to Collect Free-Form Information 62
Know the Various Field Types 62
Standard Field,Defined 62
General Design Guidelines 62
Make Entry Areas the Right Size 63
Contents ix
Don’t Make Users Format Text 64
Provide Keyboard as Well as Mouse Navigation 65
Retain Cut,Copy,and Paste 65
Label Fields Correctly 66
How to Label Data-Input Forms 66
How to Label e-Commerce Forms 66
Accommodate Less Experienced Users 68
Use Different Labeling Strategies for International Forms 69
Make Sure Labels Are Correctly Tied to Their Fields 69
How to Group Fields 70
Complexity is Not Necessarily Bad 71
Offer Automated Entry Fields 72
How to Show Protected Fields 73
Required Field,Defined 76
Use Required Fields Sparingly 76
How to Indicate a Required Field 77
Offer Defaults Whenever Possible 78
How Notto Indicate a Required Field 80
How to Provide Feedback for Required Fields 80
Prevent Input Errors With Dropdown Lists 83
When to Use Dropdown Lists 83
Check Your Lists for Typos and Other Errors 84
Put Lists in Order 85
When to Use Regular Lists Rather Than Dropdown Lists 85
Prevent Input Errors With Checkboxes 86
Checkbox Groups: Doing the Numbers 90
Be Careful How You Toggle 90
Use Opposites Only 90
Don’t Use Negatives (You’ll Create a Double Negative by Mistake) 91
Prevent Input Errors With Radio Buttons 91
“I Want Nothing!” 92
Make Your Checkboxes and Radio Buttons More Accessible 92
When to Use Tabs Instead ofPages 94
Guidelines for Tabs 95
When to Use Popups 96
Use Popups to Offer Information 97
Follow These Popup Guidelines 98
Stay on Top 99
Three Traditional Popup Buttons 100
Use Standard Button order 100