Web Application Design Handbook : Best Practices for Web-Based Software

by Fowler; Stanwick

• ISBN13: 9781558607521
• ISBN10: 1558607528
• Format: Paperback
• Copyright: 2004-06-23
• Publisher: Elsevier Science

Summary

"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. 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 The standards for usability and interaction design for Web sites and software are well known. While not everyone uses those standards, or uses them correctly, there is a large body of knowledge, best practice, and proven results in those fields, and a good education system for teaching professionals "how to." For the newer field of Web application design, however, designers are forced to reuse the old rules on a new platform. This book provides a roadmap that will allow readers to put complete working applications on the Web, display the results of a process that is running elsewhere, and update a database on a remote server using an Internet rather than a network connection. Web Application Design Handbook describes the essential widgets and development tools that will the lead to the right design solutions for your Web application. Written by designers who have made significant contributions to Web-based application design, it delivers a thorough treatment of the subject for many different kinds of applications, and provides quick reference for designers looking for some fast design solutions and opportunities to enhance the Web application experience. This book adds flavor to the standard Web design genre by juxtaposing Web design with programming for the Web and covers design solutions and concepts, such as intelligent generalization, to help software teams successfully switch from one interface to another. * The first interaction design book that focuses exclusively on Web applications. * Full-color figures throughout the book. * Serves as a "cheat sheet" or "fake book" for designers: a handy reference for standards, rules of thumb, and tricks of the trade. * Applicable to new Web-based applications and fo

Table of Contents

Preface	xxiii
Answering Questions	xxiii
Trust What You Already Know	xxiv
Predicting the Future	xxiv
A Short History of Visualization	xxv
Visuals Provide More Context	xxvi
Visuals Encourage Pattern Recognition	xxvii
Visuals Speed Up Decisions	xxviii
Acknowledgments	xxix
What is a Web Application?	1	(24)
What's the Difference Between a Web Page and a Web Application?	1	(8)
What Difference Does the Platform Make?	4	(5)
Technical Note: Pros and Cons of Web Application Coding Systems	9	(4)
The Tentative Answer	12	(1)
Where Does My Program Fit?	13	(12)
What Is the Nature of the Relationship?	13	(4)
What Is the Conversation Like?	17	(1)
What Is the Nature of the Interaction?	17	(1)
What Are the Technical Requirements?	17	(1)
How Often Is It Used?	18	(1)
What Is the Expected Response Time (or the Perceived Distance)?	18	(1)
Are These Interactions in Real Time?	19	(1)
How Much Help Will the Users Need?	19	(1)
What Is the Interaction Style?	19	(1)
What Should It Look Like?	20	(1)
Does It Follow Any Standards?	21	(1)
How Intense Is This Interaction?	22	(1)
What Should This Application Look Like?	22	(3)
The Browser Framework	25	(34)
Browser Window: A Conceptual Model	25	(1)
Parts of a Browser Window	26	(1)
Technical Note: Preventing Downloads	27	(1)
Parts of the Content Area	27	(7)
A Note About Navigation	29	(1)
Make Home Easy to Find	29	(1)
Put Local Navigation on the Left	30	(2)
Put Site-Wide Navigation on the Top	32	(1)
Repeat Links on the Bottom	33	(1)
Try Putting Advertising Banners in More Than One Spot	34	(1)
Overall Design Issues	34	(5)
Consider User Roles	34	(1)
Size Windows Correctly	35	(4)
Make Pages Printable	39	(1)
Technical Note: If You Must Use Tables	39	(11)
Use the Right Colors	40	(1)
Make Sure the Application Can Be Localized	41	(5)
Make Sure Pages Are Accessible	46	(4)
Technical Note: How to Create Bread Crumbs	50	(4)
Use Standard Separators	50	(1)
Code Sample	51	(3)
Technical Note: How to Create the Window-Size Markers	54	(1)
Technical Note: Use CSS to Format Pages Correctly	54	(5)
Data Input: Forms	59	(64)
Conceptual Model: Lists vs. Objects	59	(1)
Data-Input Forms: The Basics	60	(2)
Use Fields to Collect Free-Form Information	62	(1)
Know the Various Field Types	62	(1)
Standard Field, Defined	62	(4)
General Design Guidelines	62	(1)
Make Entry Areas the Right Size	63	(1)
Don't Make Users Format Text	64	(1)
Provide Keyboard as Well as Mouse Navigation	65	(1)
Retain Cut, Copy, and Paste	65	(1)
Label Fields Correctly	66	(4)
How to Label Data-Input Forms	66	(1)
How to Label e-Commerce Forms	66	(2)
Accommodate Less Experienced Users	68	(1)
Use Different Labeling Strategies for International Forms	69	(1)
Make Sure Labels Are Correctly Tied to Their Fields	69	(1)
How to Group Fields	70	(2)
Complexity is Not Necessarily Bad	71	(1)
Offer Automated Entry Fields	72	(1)
How to Show Protected Fields	73	(3)
Required Field, Defined	76	(7)
Use Required Fields Sparingly	76	(1)
How to Indicate a Required Field	77	(1)
Offer Defaults Whenever Possible	78	(2)
How Not to Indicate a Required Field	80	(1)
How to Provide Feedback for Required Fields	80	(3)
Prevent Input Errors With Dropdown Lists	83	(2)
When to Use Dropdown Lists	83	(1)
Check Your Lists for Typos and Other Errors	84	(1)
Put Lists in Order	85	(1)
When to Use Regular Lists Rather Than Dropdown Lists	85	(1)
Prevent Input Errors With Checkboxes	86	(5)
Checkbox Groups: Doing the Numbers	90	(1)
Be Careful How You Toggle	90	(1)
Use Opposites Only	90	(1)
Don't Use Negatives (You'll Create a Double Negative by Mistake)	91	(1)
Prevent Input Errors With Radio Buttons	91	(1)
``I Want Nothing!''	92	(1)
Make Your Checkboxes and Radio Buttons More Accessible	92	(2)
When to Use Tabs Instead of Pages	94	(2)
Guidelines for Tabs	95	(1)
When to Use Popups	96	(3)
Use Popups to Offer Information	97	(1)
Follow These Popups Guidelines	98	(1)
Stay on Top	99	(2)
Three Traditional Popup Buttons	100	(1)
Use Standard Button order	100	(1)
How to Do Dates, Addresses, and Other Standard Input	101	(5)
Dates: Use Calendar Popups and a Day-Month-Year Format	101	(1)
What Are the Standard Elements of Names and Addresses?	102	(1)
Numbers Are Handled Differently in Different Cultures	103	(2)
Credit Card Numbers Are the Same, Except When They're Different	105	(1)
Guidelines for Buttons	106	(10)
Use Buttons to Do Things, Use Links to Jump to Other Web Pages	106	(1)
How to Size Buttons	106	(1)
Set Buttons Off from Fields	107	(1)
Repeat Command Buttons at Top and Bottom	108	(1)
Be Careful Where You Put the Buttons on Tabs and Frames	109	(1)
Capture Multiple Button Presses	109	(2)
You Don't Really Need ``Reset,'' Do You?	111	(1)
Include a ``Find'' Button	112	(1)
When Losing Input Is Dangerous, Strip Out the Browser Controls	113	(2)
Considering Offering Different Levels of Save	115	(1)
When to Validate Input	115	(1)
Mosaic Pages: Syndication and Links	116	(1)
What If Part of Your Application Is Someone Else's Application?	116	(1)
When to Warn That a Jump Is Imminent	116	(1)
Consider Using Flash to Simplify the Interaction	117	(1)
How to be Helpful	118	(5)
Data Input: Lists	123	(18)
A Simple List	123	(2)
List on the Left, Object on the Right	125	(7)
Use Split Windows for Navigation as Well as for Lists	125	(1)
Consider Heterogeneous Windows	126	(1)
Use Lists for Parts of an Object	127	(1)
Consider Using Pictures	127	(2)
Potential Problems with the List-Object Strategy	129	(1)
How to Select the Right List-Object Strategy	130	(2)
How to Select and Open Objects from Lists	132	(3)
Selecting Multiple Rows	133	(2)
How to Change Objects from Lists	135	(6)
How to Show Actions	136	(2)
Where to Put the Actions	138	(1)
Use Popups for Secondary Data	139	(2)
Data Retrieval: Search	141	(32)
Searching: Doing the Numbers	141	(1)
Search Is Important	141	(1)
Internet Searching Is Different from Database Searching	142	(2)
Most Searches Are Simple	142	(1)
Many Users Make Mistakes	143	(1)
Searches Are Shallow (but Don't Have to Be)	143	(1)
To Summarize...	143	(1)
Simple Search: Good for Uncomplicated Retrievals	144	(4)
Catch User Errors and Work Around Them	144	(2)
Remember the Search	146	(2)
Advanced Search: Good for Experienced Users	148	(2)
How to Connect Multiple Criteria	149	(1)
What If Users Want to Wildcard the Entire Field	150	(1)
What Does AND Mean?	151	(6)
Don't Make Me Choose	151	(2)
I Want None of That	153	(1)
Now I Want the Opposite	154	(1)
How to Offer Help Politely	154	(3)
Complex Search: Good for Difficult Queries	157	(4)
Use Progressive Disclosure to Avoid Overwhelming Searchers	157	(1)
Who Should See What, or How to Deal with Security	158	(2)
You May Need to Provide a Complete View of the Database	160	(1)
Results of a Search	161	(5)
Provide Feedback	164	(1)
What to Do When You Retrieve Too Many Records	164	(2)
Watch Out for Slow Performance When Internationalizing	166	(2)
Be Careful with Error Messages	168	(2)
Should You Offer Wildcards?	170	(3)
Data Retrieval: Filtering and Browsing	173	(26)
Use Filtering to Control Overloads	173	(4)
Filters Can Be Dangerous	174	(1)
Where to Put the Filter	175	(2)
How to Save the Filter	177	(1)
Use Browsing When the Query Is Fuzzy	177	(16)
Make the Most of People's Spatial Abilities	178	(1)
Maintain an Overview with Fish-Eye Lenses	179	(3)
Provide Database Overviews	182	(1)
Clustering and Concept Mapping Are Good for Visual Thinkers	183	(1)
Use Expanded Thumbnails to Make Information Pop Out	183	(1)
Offer Better Information by Providing Ratings	184	(9)
How to Index and Find Graphical Objects	193	(6)
Data Output: Reports	199	(24)
Let Users Print Ad Hoc Queries	200	(3)
Ad Hoc Reports: Not Just Screenshots	201	(1)
Start Database Designs from Reports	201	(2)
Aren't We Trying to Get Rid of Paper?	203	(1)
Heavy Lifting: Management Reports	203	(5)
Home Grown or Store Bought?	205	(2)
Should This Be a Summary or a Detailed Report?	207	(1)
Should This Be a Comparison?	207	(1)
Defining Management Reports	208	(15)
Collect Requirements from Old Reports	209	(1)
Check for Data That Aren't from the Database	209	(1)
Rules for Headers	210	(1)
Rules for Footers	211	(1)
Rules for the Report's Body	212	(1)
Make Sure That Column Headings Are Clear	212	(1)
Make Sure the Report Shows Units of Measurement	213	(1)
Use the Right Fonts	214	(1)
How to Separate Rows Visually without Cluttering the Screen	215	(3)
What to Do If the Report Is Too Wide	218	(1)
Make Reports Work with Screen-Reading Software	219	(1)
Break Up Pages Logically	220	(2)
Report Parameters Tell People How the Report Was Created	222	(1)
Data Output: Printed Forms	223	(14)
Make Changes Hard to Do	224	(2)
What Size and Shape Is the Paper?	226	(1)
Designing a Form	227	(3)
Who Are You, And Why Are You Sending Me Things? Form Headers Contain Corporate Identity Information	229	(1)
Technical Note: Do You Really Want to Embed Fonts in Web Pages?	230	(2)
Put Page Numbers in the Footers	231	(1)
Put the Important Information in the Body	231	(1)
Email or Post Forms Online	232	(5)
Interacting With Output	237	(28)
Designing the Formatting Window	237	(2)
Generating Output	239	(5)
Selecting Records for the Report or Set of Forms	240	(2)
Scheduling Reports	242	(2)
Manipulating Reports	244	(6)
Ways to Sort Columns	244	(4)
Ways to Change Column Order	248	(2)
Saving Output	250	(2)
Print for the File Folder	250	(1)
Archive Output	251	(1)
Save the Criteria for Formats and Output Generation	251	(1)
Save Old Data	252	(1)
Communication and Distribution	252	(5)
Use Email	252	(1)
Distribute Information About Access	253	(1)
Distribute Knowledge, Not Just Data	253	(1)
Export to Text Files	253	(2)
Export to Data Files	255	(2)
``Printer-Friendly'' Versions	257	(3)
What To Do If There Are Too Many Records in the Report	260	(5)
Solutions	260	(1)
Before Starting the Report	260	(1)
While Generating the Report	261	(1)
When Displaying the Report	262	(3)
Designing Graphs and Charts	265	(60)
Will This Data Make a Good Graph?	267	(1)
Data Rectangles Hold the Information	267	(58)
Use Grids If the Data May Be Hard to Read	267	(3)
Axes Show the Variables	270	(13)
Scales Show Units of Measurement	283	(10)
Labels Provide Overall Meaning	293	(4)
How to Use and Choose Symbols on Line and Scatterplot Graphs	297	(4)
How to Separate Multiple Datasets on Line and Bar Graphs	301	(6)
Interactive Methods for Separating Multiple Datasets	307	(14)
Use 3D Effects Sparingly	321	(4)
Graph Types Based On Use	325	(32)
Simple Comparisons	325	(6)
Bar Chart	325	(1)
Horizontal Bar Chart	326	(1)
Clustered Bar Chart	327	(1)
Zero-Line Bar Chart	327	(1)
Pictorial Bar Chart	328	(1)
Pareto Diagrams Are Not Bar Charts	328	(3)
Changes Over Time	331	(3)
Line Graph	331	(1)
High/Low/Close	332	(1)
Candle Chart	333	(1)
Statistical Analysis	334	(9)
Histogram	334	(1)
Rules for Formatting Histograms	334	(3)
Frequency Polygon	337	(1)
Pyramid Histogram	338	(1)
Stem-and-Leaf Graphs	339	(1)
Scatterplot	340	(1)
Bubble Chart	340	(3)
Proportion	343	(14)
Area Charts	344	(1)
Area Charts Are Cumulative	344	(3)
Pie Chart	347	(1)
Rules for Formatting Pie Charts	348	(2)
Donut Chart Variation	350	(1)
Segmented Bar Chart	350	(1)
Horizontal Segmented Bar Chart	350	(1)
Paired Horizontal or Vertical Bar Chart	351	(1)
Zero-Line Bar Chart	351	(6)
Designing Diagrams	357	(56)
When to Use Diagrams	357	(1)
Designing Diagram Software	357	(14)
Parts of a Diagram Window	359	(1)
Parts of Diagrams	360	(11)
Creating Diagrams	371	(12)
Provide a Drawing Area	372	(2)
Provide a Palette	374	(8)
Provide Tools and Commands	382	(1)
Let Users Redisplay Diagrams Whenever They Need to	383	(1)
Rules for Saving Diagrams	383	(1)
Showing Diagrams	383	(20)
Provide Filtering Options	384	(1)
Provide Panning	384	(1)
Provide Zooming	385	(5)
Overviews Provide Context	390	(7)
Make Diagrams Come Alive	397	(6)
Technical Note: Watch Out for the Programming and Networking Aspects of Graphical Displays	403	(4)
``Real Programmers, Usability Engineers, Systems Analysts, et Cetera, Don't Do Graphics''	407	(1)
Technical Note: How to Print Large Graphics	408	(4)
Technical Note: How to Create a Grayscale Chart	412	(1)
Diagram Types	413	(40)
Cause-and-Effect Diagrams	413	(1)
Primary Symbols	414	(1)
Engineering and Scientific Diagrams	414	(14)
Cross Section	415	(1)
Cutaway View	415	(1)
Elevation View	416	(1)
Exploded View	416	(3)
Line Drawing	419	(1)
Photographs	420	(3)
Plan View	423	(1)
Schematic	423	(5)
Flowcharts	428	(1)
Primary Symbols	428	(1)
Network Diagrams	429	(1)
Primary Symbols	429	(1)
Organization Charts	429	(6)
Primary Symbols	431	(1)
Create Live Organization Charts	432	(1)
Don't Restrict Yourself to Hierarchies: The Anti-org Chart	433	(1)
Other Hierarchical Charts	434	(1)
Software Design Diagrams	435	(10)
Data-Flow Diagram	436	(1)
Primary Symbols	437	(2)
Entity-Relationship Diagram	439	(1)
Primary Symbols	440	(1)
Variations	440	(2)
State-Transition Diagram	442	(1)
Primary Symbols	442	(3)
Time-and-Activity Charts	445	(5)
Primary Symbols	445	(1)
Variations	446	(1)
Provide Text Versions	447	(3)
Create Live Time-and-Activity Charts	450	(1)
Treemaps	450	(3)
Designing Geographic Maps	453	(62)
When to Use Maps	453	(2)
Maps Are Data Made Visual	455	(2)
Use Vector Maps to Show Points, Lines, and Areas	457	(1)
Technical Note: Flash or SVG?	457	(41)
Use Raster Data for Continuous Images and Photos	463	(5)
Use Triangles to Analyze Surfaces	468	(4)
Data About Data: How Places Are Identified and Shown	472	(1)
Separate Information Using Layers	473	(3)
Get the Scales Right	476	(3)
Pinpoint Locations by Latitude and Longitude	479	(6)
Know Your Projections	485	(13)
Follow the Rules for Color On Maps	498	(4)
How False Colors Are Assigned on Satellite and Aerial Maps	498	(2)
Don't Overdo Color	500	(1)
Are Four Colors Enough?	501	(1)
Know Your Map Data	502	(13)
What Types of Data Do You Need?	502	(2)
How to Manage Map Error	504	(11)
Interacting With Geographic Maps	515	(20)
Viewing Maps	515	(12)
Keys Tell Users Where They Are	515	(7)
To Maintain Trust, Provide Background Information	522	(1)
How to Show Errors	523	(4)
Acting On Maps	527	(8)
Let Users Change the Level of Detail	528	(2)
Use Aggregates to Manage Problems	530	(5)
Types of Maps	535	(26)
Help Users Find Locations	535	(4)
On-the-Run Way-Finding: Simultaneous Localization and Mapping	537	(1)
Provide Methods, If Necessary, for Measuring Distances	537	(1)
Check Whether You Need to Offer Travel Times	538	(1)
Overlay Information On Locations	539	(2)
Show How Data Are Distributed Geographically	541	(6)
Use Either of Two Methods to Show Data	542	(1)
Statistical Maps Have Problems (But There Are Solutions)	542	(5)
Use the Right Method for the Data	547	(5)
Attach Data to Points When the Points Are Important	548	(1)
Show Distances When Distances Are Important	548	(1)
Use Isolines to Show Bands of Data	549	(1)
Distort Map Sizes to Show Relative Data Sizes	549	(1)
Use 3D Steps to Indicate Data Sizes	549	(2)
Use 3D Contours to Indicate Data Sizes	551	(1)
Use Whatever Works	551	(1)
Provide Decision Support and Analysis	552	(9)
GIS/MLS	552	(1)
Land Use	552	(3)
Customer Relationship Management (CRM)	555	(6)
APPENDIX A Web Application Design Worksheets	561	(4)
Page-to-Application Continuum	561	(4)
Look-An-Feel Continuum	562	(3)
APPENDIX B Quality Testing	565	(8)
Accessibility	565	(1)
Internationalization	565	(1)
Data Input	566	(2)
Data Retrieval	568	(1)
Data Output	569	(1)
Graphs	570	(1)
Diagrams	570	(1)
Geographic Maps	571	(2)
Tests for Data	571	(2)
APPENDIX C Usability Testing	573	(10)
Overall	573	(1)
Data Input	573	(1)
Data Retrieval	574	(1)
Data Output	574	(1)
Graphs	575	(1)
Diagrams	576	(1)
Geographic Maps	576	(7)
APPENDIX D Design Checklists	583	(52)
Accessibility	583	(1)
Internationalization	584	(2)
Data Input	586	(1)
Data Output	586	(3)
Graphs	589	(2)
Diagrams	591	(3)
Geographic Maps	594	(3)
Glossary	597	(4)
References	601	(10)
Resources	611	(1)
Accessibility	611	(3)
Articles, Books, and White Papers	611	(1)
Color Vision	612	(1)
Effects of Aging	612	(1)
Equipment and Technologies	613	(1)
Software Platforms	613	(1)
Web Sites	613	(1)
Cascading Style Sheets	614	(1)
Web Sites	614	(1)
Books	615	(1)
Content Management Systems, Help, Error Management	615	(1)
Graphics and Cognitive Psychology	615	(1)
Internationalization	615	(3)
Articles, Newsletters, White Papers	615	(1)
Bibliographies	616	(1)
Books: Cultural Aspects of Internationalization	616	(1)
Books: Technical Aspects of Internationalization	617	(1)
Code Pages and Character Sets	617	(1)
Forums	617	(1)
Organizations	617	(1)
Quality and Usability Testing	618	(1)
Software and Data	618	(1)
Technical Documentation and Tutorials	618	(1)
Other	618	(1)
Web Application Framework	618	(2)
Books	618	(1)
Development (Not Look-and-Feel) Standards	619	(1)
Log File Analysis	619	(1)
Look-and-Feel Standards for Web Applications	620	(1)
Validators	620	(1)
Data Input	620	(2)
Auto-Fill	620	(1)
Auto-Complete	620	(1)
Data Capture	621	(1)
Date, Time, Address, and Number Standards and Internationalization	621	(1)
Dropdown Type-Ahead	621	(1)
Flash for Input Forms	621	(1)
Input Form Design	622	(1)
Syndication and Cross-Site Interactions	622	(1)
Data Retrieval	622	(1)
Articles and Websites	622	(1)
Data Output	623	(2)
Formatting	623	(1)
Paper Sizes	623	(1)
Printing	623	(1)
Software Reporting & Document Management Packages	624	(1)
Output Forms, XML, and Business	624	(1)
Typefaces	624	(1)
Graphs and Charts	625	(1)
Data Scraping	625	(1)
Software Packages	625	(1)
Statistical Analysis	626	(1)
Diagrams	626	(2)
Software and APIs	626	(1)
Cause-and-Effect Diagrams	626	(1)
Software Design Diagrams	626	(1)
Symbols and Standards	627	(1)
Organization Charts	628	(1)
Time-and-Activity Charts	628	(1)
Geographic Maps	628	(4)
General	628	(1)
Color Standards	628	(1)
Data Sources	629	(1)
Glossaries	629	(1)
Maps and Satellite Images	629	(1)
Online Newsletters and White Papers	629	(1)
Online Tutorials	630	(1)
Organizations	630	(1)
Projections	630	(1)
Software	630	(1)
Standards	631	(1)
Symbol Sets	631	(1)
Testing	632	(1)
Quality Testing	632	(1)
Usability Testing	632	(1)
Biographies	633	(2)
Index	635