O'Reilly logo

Designing Web Interfaces by Theresa Neil, Bill Scott

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

What This Book Is About

This book is not about information architecture, although you will find information architecture principles alluded to throughout it. And this book is also not about visual design, although you will find that the backdrop of good visual design is assumed throughout.

This book is about interaction design: specifically, interaction design on the Web. And even more specifically, about rich interaction design on the Web. It is a distillation of best practices, patterns, and principles for creating a rich experience unique to the Web.

By unique I mean that the Web comes with its own context. It is not the desktop. And while over time the lines between desktop and Web blur more and more, there is still a unique aspect to creating rich interactions on the Web. Editing content directly on the page (e.g., In-Page Editing, as we discuss in Chapter 1) borrows heavily from the desktop—but has its own unique flavor when applied to a web page. This book explores these unique rich interactions as set of design patterns in the context of a few key design principles.

Design Patterns

What do we mean by design patterns?

Christopher Alexander coined the term "patterns" in his seminal work A Pattern Language: Towns, Buildings, Construction (Oxford University Press) to catalog common architectural solutions to human activities. He described a pattern as:

...a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem...

Patterns were later applied to software in the book Design Patterns: Elements of Reusable Object-Oriented Software (Addison-Wesley), by the Gang of Four (Erich Gamma, Richard Helm, Ralph Johnson, and John M. Vlissides). A few years later design patterns were extended to the realm of user interface design.[3]

It is the latter form of patterns that we present in this book: interaction design patterns. You will find 75+ patterns illustrating the most common techniques used for rich web interaction. Each design pattern is illustrated by examples from various websites. Since the patterns described are interactive, we use a generous amount of figures to explain the concept. We tease out the nuances for a given solution as well as identify patterns to be avoided (anti-patterns). Best practice sections call out suggestions along the way.

The patterns are presented in the context of six design principles, which form the framework for the book:

Part I

As Alan Cooper states: "Where there is output, let there be input." This is the principle of direct manipulation. For example, instead of editing content on a separate page, do it directly in context. Chapters 1–3 in this principle include patterns for In-Page Editing, Drag and Drop, and Direct Selection.

Part II

While working on a redesign of Yahoo! 360 the designer, Ericson deJesus, used the phrase "light footprint" to describe the need to reduce the effort required to interact with the site. A primary way to create a light footprint is through the use of Contextual Tools. This principle explores the various patterns for these in Chapter 4, Contextual Tools.

Part III

The page refresh is disruptive to the user's mental flow. Instead of assuming a page refresh for every action, we can get back to modeling the user's process. We can decide intelligently when to keep the user on the page. Ways to overlay information or provide the information in the page flow are discussed in Chapters 5 and 6, Overlays and Inlays, respectively. Revealing dynamic content is discussed in Chapter 7, Virtual Pages. In the last chapter of this section, Chapter 8, we discuss Process Flow, where instead of moving from page to page, we can create in-page flows.

Part IV

Discoverability is one of the primary challenges for rich interaction on the Web. A feature is useless if users don't discover it. A key way to improve discoverability is to provide invitations. Invitations cue the user to the next level of interaction. This section, including Chapters 9 and 10, looks at Static Invitations, those offered statically on the page, and Dynamic Invitations, those that come into play in response to the user.

Part V

Animations, cinematic effects, and various other types of visual transitions can be powerful techniques. We explore engagement and communication in Chapter 11, looking at a set of the most common Transitional Patterns, and Chapter 12 is devoted to the Purpose of Transitions. A number of anti-patterns are explored as well.

Part VI

A responsive interface is an intelligent interface. This principle explores how to make a rich experience by using lively responses. In Chapter 13, a set of Lookup Patterns is explored, including Live Search, Live Suggest, Refining Search, and Auto Complete. In Chapter 14, we look at a set of Feedback Patterns, including Live Previews, Progressive Disclosure, Progress Indication, and Periodic Refresh.

[3] See works such as Jenifer Tidwell's Designing Interfaces: Patterns for Effective Interaction Design (O'Reilly) and the pattern library of Martijn van Welie (http://www.welie.com/).

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required