Web Application Design Handbook (eBook)

Best Practices for Web-Based Software

Susan Fowler, Victor Stanwick (Autoren)

eBook Download: PDF

2004 | 1. Auflage
658 Seiten
Elsevier Science (Verlag)
978-0-08-048170-8 (ISBN)

Infos

"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 for porting existing desktop applications to Web browsers."

---

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 "e;how to."e; 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 "e;cheat sheet"e; or "e;fake book"e; for designers: a handy reference for standards, rules of thumb, and tricks of the trade.* Applicable to new Web-based applications and for porting existing desktop applications to Web browsers.

Inhalt

Front cover 1
The Morgan Kaufmann Series in Interactive Technologies 5
Title page 6
Copyright page 7
Table of contents 8
Preface 24
Answering Questions 24
Trust What You Already Know 25
Predicting the Future 25
A Short History of Visualization 26
Visuals Provide More Context 27
Visuals Encourage Pattern Recognition 28
Visuals Speed Up Decisions 29
Acknowledgments 30
1 What Is a Web Application? 32
What's the Difference Between a Web Page and a Web Application? 32
What Difference Does the Platform Make? 35
The Tentative Answer 43
Where Does My Program Fit? 44
What Is the Nature of the Relationship? 44
What Is the Conversation Like? 48
What Is the Nature of the Interaction? 48
What Are the Technical Requirements? 48
How Often Is It Used? 49
What Is the Expected Response Time (or the Perceived Distance)? 49
Are These Interactions in Real Time? 50
How Much Help Will the Users Need? 50
What Is the Interaction Style? 50
What Should It Look Like? 51
Does It Follow Any Standards? 52
How Intense Is This Interaction? 53
What Should This Application Look Like? 53
2 The Browser Framework 56
Browser Window: A Conceptual Model 56
Parts of a Browser Window 57
Parts of the Content Area 58
A Note About Navigation 60
Make Home Easy to Find 60
Put Local Navigation on the Left 61
Put Site-Wide Navigation on the Top 63
Repeat Links on the Bottom 64
Try Putting Advertising Banners in More Than One Spot 65
Overall Design Issues 65
Consider User Roles 65
Size Windows Correctly 66
Make Pages Printable 70
Use the Right Colors 71
Make Sure the Application Can Be Localized 72
Make Sure Pages Are Accessible 77
3 Data Input: Forms 90
Conceptual Model: Lists versus Objects 90
Data-Input Forms: The Basics 91
Use Fields to Collect Free-Form Information 93
Know the Various Field Types 93
Standard Field, Defined 93
General Design Guidelines 93
Make Entry Areas the Right Size 94
Don't Make Users Format Text 95
Provide Keyboard as Well as Mouse Navigation 96
Retain Cut, Copy, and Paste 96
Label Fields Correctly 97
How to Label Data-Input Forms 97
How to Label e-Commerce Forms 97
Accommodate Less Experienced Users 99
Use Different Labeling Strategies for International Forms 100
Make Sure Labels Are Correctly Tied to Their Fields 100
How to Group Fields 101
Complexity Is Not Necessarily Bad 102
Offer Automated Entry Fields 103
How to Show Protected Fields 104
Required Field, Defined 107
Use Required Fields Sparingly 107
How to Indicate a Required Field 108
Offer Defaults Whenever Possible 109
How Not to Indicate a Required Field 111
How to Provide Feedback for Required Fields 111
Prevent Input Errors with Dropdown Lists 114
When to Use Dropdown Lists 114
Check Your Lists for Typos and Other Errors 115
Put Lists in Order 116
When to Use Regular Lists Rather Than Dropdown Lists 116
Prevent Input Errors with Checkboxes 117
Checkbox Groups: Doing the Numbers 121
Be Careful How You Toggle 121
Use Opposites Only 121
Don't Use Negatives (You'll Create a Double Negative by Mistake) 122
Prevent Input Errors with Radio Buttons 122
"I Want Nothing!" 123
Make Your Checkboxes and Radio Buttons More Accessible 123
When to Use Tabs Instead of Pages 125
Guidelines for Tabs 126
When to Use Popups 127
Use Popups to Offer Information 128
Follow These Popup Guidelines 129
Three Traditional Popup Buttons 131
Use Standard Button Order 131
How to Do Dates, Addresses, and Other Standard Input 132
Dates: Use Calendar Popups and a Day-Month-Year Format 132
What Are the Standard Elements of Names and Addresses? 133
Numbers Are Handled Differently in Different Cultures 134
Credit Card Numbers Are the Same, Except When They're Different 136
Guidelines for Buttons 137
Use Buttons to Do Things, Use Links to Jump to Other Web Pages 137
How to Size Buttons 137
Set Buttons Off from Fields 138
Repeat Command Buttons at Top and Bottom 139
Be Careful Where You Put the Buttons on Tabs and Frames 140
Capture Multiple Button Presses 140
You Don't Really Need "Reset," Do You? 142
Include a "Find" Button 143
When Losing Input Is Dangerous, Strip Out the Browser Controls 144
Considering Offering Different Levels of Save 146
When to Validate Input 146
Mosaic Pages: Syndication and Links 147
What If Part of Your Application Is Someone Else's Application? 147
When to Warn That a Jump Is Imminent 147
Consider Using Flash to Simplify the Interaction 148
How to Be Helpful 149
4 Data Input: Lists 154
A Simple List 154
List on the Left, Object on the Right 156
Use Split Windows for Navigation as Well as for Lists 156
Consider Heterogeneous Windows 157
Use Lists for Parts of an Object 158
Consider Using Pictures 158
Potential Problems with the List-Object Strategy 160
How to Select the Right List-Object Strategy 161
How to Select and Open Objects from Lists 163
Selecting Multiple Rows 164
How to Change Objects from Lists 166
How to Show Actions 167
Where to Put the Actions 169
Use Popups for Secondary Data 170
5 Data Retrieval: Search 172
Searching: Doing the Numbers 172
Search Is Important 172
Most Searches Are Simple 173
Many Users Make Mistakes 174
Searches Are Shallow (but Don't Have to Be) 174
To Summarize... 174
Simple Search: Good for Uncomplicated Retrievals 175
Catch User Errors and Work Around Them 175
Remember the Search 177
Advanced Search: Good for Experienced Users 179
How to Connect Multiple Criteria 180
Don't Make Me Choose 182
I Want None of That 184
Now I Want the Opposite 185
How to Offer Help Politely 185
Complex Search: Good for Difficult Queries 188
Use Progressive Disclosure to Avoid Overwhelming Searchers 188
Who Should See What, or How to Deal with Security 189
You May Need to Provide a Complete View of the Database 191
Results of a Search 192
Provide Feedback 195
What to Do When You Retrieve Too Many Records 195
Be Careful with Error Messages 199
6 Data Retrieval: Filtering and Browsing 204
Use Filtering to Control Overloads 204
Filters Can Be Dangerous 205
Where to Put the Filter 206
How to Save the Filter 208
Use Browsing When the Query Is Fuzzy 208
Make the Most of People's Spatial Abilities 209
Maintain an Overview with Fish-Eye Lenses 210
Provide Database Overviews 213
Clustering and Concept Mapping Are Good for Visual Thinkers 214
Use Expanded Thumbnails to Make Information Pop Out 214
Offer Better Information by Providing Ratings 215
7 Data Output: Reports 230
Let Users Print Ad Hoc Queries 231
Ad Hoc Reports: Not Just Screenshots 232
Start Database Designs from Reports 232
Aren't We Trying to Get Rid of Paper? 234
Heavy Lifting: Management Reports 234
Home Grown or Store Bought? 236
Should This Be a Summary or a Detailed Report? 238
Should This Be a Comparison? 238
Defining Management Reports 239
Collect Requirements from Old Reports 240
Check for Data That Aren't from the Database 240
Rules for Headers 241
Rules for Footers 242
Rules for the Report's Body 243
Make Sure That Column Headings Are Clear 243
Make Sure the Report Shows Units of Measurement 244
Use the Right Fonts 245
How to Separate Rows Visually without Cluttering the Screen 246
What to Do if the Report Is Too Wide 249
Make Reports Work with Screen-Reading Software 250
Break Up Pages Logically 251
Report Parameters Tell People How the Report Was Created 253
8 Data Output: Printed Forms 254
Make Changes Hard to Do 255
What Size and Shape Is the Paper? 257
Designing a Form 258
Who Are You, and Why Are You Sending Me Things? Form Headers Contain Corporate Identity Information 260
Put Page Numbers in the Footers 262
Put the Important Information in the Body 262
Email or Post Forms Online 263
9 Interacting with Output 266
Designing the Formatting Window 266
Generating Output 270
Selecting Records for the Report or Set of Forms 271
Scheduling Reports 273
Manipulating Reports 275
Ways to Sort Columns 275
Ways to Change Column Order 279
Saving Output 281
Print for the File Folder 281
Archive Output 282
Save the Criteria for Formats and Output Generation 282
Save Old Data 283
Communication and Distribution 283
Use Email 283
Distribute Information About Access 284
Distribute Knowledge, Not Just Data 284
Export to Text Files 284
Export to Data Files 286
"Printer-Friendly" Versions 288
What to Do if There Are Too Many Records in the Report 291
Solutions 291
Before Starting the Report 291
While Generating the Report 292
When Displaying the Report 293
10 Designing Graphs and Charts 296
Will This Data Make a Good Graph? 298
Data Rectangles Hold the Information 298
Use Grids if the Data May Be Hard to Read 298
Axes Show the Variables 301
Scales Show Units of Measurement 314
Labels Provide Overall Meaning 324
How to Use and Choose Symbols on Line and Scatterplot Graphs 328
How to Separate Multiple Datasets on Line and Bar Graphs 332
Interactive Methods for Separating Multiple Datasets 338
11 Graph Types Based on Use 356
Simple Comparisons 356
Bar Chart 356
Horizontal Bar Chart 357
Clustered Bar Chart 358
Zero-Line Bar Chart 358
Pictorial Bar Chart 359
Pareto Diagrams Are Not Bar Charts 359
Changes Over Time 362
Line Graph 362
High/Low/Close 363
Candle Chart 364
Statistical Analysis 365
Histogram 365
Rules for Formatting Histograms 365
Frequency Polygon 368
Pyramid Histogram 369
Stem-and-Leaf Graphs 370
Scatterplot 371
Bubble Chart 371
Proportion 374
Area Charts 375
Area Charts Are Cumulative 375
Pie Chart 378
Rules for Formatting Pie Charts 379
Donut Chart Variation 381
Segmented Bar Chart 381
Horizontal Segmented Bar Chart 381
Paired Horizontal or Vertical Bar Chart 382
Zero-Line Bar Chart 382
12 Designing Diagrams 388
When to Use Diagrams 388
Designing Diagram Software 388
Parts of a Diagram Window 390
Parts of Diagrams 391
Creating Diagrams 402
Provide a Drawing Area 403
Provide a Palette 405
Provide Tools and Commands 413
Let Users Redisplay Diagrams Whenever They Need To 414
Rules for Saving Diagrams 414
Showing Diagrams 414
Provide Filtering Options 415
Provide Panning 415
Provide Zooming 416
Overviews Provide Context 421
Make Diagrams Come Alive 428
13 Diagram Types 444
Cause-and-Effect Diagrams 444
Primary Symbols 445
Engineering and Scientific Diagrams 445
Cross Section 446
Cutaway View 446
Elevation View 447
Exploded View 447
Line Drawing 450
Photographs 451
Plan View 454
Schematic 454
Flowcharts 459
Primary Symbols 459
Network Diagrams 460
Primary Symbols 460
Organization Charts 460
Primary Symbols 462
Create Live Organization Charts 463
Don't Restrict Yourself to Hierarchies: The Anti-org Chart 464
Other Hierarchical Charts 465
Software Design Diagrams 466
Data-Flow Diagram 467
Primary Symbols 468
Entity-Relationship Diagram 470
Primary Symbols 471
Variations 471
State-Transition Diagram 473
Primary Symbols 473
Time-and-Activity Charts 476
Primary Symbols 476
Variations 477
Provide Text Versions 478
Create Live Time-and-Activity Charts 481
Treemaps 481
14 Designing Geographic Maps 484
When to Use Maps 484
Maps Are Data Made Visual 486
Use Vector Maps to Show Points, Lines, and Areas 488
Use Raster Data for Continuous Images and Photos 494
Use Triangles to Analyze Surfaces 499
Data About Data: How Places Are Identified and Shown 503
Separate Information Using Layers 504
Get the Scales Right 507
Pinpoint Locations by Latitude and Longitude 510
Know Your Projections 516
Follow the Rules for Color on Maps 529
How False Colors Are Assigned on Satellite and Aerial Maps 529
Don't Overdo Color 531
Are Four Colors Enough? 532
Know Your Map Data 533
What Types of Data Do You Need? 533
How to Manage Map Error 535
15 Interacting with Geographic Maps 546
Viewing Maps 546
Keys Tell Users Where They Are 546
To Maintain Trust, Provide Background Information 553
How to Show Errors 554
Acting on Maps 558
Let Users Change the Level of Detail 559
Use Aggregates to Manage Problems 561
16 Types of Maps 566
Help Users Find Locations 566
Provide Methods, If Necessary, for Measuring Distances 568
Check Whether You Need to Offer Travel Times 569
Overlay Information on Locations 570
Show How Data Are Distributed Geographically 572
Use Either of Two Methods to Show Data 573
Statistical Maps Have Problems (But There Are Solutions) 573
Use the Right Method for the Data 578
Attach Data to Points When the Points Are Important 579
Show Distances When Distances Are Important 579
Use Isolines to Show Bands of Data 580
Distort Map Sizes to Show Relative Data Sizes 580
Use 3D Steps to Indicate Data Sizes 580
Use 3D Contours to Indicate Data Sizes 582
Use Whatever Works 582
Provide Decision Support and Analysis 583
GIS/MLS 583
Land Use 583
Customer Relationship Management (CRM) 586
Appendix A Web Application Design Worksheets 592
Page-to-Application Continuum 592
Look-and-feel Continuum 593
Appendix B Quality Testing 596
Accessibility 596
Internationalization 596
Data Input 597
Data Retrieval 599
Data Output 600
Graphs 601
Diagrams 601
Geographic Maps 602
Tests for Data 602
Appendix C Usability Testing 604
Overall 604
Data Input 604
Data Retrieval 605
Data Output 605
Graphs 606
Diagrams 607
Visualizations 607
Appendix D Design Checklists 614
Accessibility 614
Internationalization 615
Data Input 617
Data Output 617
Graphs 620
Diagrams 622
Geographic Maps 625
Glossary 628
References 632
Resources 642
Accessibility 642
Articles, Books, and White Papers 642
Color Vision 643
Effects of Aging 643
Equipment and Technologies 644
Software Platforms 644
Web Sites 644
Cascading Style Sheets 645
Web Sites 645
Books 646
Content Management Systems, Help, Error Management 646
Graphics and Cognitive Psychology 646
Internationalization 646
Articles, Newsletters, White Papers 646
Bibliographies 647
Books: Cultural Aspects of Internationalization 647
Books: Technical Aspects of Internationalization 648
Code Pages and Character Sets 648
Forums 648
Organizations 648
Quality and Usability Testing 649
Software and Data 649
Technical Documentation and Tutorials 649
Other 649
Web Application Framework 649
Books 649
Development (Not Look-and-Feel) Standards 650
Log File Analysis 650
Look-and-Feel Standards for Web Applications 651
Validators 651
Data Input 651
Auto-fill 651
Auto-complete 651
Data Capture 652
Date, Time, Address, and Number Standards and Internationalization 652
Dropdown Type-Ahead 652
Flash for Input Forms 652
Input Form Design 653
Syndication and Cross-Site Interactions 653
Data Retrieval 653
Articles and Web Sites 653
Data Output 654
Formatting 654
Paper Sizes 654
Printing 654
Software Reporting & Document Management Packages
Output Forms, XML, and Business 655
Typefaces 655
Graphs and Charts 656
Data Scraping 656
Software Packages 656
Statistical Analysis 657
Diagrams 657
Software and APIs 657
Cause-and-Effect Diagrams 657
Software Design Diagrams 657
Symbols and Standards 658
Organization Charts 659
Time-and-Activity Charts 659
Geographic Maps 659
General 659
Color Standards 659
Data Sources 660
Glossaries 660
Maps and Satellite Images 660
Online Newsletters and White Papers 660
Online Tutorials 661
Organizations 661
Projections 661
Software 661
Standards 662
Symbol Sets 662
TESTING 663
Quality Testing 663
Usability Testing 663
Biographies 664
Index 666

Produkt-Details

• Erscheint lt. Verlag: 21.7.2004
• Sprache: englisch
• Themenwelt: Sachbuch/Ratgeber
• Themenwelt: Informatik ► Software Entwicklung ► User Interfaces (HCI)
• Themenwelt: Mathematik / Informatik ► Informatik ► Web / Internet
• ISBN-10: 0-08-048170-1 / 0080481701
• ISBN-13: 978-0-08-048170-8 / 9780080481708