Web Application Design Patterns

Pawan Vora

• Publisher: Morgan Kaufmann
• Year: 2009
• ISBN:
  9780080921457
• Topic: Design
• Subtopic: UI/UX Design

Ever notice that—in spite of their pervasiveness—designing web applications is still challenging? While their benefits motivate their creation, there are no well-established guidelines for design. This often results in inconsistent behaviors and appearances, even among web applications created by the same company. Design patterns for web applications, similar in concept to those for web sites and software design, offer an effective solution. In Web Application Design Patterns, Pawan Vora documents design patterns for web applications by not only identifying design solutions for user interaction problems, but also by examining the rationale for their effectiveness, and by presenting how they should be applied.

• Design interfaces faster, with a better rationale for the solutions you choose.
• Learn from over more than 100 patterns, with extensive annotation on use and extension.
• Take a short-cut into understanding the industry with more than 500 full-color screenshots.

Chapter 1. Introduction

Introduction

Increasingly, software applications are built using web technologies and made accessible via web browsers (e.g., Internet Explorer, Firefox, Safari, and Opera). They are commonly referred to as web applications, or hosted applications—applications based on a software as a service (SaaS) model, ¹ or cloud computing. ² These web applications are different from more traditional web sites in that their emphasis is on allowing users to accomplish tasks such as send email, make travel reservations, find homes, pay bills, transfer money, buy products, send invitations, and so forth (Figure 1.1, Figure 1.2, Figure 1.3 and Figure 1.4). Web sites, on the other hand, are content oriented and are designed to facilitate browsing and consumption of rather static information (Figure 1.5).

¹SaaS is a software application delivery model where a software vendor develops a Web-native software application and hosts and operates it (either independently or through a third party) for use by customers over the Internet. Customers do not pay for owning the software; they subscribe to it and pay a regular subscription fee for using it.

²Web applications are considered to be a form of “cloud computing” because applications and files are hosted in the Internet “cloud,” which consists of thousands of computers and servers, all linked together and made accessible via the Internet.

Figure 1.1 Users can manage their email via the Web, as in this example from Yahoo! Mail, which is similar to its desktop counterparts such as Microsoft Outlook, Mozilla Thunderbird, and Eudora.

Figure 1.2 Users can search for travel options and make reservations using web applications like Expedia.

Figure 1.3 Users can find homes for sale, assess the value of a home, and see recent sales of homes in a neighborhood on sites such as Zillow.com.

Figure 1.4 Users can buy products on sites like Buy.com.

Figure 1.5 Ultragrain allows users to access static information about the company and its products on its web site (www.ultragram.com).

Benefits of Web Applications

The trend in favor of web applications is understandable in view of the benefits these applications offer, as described in the following sections (Baxley, 2003; Turnbull, 2006).

Ease of access

Typically, the only software users need to access and use web applications is a browser such as Internet Explorer, Firefox, Safari, and Opera. Users do not need to download and install separate software to use different web applications, although there are instances when they have to download helper applications or plug-in modules, such as Adobe Flash, Java, Microsoft Silverlight, and so forth, to access all or part of a web application.

Moreover, because both the application and information are stored on servers of the application's providers and not on users’ computers, users can access web applications from almost anywhere, as long as the computer they use has a web browser and Internet connectivity. This remote data storage also facilitates sharing and collaboration among users; for example, users can share bookmarks with applications such as Delicious (www.delicious.com) and Furl (www.furl.net), and remotely collaborate on the same documents using productivity applications such as Google Docs and Spreadsheets (docs.google.com) and Zoho (www.zoho.com).

Ease of deployment

Web applications are also popular with businesses and software developers because they can be developed, updated, and maintained remotely without requiring users to install (or reinstall) them. A related advantage of web applications is that they can perform as specified regardless of the operating system on users’ computers. They can be built once and deployed to almost any user, rather than creating separate versions of applications for Microsoft Windows, Macintosh OS X, GNU/Linux, and other operating systems.

“Trained” user base

The Web's growth and widespread adoption (from 16 million users in December 1995 to almost 1.5 billion users in June 2008, according to Internet World Stats; www.internetworldstats.com) has made the Web style of interaction familiar to a large number of users. Most Internet users can now be expected to be familiar with web browser terminology such as home, back, forward, bookmarks, hypertext links, submit buttons, and so forth. With this knowledge, and the fact that using web applications does not require elaborate installations, barriers to their use (or at least to try them out) are much lower. Further, it helps that many popular web applications are now available for free or have a free trial period.

Maturity and reliability of network connectivity and web technologies

An important roadblock for earlier web applications was unreliable network connectivity and significantly inconsistent web standards support—that is, HTML, CSS, and JavaScript—in web browsers. This is no longer the case. Adherence to web standards is improving, and browser inconsistencies that used to cause frustration for web developers are decreasing. In addition, network connectivity and broadband access is becoming more reliable, more ubiquitous, and cheaper to use. According to Website Optimization the use of broadband Internet access grew to 57 percent in US homes in March 2008 and was 90 percent among active Internet users (www.websiteoptimization.com/bw/0807/). This stable platform has also spawned the availability of visual development tools and frameworks to facilitate web application development.

Challenges to Designing Interfaces for Web Applications

Despite these benefits and increasing use, designing interfaces for web applications remains difficult. Challenges in creating usable interactions are mainly related to the underlying “loosely coupled” web architecture, a limited set of interactive controls natively supported in web browsers, and the lack of design guidance as to how user interactions should be implemented.

“Loosely coupled” web architecture

An important challenge faced by web application designers is caused by the “loosely coupled” or “stateless” nature of the Web. The Web's interaction paradigm is very simple: Users request web pages with web browsers, and servers respond by sending the requested pages to the browsers or informing users if there are problems retrieving those pages. However, once a user's request is satisfied by the web server, by sending the web page to the browser, the connection between the web server and the web browser is severed. When a user makes a subsequent request, the connection is established again with the server until the new web page is “reloaded” in the user's browser.

Each page reload, or page refresh, is marked by perceptible delays caused by the need to establish the connection, the server to respond to the request, the network to receive the page, and the browser to reload the page. This creates a jumpy and discontinuous experience for web application users. For example, a user browsing a hierarchical tree structure of items may have to wait after every click to expand, or collapse, a data node for the page to reload and see the expanded, or collapsed, view. Although this problem is addressed to a great extent by the use of scripting technologies such as JavaScript and Rich Internet Applications (see Chapter 8), it's an important user experience issue faced by most web applications.

Limited set of controls, or widgets, to support application design

In the current version of HTML (version 4.01), native support for controls is limited to text boxes, radio buttons, checkboxes, dropdown lists, and command or action buttons. It does not offer support for sophisticated interactions common in desktop applications such as spin controls, calendars, wizards, tabs, toolbars, drag-and-drop, floating palettes, dialog boxes, context-sensitive menus, and so for...