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

Front cover

The Morgan Kaufmann Series in Interactive Technologies

Title page

Copyright page

Table of contents

Preface

Answering Questions

Trust What You Already Know

Predicting the Future

A Short History of Visualization

Visuals Provide More Context

Visuals Encourage Pattern Recognition

Visuals Speed Up Decisions

Acknowledgments

1 What Is a Web Application?

What's the Difference Between a Web Page and a Web Application?

What Difference Does the Platform Make?

The Tentative Answer

Where Does My Program Fit?

What Is the Nature of the Relationship?

What Is the Conversation Like?

What Is the Nature of the Interaction?

What Are the Technical Requirements?

How Often Is It Used?

What Is the Expected Response Time (or the Perceived Distance)?

Are These Interactions in Real Time?

How Much Help Will the Users Need?

What Is the Interaction Style?

What Should It Look Like?

Does It Follow Any Standards?

How Intense Is This Interaction?

What Should This Application Look Like?

2 The Browser Framework

Browser Window: A Conceptual Model

Parts of a Browser Window

Parts of the Content Area

A Note About Navigation

Make Home Easy to Find

Put Local Navigation on the Left

Put Site-Wide Navigation on the Top

Repeat Links on the Bottom

Try Putting Advertising Banners in More Than One Spot

Overall Design Issues

Consider User Roles

Size Windows Correctly

Make Pages Printable

Use the Right Colors

Make Sure the Application Can Be Localized

Make Sure Pages Are Accessible

3 Data Input: Forms

Conceptual Model: Lists versus Objects

Data-Input Forms: The Basics

Use Fields to Collect Free-Form Information

Know the Various Field Types

Standard Field, Defined

General Design Guidelines

Make Entry Areas the Right Size

Don't Make Users Format Text

Provide Keyboard as Well as Mouse Navigation

Retain Cut, Copy, and Paste

Label Fields Correctly

How to Label Data-Input Forms

How to Label e-Commerce Forms

Accommodate Less Experienced Users

Use Different Labeling Strategies for International Forms

Make Sure Labels Are Correctly Tied to Their Fields

How to Group Fields

Complexity Is Not Necessarily Bad

Offer Automated Entry Fields

How to Show Protected Fields

Required Field, Defined

Use Required Fields Sparingly

How to Indicate a Required Field

Offer Defaults Whenever Possible

How Not to Indicate a Required Field

How to Provide Feedback for Required Fields

Prevent Input Errors with Dropdown Lists

When to Use Dropdown Lists

Check Your Lists for Typos and Other Errors

Put Lists in Order

When to Use Regular Lists Rather Than Dropdown Lists

Prevent Input Errors with Checkboxes

Checkbox Groups: Doing the Numbers

Be Careful How You Toggle

Use Opposites Only

Don't Use Negatives (You'll Create a Double Negative by Mistake)

Prevent Input Errors with Radio Buttons

"I Want Nothing!"

Make Your Checkboxes and Radio Buttons More Accessible

When to Use Tabs Instead of Pages

Guidelines for Tabs

When to Use Popups

Use Popups to Offer Information

Follow These Popup Guidelines

Three Traditional Popup Buttons

Use Standard Button Order

How to Do Dates, Addresses, and Other Standard Input

Dates: Use Calendar Popups and a Day-Month-Year Format

What Are the Standard Elements of Names and Addresses?

Numbers Are Handled Differently in Different Cultures

Credit Card Numbers Are the Same, Except When They're Different

Guidelines for Buttons

Use Buttons to Do Things, Use Links to Jump to Other Web Pages

How to Size Buttons

Set Buttons Off from Fields

Repeat Command Buttons at Top and Bottom

Be Careful Where You Put the Buttons on Tabs and Frames

Capture Multiple Button Presses

You Don't Really Need "Reset," Do You?

Include a "Find" Button

When Losing Input Is Dangerous, Strip Out the Browser Controls

Considering Offering Different Levels of Save

When to Validate Input

Mosaic Pages: Syndication and Links

What If Part of Your Application Is Someone Else's Application?

When to Warn That a Jump Is Imminent

Consider Using Flash to Simplify the Interaction

How to Be Helpful

4 Data Input: Lists

A Simple List

List on the Left, Object on the Right

Use Split Windows for Navigation as Well as for Lists

Consider Heterogeneous Windows

Use Lists for Parts of an Object

Consider Using Pictures

Potential Problems with the List-Object Strategy

How to Select the Right List-Object Strategy

How to Select and Open Objects from Lists

Selecting Multiple Rows

How to Change Objects from Lists

How to Show Actions

Where to Put the Actions

Use Popups for Secondary Data

5 Data Retrieval: Search

Searching: Doing the Numbers

Search Is Important

Most Searches Are Simple

Many Users Make Mistakes

Searches Are Shallow (but Don't Have to Be)

To Summarize...

Simple Search: Good for Uncomplicated Retrievals

Catch User Errors and Work Around Them

Remember the Search

Advanced Search: Good for Experienced Users

How to Connect Multiple Criteria

Don't Make Me Choose

I Want None of That

Now I Want the Opposite

How to Offer Help Politely

Complex Search: Good for Difficult Queries

Use Progressive Disclosure to Avoid Overwhelming Searchers

Who Should See What, or How to Deal with Security

You May Need to Provide a Complete View of the Database

Results of a Search

Provide Feedback

What to Do When You Retrieve Too Many Records

Be Careful with Error Messages

6 Data Retrieval: Filtering and Browsing

Use Filtering to Control Overloads

Filters Can Be Dangerous

Where to Put the Filter

How to Save the Filter

Use Browsing When the Query Is Fuzzy

Make the Most of People's Spatial Abilities

Maintain an Overview with Fish-Eye Lenses

Provide Database Overviews

Clustering and Concept Mapping Are Good for Visual Thinkers

Use Expanded Thumbnails to Make Information Pop Out

Offer Better Information by Providing Ratings

7 Data Output: Reports

Let Users Print Ad Hoc Queries

Ad Hoc Reports: Not Just Screenshots

Start Database Designs from Reports

Aren't We Trying to Get Rid of Paper?

Heavy Lifting: Management Reports

Home Grown or Store Bought?

Should This Be a Summary or a Detailed Report?

Should This Be a Comparison?

Defining Management Reports

Collect Requirements from Old Reports

Check for Data That Aren't from the Database

Rules for Headers

Rules for Footers

Rules for the Report's Body

Make Sure That Column Headings Are Clear

Make Sure the Report Shows Units of Measurement

Use the Right Fonts

How to Separate Rows Visually without Cluttering the Screen

What to Do if the Report Is Too Wide

Make Reports Work with Screen-Reading Software

Break Up Pages Logically

Report Parameters Tell People How the Report Was Created

8 Data Output: Printed Forms

Make Changes Hard to Do

What Size and Shape Is the Paper?

Designing a Form

Who Are You, and Why Are You Sending Me Things? Form Headers Contain Corporate Identity Information

Put Page Numbers in the Footers

Put the Important Information in the Body

Email or Post Forms Online

9 Interacting with Output

Designing the Formatting Window

Generating Output

Selecting Records for the Report or Set of Forms

Scheduling Reports

Manipulating Reports

Ways to Sort Columns

Ways to Change Column Order

Saving Output

Print for the File Folder

Archive Output

Save the Criteria for Formats and Output Generation

Save Old Data

Communication and Distribution

Use Email

Distribute Information About Access

Distribute Knowledge, Not Just Data

Export to Text Files

Export to Data Files

"Printer-Friendly" Versions

What to Do if There Are Too Many Records in the Report

Solutions

Before Starting the Report

While Generating the Report

When Displaying the Report

10 Designing Graphs and Charts

Will This Data Make a Good Graph?

Data Rectangles Hold the Information

Use Grids if the Data May Be Hard to Read

Axes Show the Variables

Scales Show Units of Measurement

Labels Provide Overall Meaning

How to Use and Choose Symbols on Line and Scatterplot Graphs

How to Separate Multiple Datasets on Line and Bar Graphs

Interactive Methods for Separating Multiple Datasets

11 Graph Types Based on Use

Simple Comparisons

Bar Chart

Horizontal Bar Chart

Clustered Bar Chart

Zero-Line Bar Chart

Pictorial Bar Chart

Pareto Diagrams Are Not Bar Charts

Changes Over Time

Line Graph

High/Low/Close

Candle Chart

Statistical Analysis

Histogram

Rules for Formatting Histograms

Frequency Polygon

Pyramid Histogram

Stem-and-Leaf Graphs

Scatterplot

Bubble Chart

Proportion

Area Charts

Area Charts Are Cumulative

Pie Chart

Rules for Formatting Pie Charts

Donut Chart Variation

Segmented Bar Chart

Horizontal Segmented Bar Chart

Paired Horizontal or Vertical Bar Chart

Zero-Line Bar Chart

12 Designing Diagrams

When to Use Diagrams

Designing Diagram Software

Parts of a Diagram Window

Parts of Diagrams

Creating Diagrams

Provide a Drawing Area

Provide a Palette

Provide Tools and Commands

Let Users Redisplay Diagrams Whenever They Need To

Rules for Saving Diagrams

Showing Diagrams

Provide Filtering Options

Provide Panning

Provide Zooming

Overviews Provide Context

Make Diagrams Come Alive

13 Diagram Types

Cause-and-Effect Diagrams

Primary Symbols

Engineering and Scientific Diagrams

Cross Section

Cutaway View

Elevation View

Exploded View

Line Drawing

Photographs

Plan View

Schematic

Flowcharts

Primary Symbols

Network Diagrams

Primary Symbols

Organization Charts

Primary Symbols

Create Live Organization Charts

Don't Restrict Yourself to Hierarchies: The Anti-org Chart

Other Hierarchical Charts

Software Design Diagrams

Data-Flow Diagram

Primary Symbols

Entity-Relationship Diagram

Primary Symbols

Variations

State-Transition Diagram

Primary Symbols

Time-and-Activity Charts

Primary Symbols

Variations

Provide Text Versions

Create Live Time-and-Activity Charts

Treemaps

14 Designing Geographic Maps

When to Use Maps

Maps Are Data Made Visual

Use Vector Maps to Show Points, Lines, and Areas

Use Raster Data for Continuous Images and Photos

Use Triangles to Analyze Surfaces

Data About Data: How Places Are Identified and Shown

Separate Information Using Layers

Get the Scales Right

Pinpoint Locations by Latitude and Longitude

Know Your Projections

Follow the Rules for Color on Maps

How False Colors Are Assigned on Satellite and Aerial Maps

Don't Overdo Color

Are Four Colors Enough?

Know Your Map Data

What Types of Data Do You Need?

How to Manage Map Error

15 Interacting with Geographic Maps

Viewing Maps

Keys Tell Users Where They Are

To Maintain Trust, Provide Background Information

How to Show Errors

Acting on Maps

Let Users Change the Level of Detail

Use Aggregates to Manage Problems

16 Types of Maps

Help Users Find Locations

Provide Methods, If Necessary, for Measuring Distances

Check Whether You Need to Offer Travel Times

Overlay Information on Locations

Show How Data Are Distributed Geographically

Use Either of Two Methods to Show Data

Statistical Maps Have Problems (But There Are Solutions)

Use the Right Method for the Data

Attach Data to Points When the Points Are Important

Show Distances When Distances Are Important

Use Isolines to Show Bands of Data

Distort Map Sizes to Show Relative Data Sizes

Use 3D Steps to Indicate Data Sizes

Use 3D Contours to Indicate Data Sizes

Use Whatever Works

Provide Decision Support and Analysis

GIS/MLS

Land Use

Customer Relationship Management (CRM)

Appendix A Web Application Design Worksheets

Page-to-Application Continuum

Look-and-feel Continuum

Appendix B Quality Testing

Accessibility

Internationalization

Data Input

Data Retrieval

Data Output

Graphs

Diagrams

Geographic Maps

Tests for Data

Appendix C Usability Testing

Overall

Data Input

Data Retrieval

Data Output

Graphs

Diagrams

Visualizations

Appendix D Design Checklists

Accessibility

Internationalization

Data Input

Data Output

Graphs

Diagrams

Geographic Maps

Glossary

References

Resources

Accessibility

Articles, Books, and White Papers

Color Vision

Effects of Aging

Equipment and Technologies

Software Platforms

Web Sites

Cascading Style Sheets

Web Sites

Books

Content Management Systems, Help, Error Management

Graphics and Cognitive Psychology

Internationalization

Articles, Newsletters, White Papers

Bibliographies

Books: Cultural Aspects of Internationalization

Books: Technical Aspects of Internationalization

Code Pages and Character Sets

Forums

Organizations

Quality and Usability Testing

Software and Data

Technical Documentation and Tutorials

Other

Web Application Framework

Books

Development (Not Look-and-Feel) Standards

Log File Analysis

Look-and-Feel Standards for Web Applications

Validators

Data Input

Auto-fill

Auto-complete

Data Capture

Date, Time, Address, and Number Standards and Internationalization

Dropdown Type-Ahead

Flash for Input Forms

Input Form Design

Syndication and Cross-Site Interactions

Data Retrieval

Articles and Web Sites

Data Output

Formatting

Paper Sizes

Printing

Software Reporting & Document Management Packages

Output Forms, XML, and Business

Typefaces

Graphs and Charts

Data Scraping

Software Packages

Statistical Analysis

Diagrams

Software and APIs

Cause-and-Effect Diagrams

Software Design Diagrams

Symbols and Standards

Organization Charts

Time-and-Activity Charts

Geographic Maps

General

Color Standards

Data Sources

Glossaries

Maps and Satellite Images

Online Newsletters and White Papers

Online Tutorials

Organizations

Projections

Software

Standards

Symbol Sets

TESTING

Quality Testing

Usability Testing

Biographies

Index