Chapter 2: Forms. Forms are a distinguishing characteristic of web applications. It is through form elements such as text boxes, dropdown menus, radio buttons, checkboxes, and others that users provide information and interact with web applications. This chapter discusses patterns related to designing forms for web applications, to ensure that filling out forms is not cumbersome and that they help users accomplish their goals, including CLEAR BENEFITS, SHORT FORMS, LOGICAL GROUPING, LABEL ALIGNMENT, REQUIRED FIELD INDICATORS, SMART DEFAULTS, FORGIVING FORMAT, KEYBOARD NAVIGATION, INPUT HINTS/PROMPTS, ACTION BUTTONS, and ERROR MESSAGES.
Chapter 3: User Authentication. Web applications enable one-to-one interaction with users and store user-specific information. This requires that users create an account and access it using a unique set of credentials. This chapter describes design patterns related to accessing and exiting web applications, including REGISTRATION, CAPTCHA, LOG IN, LOG OUT, AUTOMATIC LOGOUT, and FORGOT USERNAME/PASSWORD.
Chapter 4: Application Main Page. Once users have logged in to the application, an important question for designers is what users should see or which page they should be taken to. This chapter discusses design patterns designers should consider as they take users to that “main” application page, including INBOX, CONTROL PANEL, DASHBOARD, PORTAL, PERSONLIZATION, CUSTOMIZATION, and BLANK SLATE.
Chapter 5: Navigation. Navigation is how users experience web applications. When designed effectively, navigation becomes transparent and users are able to accomplish goals quickly and without unnecessary backtracking.
This chapter focuses on design patterns for navigation systems, including PRIMARY NAVIGATION, SECONDARY NAVIGATION, UTILITY NAVIGA-TION, FACETED NAVIGATION, SUPPLEMENTARY NAVIGATION, TAG CLOUDS, BREADCRUMBS, and WIZARD.
Chapter 6: Searching and Filtering. For most web applications, accessing information using only navigation systems can become cumbersome and compromise usability. Therefore, information within web applications is made searchable to get users to their desired items quickly and efficiently. Unless search terms are very specific, users are likely to be faced with a large number of results. Designers must offer users options to narrow down such a result list to a manageable set of choices by providing filtering mechanisms. This chapter discusses design patterns related to searching and filtering in web applications, including SIMPLE SEARCH, PARAMETRIC SEARCH, ADVANCED SEARCH, SEARCH TIPS, SEARCH RESULTS, SORTING, PAGINATION, CONTINUOUS SCROLLING, FILTERING, FACETED SEARCH, and SAVED SEARCHES.
Chapter 7: Lists. Lists are used to present a collection of items to users. Depending on the nature of items in the collection, the presentation approach varies. This chapter discusses design patterns for different types of lists, including SIMPLE LIST, TABULAR LIST, HIERARCHICAL LIST, EVENT LIST, TIMELINES, IMAGE LIST/GRID, MAPS, LIST ACTIONS, and LIST UTILITY FUNCTIONS.
Chapter 8: Rich Internet Applications. Rich Internet Applications (RIAs) can deliver responsiveness and interactivity comparable to desktop applications because users need not wait for pages to refresh for basic data and layouts to update; therefore, their actions' results can be seen immediately. This chapter discusses commonly used RIA design patterns, including RICH-TEXT EDITOR, RICH FORM, AUTOSUGGEST/AUTOCOMPLETION, EDIT-IN-PLACE, OVERVIEW-PLUS-DETAIL, DYNAMIC QUERYING, LIVE PREVIEW, DRAG-AND-DROP, SLIDER, ANIMATIONS/TRANSITIONS, DELAY/PROGRESS INDICATOR, SPOTLIGHT/YELLOW-FADE, and CAROUSEL.
Chapter 9: Social Applications. A recent trend in web applications is the development of social applications, which not only encourage users to contribute and share content (e.g., photos, videos, bookmarks, and so forth), but also promote interaction and help build communities. This chapter describes design patterns that have emerged from such social applications, including ADD/UPLOAD CONTENT, TAGGING, RATING, REVIEWS, VOTE TO PROMOTE, USER PROFILE, REPUTATION, DISCOVER NETWORK MEMBERS, FRIEND LIST, GROUPS/SPECIAL INTEREST COMMUNITY, MESSAGING, PRESENCE INDICATOR, SHARING, and COLLABORATION.
Chapter 10: Internationalization. Internationalizing web applications is an important step toward localization—that is, adapting them to a specific region
or language. It helps reduce the effort required for localization later and eliminates the need to develop region- and language-specific versions of applications. This chapter discusses design patterns that help incorporate necessary flexibility and adaptability in web applications during initial design stages, including EXTENSIBLE DESIGN, DATE FORMAT, TIME FORMAT, NUMBER FORMAT, CURRENCY AND CURRENCY FORMAT, GLOBAL GATEWAY, and LANGUAGE SELECTOR.
Chapter 11: Accessibility. Design patterns that are discussed in this chapter help make web applications accessible and support recommendations and regulations for web accessibility, such as W3C's Web Content Accessibility Guidelines and Section 508 of the Rehabilitation Act; they include PROGRESSIVE ENHANCEMENT, SEMANTIC STRUCTURE, UNOBTRUSIVE STYLE SHEETS, UNOBTRUSIVE JAVASCRIPT, ACCESSIBLE FORMS, ACCESSIBLE IMAGES, ACCESSIBLE TABLES, ACCESSIBLE NAVIGATION, and ACCESSIBLE ALTERNATIVE.
Chapter 12: Visual Design. The visual design of web applications plays an important role in how usable an application is perceived and how credible it is considered by its users. In this chapter the emphasis is on design patterns that influence the overall look and feel of web applications, including LIQUID-WIDTH LAYOUT, FIXED-WIDTH LAYOUT, PROGRESSIVE LAYOUT, GRID STRUCTURE, VISUAL HIERARCHY, HIGHLIGHT, and ICONS.
Chapter 13: Pattern Libraries. Despite the popularity of patterns and pattern libraries, currently there is no consensus of how patterns should be documented, maintained, and shared with others. Therefore, this chapter presents a pattern library as a pattern and identifies its core elements, as well as offers best practices for its development.
Web Appendix: Help. Despite adherence to basic design principles, processes, and patterns that create an interface that users can learn easily and use efficiently, it is necessary to provide help and make it available at all levels of user interaction. The appendix, posted at
www.elsevierdirect.com/9780123742650, lists design patterns related to providing help in web applications, including CONTEXTUAL HELP, FREQUENTLY ASKED QUESTIONS, APPLICATION HELP, GUIDED TOURS, HELP WIZARDS, HELP COMMUNITY, and CLICK-TO-CHAT.
This book includes many web application screenshots taken over a period of nine months. Although a majority of them were valid as of November 2008, a few may have changed after this book went to press. This is expected, since companies building web applications change features, introduce new services, and discontinue older interfaces.