Web Application Design Handbook: Best Practices for Web-Based Software
Regular price
28.500 KD
inc. VAT
Couldn't load pickup availability
Table of contents
- Cover
- Table of contentsvii
- Prefacexxiii
- Answering Questionsxxiii
- Trust What You Already Knowxxiv
- Predicting the Futurexxiv
- A Short History of Visualizationxxv
- Visuals Provide More Contextxxvi
- Visuals Encourage Pattern Recognitionxxvii
- Visuals Speed Up Decisionsxxviii
- Acknowledgmentsxxix
- 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
- The Tentative Answer12
- Where Does My Program Fit?13
- What Is the Nature of the Relationship?13
- What Is the Conversation Like?17
- What Is the Nature of the 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
- How Intense Is This Interaction?22
- What Should This Application Look Like?22
- 2 The Browser Framework25
- Browser Window: A Conceptual Model25
- Parts of a Browser Window26
- Parts of the Content Area27
- A Note About Navigation29
- Make Home Easy to Find29
- Put Local Navigation on the Left30
- Put Site-Wide Navigation on the Top32
- Repeat Links on the Bottom33
- Try Putting Advertising Banners in More Than One Spot34
- Overall Design Issues34
- Consider User Roles34
- Size Windows Correctly35
- Make Pages Printable39
- Use the Right Colors40
- Make Sure the Application Can Be Localized41
- Make Sure Pages Are Accessible46
- 3 Data Input: Forms59
- Conceptual Model: Lists versus Objects59
- Data-Input Forms: The Basics60
- Use Fields to Collect Free-Form Information62
- Know the Various Field Types62
- Standard Field, Defined62
- General Design Guidelines62
- Make Entry Areas the Right Size63
- Don't Make Users Format Text64
- Provide Keyboard as Well as Mouse Navigation65
- Retain Cut, Copy, and Paste65
- Label Fields Correctly66
- How to Label Data-Input Forms66
- How to Label e-Commerce Forms66
- Accommodate Less Experienced Users68
- Use Different Labeling Strategies for International Forms69
- Make Sure Labels Are Correctly Tied to Their Fields69
- How to Group Fields70
- Complexity Is Not Necessarily Bad71
- Offer Automated Entry Fields72
- How to Show Protected Fields73
- Required Field, Defined76
- Use Required Fields Sparingly76
- How to Indicate a Required Field77
- Offer Defaults Whenever Possible78
- How Not to Indicate a Required Field80
- How to Provide Feedback for Required Fields80
- Prevent Input Errors with Dropdown Lists83
- When to Use Dropdown Lists83
- Check Your Lists for Typos and Other Errors84
- Put Lists in Order85
- When to Use Regular Lists Rather Than Dropdown Lists85
- Prevent Input Errors with Checkboxes86
- Checkbox Groups: Doing the Numbers90
- Be Careful How You Toggle90
- Use Opposites Only90
- Don't Use Negatives (You'll Create a Double Negative by Mistake)91
- Prevent Input Errors with Radio Buttons91
- "I Want Nothing!"92
- Make Your Checkboxes and Radio Buttons More Accessible92
- When to Use Tabs Instead of Pages94
- Guidelines for Tabs95
- When to Use Popups96
- Use Popups to Offer Information97
- Follow These Popup Guidelines98
- Three Traditional Popup Buttons100
- Use Standard Button Order100
- How to Do Dates, Addresses, and Other Standard Input101
- Dates: Use Calendar Popups and a Day-Month-Year Format101
- What Are the Standard Elements of Names and Addresses?102
- Numbers Are Handled Differently in Different Cultures103
- Credit Card Numbers Are the Same, Except When They're Different105
- Guidelines for Buttons106
- Use Buttons to Do Things, Use Links to Jump to Other Web Pages106
- How to Size Buttons106
- Set Buttons Off from Fields107
- Repeat Command Buttons at Top and Bottom108
- Be Careful Where You Put the Buttons on Tabs and Frames109
- Capture Multiple Button Presses109
- You Don't Really Need "Reset," Do You?111
- Include a "Find" Button112
- When Losing Input Is Dangerous, Strip Out the Browser Controls113
- Considering Offering Different Levels of Save115
- When to Validate Input115
- Mosaic Pages: Syndication and Links116
- What If Part of Your Application Is Someone Else's Application?116
- When to Warn That a Jump Is Imminent116
- Consider Using Flash to Simplify the Interaction117
- How to Be Helpful118
- 4 Data Input: Lists123
- A Simple List123
- List on the Left, Object on the Right125
- Use Split Windows for Navigation as Well as for Lists125
- Consider Heterogeneous Windows126
- Use Lists for Parts of an Object127
- Consider Using Pictures127
- Potential Problems with the List-Object Strategy129
- How to Select the Right List-Object Strategy130
- How to Select and Open Objects from Lists132
- Selecting Multiple Rows133
- How to Change Objects from Lists135
- How to Show Actions136
- Where to Put the Actions138
- Use Popups for Secondary Data139
- 5 Data Retrieval: Search141
- Searching: Doing the Numbers141
- Search Is Important141
- Most Searches Are Simple142
- Many Users Make Mistakes143
- Searches Are Shallow (but Don't Have to Be)143
- To Summarize...143
- Simple Search: Good for Uncomplicated Retrievals144
- Catch User Errors and Work Around Them144
- Remember the Search146
- Advanced Search: Good for Experienced Users148
- How to Connect Multiple Criteria149
- Don't Make Me Choose151
- I Want None of That153
- Now I Want the Opposite154
- How to Offer Help Politely154
- Complex Search: Good for Difficult Queries157
- Use Progressive Disclosure to Avoid Overwhelming Searchers157
- Who Should See What, or How to Deal with Security158
- You May Need to Provide a Complete View of the Database160
- Results of a Search161
- Provide Feedback164
- What to Do When You Retrieve Too Many Records164
- Be Careful with Error Messages168
- 6 Data Retrieval: Filtering and Browsing173
- Use Filtering to Control Overloads173
- Filters Can Be Dangerous174
- Where to Put the Filter175
- How to Save the Filter177
- Use Browsing When the Query Is Fuzzy177
- Make the Most of People's Spatial Abilities178
- Maintain an Overview with Fish-Eye Lenses179
- Provide Database Overviews182
- Clustering and Concept Mapping Are Good for Visual Thinkers183
- Use Expanded Thumbnails to Make Information Pop Out183
- Offer Better Information by Providing Ratings184
- 7 Data Output: Reports199
- Let Users Print Ad Hoc Queries200
- Ad Hoc Reports: Not Just Screenshots201
- Start Database Designs from Reports201
- Aren't We Trying to Get Rid of Paper?203
- Heavy Lifting: Management Reports203
- Home Grown or Store Bought?205
- Should This Be a Summary or a Detailed Report?207
- Should This Be a Comparison?207
- Defining Management Reports208
- Collect Requirements from Old Reports209
- Check for Data That Aren't from the Database209
- Rules for Headers210
- Rules for Footers211
- Rules for the Report's Body212
- Make Sure That Column Headings Are Clear212
- Make Sure the Report Shows Units of Measurement213
- Use the Right Fonts214
- How to Separate Rows Visually without Cluttering the Screen215
- What to Do if the Report Is Too Wide218
- Make Reports Work with Screen-Reading Software219
- Break Up Pages Logically220
- Report Parameters Tell People How the Report Was Created222
- 8 Data Output: Printed Forms223
- Make Changes Hard to Do224
- What Size and Shape Is the Paper?226
- Designing a Form227
- Who Are You, and Why Are You Sending Me Things? Form Headers Contain Corporate Identity Information229
- Put Page Numbers in the Footers231
- Put the Important Information in the Body231
- Email or Post Forms Online232
- 9 Interacting with Output235
- Designing the Formatting Window235
- Generating Output239
- Selecting Records for the Report or Set of Forms240
- Scheduling Reports242
- Manipulating Reports244
- Ways to Sort Columns244
- Ways to Change Column Order248
- Saving Output250
- Print for the File Folder250
- Archive Output251
- Save the Criteria for Formats and Output Generation251
- Save Old Data252
- Communication and Distribution252
- Use Email252
- Distribute Information About Access253
- Distribute Knowledge, Not Just Data253
- Export to Text Files253
- Export to Data Files255
- "Printer-Friendly" Versions257
- What to Do if There Are Too Many Records in the Report260
- Solutions260
- Before Starting the Report260
- While Generating the Report261
- When Displaying the Report262
- 10 Designing Graphs and Charts265
- Will This Data Make a Good Graph?267
- Data Rectangles Hold the Information267
- Use Grids if the Data May Be Hard to Read267
- Axes Show the Variables270
- Scales Show Units of Measurement283
- Labels Provide Overall Meaning293
- How to Use and Choose Symbols on Line and Scatterplot Graphs297
- How to Separate Multiple Datasets on Line and Bar Graphs301
- Interactive Methods for Separating Multiple Datasets307
- 11 Graph Types Based on Use325
- Simple Comparisons325
- Bar Chart325
- Horizontal Bar Chart326
- Clustered Bar Chart327
- Zero-Line Bar Chart327
- Pictorial Bar Chart328
- Pareto Diagrams Are Not Bar Charts328
- Changes Over Time331
- Line Graph331
- High/Low/Close332
- Candle Chart333
- Statistical Analysis334
- Histogram334
- Rules for Formatting Histograms334
- Frequency Polygon337
- Pyramid Histogram338
- Stem-and-Leaf Graphs339
- Scatterplot340
- Bubble Chart340
- Proportion343
- Area Charts344
- Area Charts Are Cumulative344
- Pie Chart347
- Rules for Formatting Pie Charts348
- Donut Chart Variation350
- Segmented Bar Chart350
- Horizontal Segmented Bar Chart350
- Paired Horizontal or Vertical Bar Chart351
- Zero-Line Bar Chart351
- 12 Designing Diagrams357
- When to Use Diagrams357
- Designing Diagram Software357
- Parts of a Diagram Window359
- Parts of Diagrams360
- Creating Diagrams371
- Provide a Drawing Area372
- Provide a Palette374
- Provide Tools and Commands382
- Let Users Redisplay Diagrams Whenever They Need To383
- Rules for Saving Diagrams383
- Showing Diagrams383
- Provide Filtering Options384
- Provide Panning384
- Provide Zooming385
- Overviews Provide Context390
- Make Diagrams Come Alive397
- 13 Diagram Types413
- Cause-and-Effect Diagrams413
- Primary Symbols414
- Engineering and Scientific Diagrams414
- Cross Section415
- Cutaway View415
- Elevation View416
- Exploded View416
- Line Drawing419
- Photographs420
- Plan View423
- Schematic423
- Flowcharts428
- Primary Symbols428
- Network Diagrams429
- Primary Symbols429
- Organization Charts429
- Primary Symbols431
- Create Live Organization Charts432
- Don't Restrict Yourself to Hierarchies: The Anti-org Chart433
- Other Hierarchical Charts434
- Software Design Diagrams435
- Data-Flow Diagram436
- Primary Symbols437
- Entity-Relationship Diagram439
- Primary Symbols440
- Variations440
- State-Transition Diagram442
- Primary Symbols442
- Time-and-Activity Charts445
- Primary Symbols445
- Variations446
- Provide Text Versions447
- Create Live Time-and-Activity Charts450
- Treemaps450
- 14 Designing Geographic Maps453
- When to Use Maps453
- Maps Are Data Made Visual455
- Use Vector Maps to Show Points, Lines, and Areas457
- Use Raster Data for Continuous Images and Photos463
- Use Triangles to Analyze Surfaces468
- Data About Data: How Places Are Identified and Shown472
- Separate Information Using Layers473
- Get the Scales Right476
- Pinpoint Locations by Latitude and Longitude479
- Know Your Projections485
- Follow the Rules for Color on Maps498
- How False Colors Are Assigned on Satellite and Aerial Maps498
- Don't Overdo Color500
- Are Four Colors Enough?501
- Know Your Map Data502
- What Types of Data Do You Need?502
- How to Manage Map Error504
- 15 Interacting with Geographic Maps515
- Viewing Maps515
- Keys Tell Users Where They Are515
- To Maintain Trust, Provide Background Information522
- How to Show Errors523
- Acting on Maps527
- Let Users Change the Level of Detail528
- Use Aggregates to Manage Problems530
- 16 Types of Maps535
- Help Users Find Locations535
- Provide Methods, If Necessary, for Measuring Distances537
- Check Whether You Need to Offer Travel Times538
- Overlay Information on Locations539
- Show How Data Are Distributed Geographically541
- Use Either of Two Methods to Show Data542
- Statistical Maps Have Problems (But There Are Solutions)542
- Use the Right Method for the Data547
- Attach Data to Points When the Points Are Important548
- Show Distances When Distances Are Important548
- Use Isolines to Show Bands of Data549
- Distort Map Sizes to Show Relative Data Sizes549
- Use 3D Steps to Indicate Data Sizes549
- Use 3D Contours to Indicate Data Sizes551
- Use Whatever Works551
- Provide Decision Support and Analysis552
- GIS/MLS552
- Land Use552
- Customer Relationship Management (CRM)555
- Appendix A Web Application Design Worksheets561
- Page-to-Application Continuum561
- Look-and-feel Continuum562
- Appendix B Quality Testing565
- Accessibility565
- Internationalization565
- Data Input566
- Data Retrieval568
- Data Output569
- Graphs570
- Diagrams570
- Geographic Maps571
- Tests for Data571
- Appendix C Usability Testing573
- Overall573
- Data Input573
- Data Retrieval574
- Data Output574
- Graphs575
- Diagrams576
- Visualizations576
- Appendix D Design Checklists583
- Accessibility583
- Internationalization584
- Data Input586
- Data Output586
- Graphs589
- Diagrams591
- Geographic Maps594
- Glossary597
- References601
- Resources611
- Accessibility611
- Articles, Books, and White Papers611
- Color Vision612
- Effects of Aging612
- Equipment and Technologies613
- Software Platforms613
- Web Sites613
- Cascading Style Sheets614
- Web Sites614
- Books615
- Content Management Systems, Help, Error Management615
- Graphics and Cognitive Psychology615
- Internationalization615
- Articles, Newsletters, White Papers615
- Bibliographies616
- Books: Cultural Aspects of Internationalization616
- Books: Technical Aspects of Internationalization617
- Code Pages and Character Sets617
- Forums617
- Organizations617
- Quality and Usability Testing618
- Software and Data618
- Technical Documentation and Tutorials618
- Other618
- Web Application Framework618
- Books618
- Development (Not Look-and-Feel) Standards619
- Log File Analysis619
- Look-and-Feel Standards for Web Applications620
- Validators620
- Data Input620
- Auto-fill620
- Auto-complete620
- Data Capture621
- Date, Time, Address, and Number Standards and Internationalization621
- Dropdown Type-Ahead621
- Flash for Input Forms621
- Input Form Design622
- Syndication and Cross-Site Interactions622
- Data Retrieval622
- Articles and Web Sites622
- Data Output623
- Formatting623
- Paper Sizes623
- Printing623
- Software Reporting & Document Management Packages624
- Output Forms, XML, and Business624
- Typefaces624
- Graphs and Charts625
- Data Scraping625
- Software Packages625
- Statistical Analysis626
- Diagrams626
- Software and APIs626
- Cause-and-Effect Diagrams626
- Software Design Diagrams626
- Symbols and Standards627
- Organization Charts628
- Time-and-Activity Charts628
- Geographic Maps628
- General628
- Color Standards628
- Data Sources629
- Glossaries629
- Maps and Satellite Images629
- Online Newsletters and White Papers629
- Online Tutorials630
- Organizations630
- Projections630
- Software630
- Standards631
- Symbol Sets631
- TESTING632
- Quality Testing632
- Usability Testing632
- Biographies633
- Index635
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.
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.