Web Application Design Patterns

Web Application Design Patterns

4.0 1
by Pawan Vora
     
 

View All Available Formats & Editions

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…  See more details below

Overview

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 and a web site for help, discussion, and a collection of additional patterns.

Read More

Editorial Reviews

From the Publisher
A generation has watched the internet work its way into every part of society as talented designers and developers have explored new user interfaces and as the most robust design patterns have emerged through the refining fire of hundreds of millions of users. Pawan Vora has done a wonderful service in capturing these best practices in Web Application Design Patterns. This book will be valuable to people ranging from those putting together their first website to those shaping corporate web experiences, and from practitioners to researchers benchmarking existing patterns as new interface paradigms are created. — Arnie Lund, User Experience Director, Microsoft

Web Application Design Patterns is a must read if you are in the business of designing web applications, or simply want to understand the elements of a well-designed web application. Pawan Vora has condensed best practice, along with research and his solid experience, to create a useful reference about designing web applications. Even if you skimmed the book and looked at the designs, it will spark creative design ideas. — David Dick, Technical Writer

Excellent! A very complete and exhaustive overview of patterns for web applications with many previously undocumented patterns. This book is written in very accessible way and will tell you (nearly) everything you need to know when designing web applications. A must-have for any designer! — Martijn van Welie, Pattern author, Philips Design

This is the type of book you'll want to read with your entire team and a flip chart, because every page will produce a list of actionable changes to the applications you're developing. Pawan Vora has produced an amazing catalogue of the essential patterns for designing today's web-based applications. — Jared Spool, Founding Principal, User Interface Engineering

Product Details

ISBN-13:
9780080921457
Publisher:
Elsevier Science
Publication date:
03/12/2009
Series:
Interactive Technologies
Sold by:
Barnes & Noble
Format:
NOOK Book
Pages:
448
File size:
24 MB
Note:
This product may take a few minutes to download.

Read an Excerpt

Web Application Design Patterns


By Pawan Vora

Morgan Kaufmann Publishers

Copyright © 2009 Elsevier Inc.
All right reserved.

ISBN: 978-0-08-092145-7


Chapter One

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 (Figures 1.1 through 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).

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 FIGURE 1.2 Users can search for travel options and make reservations using web applications (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 forth, which are available in even basic desktop applications. Although such controls can be developed using JavaScript and Cascading Style Sheets (CSS), a lack of inherent support for them has led to a variety of implementations with inconsistent presentations and interactions.

Inconsistent interaction approaches

Both the underlying technological architecture of the Web and the limited set of controls available make it difficult to create interactions for web applications comparable to desktop applications. Additionally, because most web applications are designed to be browser-agnostic, interactions and appearance cannot be simulated to match all operating systems; for example, tabs in the Macintosh OS X Aqua interface are visually quite different than the tabs in the Windows Vista interface (Figure 1.6).

Although the Web's relatively unrestricted development environment offers considerable creativity and flexibility to designers, the resulting diversity and inconsistency in user interfaces and interaction approaches in web applications is often challenging for users. This is due to the fact that users are faced with a variety of styles of interfaces and interactions, each with its own vocabulary of objects, actions, and visuals mixed together in the same application (see Tidwell, 2006). Figure 1.7 shows an example of changing the tab name in Zoho Notes (a note-taking web application like Microsoft OneNote) and Zoho Sheet (a worksheet web application like Microsoft Excel). To change the tab name in Zoho Notes, users must double-click the tab name and a Rename dialog pops up. In order to change the tab name in Zoho Sheet, users must right-click the tab and select the "Rename" option, which displays a pop-up window to allow users to change the tab name; double-clicking just selects the text.

To address these design challenges and accompanying usability problems, many corporations develop user interface design guidelines and style guides to manage the web application's "look and feel."

Applying design guidelines to develop usable web applications is not easy, however. Design guidelines are limited in their effectiveness, as they often advocate high-level principles (e.g., make system status visible; recognition is better than recall; prevent errors) or offer very specific guidance (e.g., align table headings to match the alignment of column data). On the other hand, design style guides focus on branding and visual design aspects and are usually specific to a platform (e.g., Macintosh OS X Aqua and Windows Vista) or to applications developed by a specific corporation (e.g., "Oracle Browser Look and Feel [BLAF] Guidelines," 2004), and do not necessarily provide detailed guidance for developing usable interactions.

Design guidelines and style guides are also quite lengthy and difficult to follow, because implementing one interaction requires user interface designers to be familiar with several sections within the document. For example, Apple's "Human Interface Guidelines" document is about 400 pages long, and to create a dialog with form controls, a designer would have to be familiar with several sections within "Part III: The Aqua Interface" (Figure 1.8), which has about 250 pages allocated to it.

Finally, design guidelines and style guides can also become too esoteric to be useful to those not familiar with human–computer interaction. This can limit their effectiveness as a means of communication among web application development team members, including customers, subject matter experts, clients, requirement analysts, software developers, product managers, and marketers, who are unlikely to be well-versed in human–computer interaction and usability.

Using design patterns addresses many of these concerns and can complement design guidelines and style guides to create better, and consistent, interface designs and improve usability of web applications.

DESIGN PATTERNS

The notion of patterns was introduced in the field of architecture by Christopher Alexander and his colleagues in A Pattern Language (Alexander et al., 1977) and The Timeless Way of Building (Alexander, 1979). They explained the nature of patterns as follows:

Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice. (Alexander et al., 1977, p. x)

Thus, patterns explicitly focus on the problem within the context of use and guide designers on when, how, and why the solution can be applied. Patterns are practical and describe instances of "good" design while embodying high-level principles and strategies.

Patterns have recently become attractive to user interface and software designers as well for their following benefits:

Proven design solutions and guidance for their use. Patterns identify real solutions and not abstract principles or guidelines. In addition, by making the context and problem explicit and summarizing the rationale for their effectiveness, patterns explain both how a problem can be solved and why the solution is appropriate for a particular context. However, because it's a generic "core" solution, its use can vary from one implementation to another without making it look "cookie-cutter" or discouraging creativity.

Improved design process. Identifying design patterns and cataloging them can help user interface designers increase productivity by reducing time spent "reinventing the wheel." Furthermore, if user interface components are built for patterns in the form of a design pattern library (see Chapter 13), designs can be developed, tested, and iterated rapidly, and can help shorten release cycles.

(Continues...)



Excerpted from Web Application Design Patterns by Pawan Vora Copyright © 2009 by Elsevier Inc. . Excerpted by permission of Morgan Kaufmann Publishers. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

Read More

Meet the Author

Pawan Vora is the founder and president of Alpha Cube, Inc., a user experience design consultancy focused on designing, reviewing, and evaluating user interfaces for software and web-based applications. He has been a user experience professional for more than 14 years and has designed user interfaces for a range of applications for business-to-consumer, business-to-business, consumer-to-consumer, and business-to-employee environments. He has published and conducted a number of tutorials and in-house training workshops on web site design, web application design, and design patterns in the United States and internationally.
Pawan has a Ph.D. and M.S. in industrial engineering from the State University of New York at Buffalo in addition to his bachelor’s degrees in production engineering and mechanical engineering from Victoria Jubilee Technical Institute in Mumbai, India.

Customer Reviews

Average Review:

Write a Review

and post it to your social network

     

Most Helpful Customer Reviews

See all customer reviews >

Web Application Design Patterns 4 out of 5 based on 0 ratings. 1 reviews.
David_Dick More than 1 year ago
From the Yahoo Home page (www.yahoo.com) I can see the weather for my area and the five day forecast, I can check email, send messages to friends, check the stock market, shop, and a whole lot more. Google maps allow me to search addresses and display maps that I can "zoom in" on to view details. It's all possible because of web applications. I have noticed, however, that some web applications are better designed than others. If Web 2.0 has any importance to you, you will appreciate the need for guidelines to create a satisfying user experience. Unfortunately, there are no guidelines to design web applications--until now. Web Application Design Patterns by Pawan Vora provides practical user interface design guidance for developing web applications by offering a "working" starting point that designers can adapt and refine to develop creative solutions. He condenses best practice methods, along with research and solid experience to create a useful reference about designing web applications. Web Application Design Patterns covers design patterns as they are used in forms, user authentication, main page, navigation, searching and filtering, and lists. The rest of the book covers Rich Internet Applications, social applications, internationalization, accessibility, visual design, and how to create pattern libraries with just the right amount of detail and examples. Each of the one hundred and twenty-two design patterns covered in this book are presented by name, the design problem(s) the pattern solves, the solution to the problem, the rationale for the design solution's effectiveness, a list of best practices describing the application of the solution and possible variations, and related design patterns. Unlike most books of this genre, he does not cover the history of the Internet and Web 2.0 as so many authors do. Instead, he describes the benefits and challenges of web applications, which prepared me to understand the rest of the book. I am impressed that Pawan Vora addressed the importance of including Help at all levels of interaction, internalization, and accessibility in sufficient detail, yet leaves me the opportunity to research them in greater detail. As a member of a society of technical communicators, I know that my colleagues will appreciate that somebody recognizes what they have been advocating for years. I am not disappointed that he does not compare and contrast the tools to create web applications. To do so would ignite a debate of why one tool is better than another, and there are just too many tools on the market. The book is rich with examples of web applications. Not only does he show examples of web applications of popular companies (i.e. Dell, Linkedin, Expedia, Adobe, and Netflix), he also shows web applications from lesser known companies (i.e. Kayak, Wufoo, and Basecamp) -- how he found them is a mystery to me. Web Application Design Patterns is a must read if you want to understand how web applications work and why they work the way they do.