Web Application Design Handbook

Best Practices for Web-Based Software

Susan Fowler, Victor Stanwick

• Publisher: Morgan Kaufmann
• Year: 2004
• Print ISBN: 9781558607521
• eBook ISBN: 9780080481708
• Topic: Computer Science
• Subtopic: Computer Science General
• Index: Computer Science

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.

CHAPTER 1

What Is a Web Application?

This chapter attempts to answer two questions:

• What is the difference between a web page and a web application?

• Is your program a web page or a web application?

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

Are any of these web sites “web applications”?

• Information-only web sites such as “Conference Presentation Judo” (Figure 1-1). (No, but it’s still very good.)

FIGURE 1-1 Is this an application?¹

• A fill-in form such as the one on ehealthinsurance.com (Figure 1-2). (Maybe.)

FIGURE 1-2 How about this?²

• A web applet such as the Morningstar stock comparison tool (Figure 1-3). (Maybe.)

FIGURE 1-3 Maybe this?³

• A back-end mortgage lending application such as Palisades Technology Partners’ Eclipse (Figure 1-4), accessed via an intranet or extranet rather than the Internet or the company network. (Definitely.)

FIGURE 1-4 This definitely is.⁴

• An add-on, cross-branded miniapplication embedded in a web site. “Cross-branding” occurs when one site uses an application from another company to fill a specialized niche—for example, bill paying is handle

by PayPal on eBay; university sites use Google or Yahoo to run their internal searches. (Maybe.)

• A business application such as Dreamweaver that is written in HTML or Java, is installed on a desktop computer, and that looks and acts no differently from an application written in C++. (Definitely.)

To complicate matters, most web sites have multiple subapplications embedded within them. For example, LLBean.com contains search applications, information-only pages, an order form, cross-branding with Park Search^sm, and a credit card application page (Figure 1-5).

FIGURE 1-5 LLBean.com with an embedded National Park Search application.

Figure 1-5 seems to indicate that a web site can contain many small programs without necessarily being a web application. However, there is an explanation for this paradox in Alan Cooper’s notion of “posture.” These ancillary programs have different postures—daemonic, parasitic, and transient.

Applications that do not normally interact with the user are “daemonic” programs. They serve quietly and invisibly in the background without much need for human intervention. A typical daemonic program would be a process that checks the server every 15 minutes for new alarms or alerts.

Parasitic applications are continuously present but perform only supporting roles. For example, a parasite may monitor the amount of system resources available, put a clock in every program’s caption bar, or show how much memory is free. They are physically small and are superimposed on other applications.

A transient application does only one simple function. It comes when needed, does its job, then leaves, letting the user continue with his or her normal activity. The comparison chart in Figure 1-3 is an example of a transient application. Another transient is the calendar button next to Date of Birth on Figure 1-4.

The fourth type of posture is “sovereign.” Cooper describes a sovereign application as the only one on the screen, monopolizing the user’s attention for long periods of time. Users tend to keep them up and running continously. Figure 1-4 is a good example of a sovereign application (Cooper and Reimann 2003, 103–116).

In general, however, the examples seem to indicate that a web application mostly lets you do and save something, whereas a web page mostly provides information. Applications and pages are similar, however, in that they both are graphical, both show logos and other corporate identity information, and both are information-rich.

So, although the examples point out some similarities and differences between web pages and web applications, the division between the two is still not clear. In an attempt to find a simple answer, here is another question: Can you separate web applications from web sites by the development platform?

What Difference Does the Platform Make?

Java, JavaScript, ActiveX, Flash, and similar development options let developers write programs in more or less traditional ways, and the difference may only be in how the application is delivered—via the web rather than on installation CDs or over the corporate network.

However, if your programs must be written using HTML, DHTML, XML, or other W3C standards, your programming platform will be significantly different from standard client—server and desktop platforms. Here are some of the most irritating differences.

HTML controls aren’t “strong” enough. HTML buttons and boxes are flaky, or they don’t have the flexibility of their Windows, Macintosh, etc.,

counterparts. If they are flexible, they break down on certain browsers or in different versions of the same browser.

There aren’t enough prebuilt controls and code segments. This will come in time, however—when desktop-program developers were first porting applications from DOS to Windows, they had the same problem.

Some of the rules for window design just can’t be followed. The one hard-and-fastrule in window applications is that you use menus for actions on windows and buttons for actions on dialog b...

Table of contents

• Cover image
• Title page
• Table of Contents
• Critical Acclaim For WEB APPLICATION DESIGN HANDBOOK
• Endorsements Continued
• The Morgan Kaufmann Series in Interactive Technologies
• Copyright
• PREFACE
• Chapter 1: What Is a Web Application?
• Chapter 2: The Browser Framework
• Chapter 3: Data Input: Forms
• Chapter 4: Data Input: Lists
• Chapter 5: Data Retrieval: Search
• Chapter 6: Data Retrieval: Filtering and Browsing
• Chapter 7: Data Output: Reports
• Chapter 8: Data Output: Printed Forms
• Chapter 9: Interacting with Output
• Chapter 10: Designing Graphs and Charts
• Chapter 11: Graph Types Based on Use
• Chapter 12: Designing Diagrams
• Chapter 13: Diagram Types
• Chapter 14: Designing Geographic Maps
• Chapter 15: Interacting with Geographic Maps
• Chapter 16: Types of Maps
• Appendix A: Web Application Design Worksheets
• Appendix B: Quality Testing
• Appendix C: Usability Testing
• Appendix D: Design Checklists
• Glossary
• REFERENCES
• RESOURCES
• BIOGRAPHIES
• INDEX