Designing Web Interfaces: Principles and Patterns for Rich Interactions

One Minute Bottom Line

"Designing Web Interfaces" is a gorgeous book containing a gold mine for anyone designing web based applications, and I highly recommend it. It’s not quite as useful for beginning web developers though because there’s no sample code available. This well written book is easy to follow, and the authors have done an excellent job of delivering numerous patterns for doing the kind of things that a top-notch application should do. They tell you when it makes sense to use each pattern, and warn you about known anti-patterns so you can avoid making those mistakes.

Review

"Designing Web Interfaces" is a very visual book, which makes sense considering the subject. However that also makes it difficult to do justice to it in a review like this one. So, I’m going to keep this section short and recommend you go to the book’s website (http://designingwebinterfaces.com/) and look around, or go to amazon.com and “take a look inside” at part of chapter one. Better yet stop in at your favorite bookstore, pick up a copy and leaf through it. Odds are you'll be taking it home with you.

Bill Scott and Theresa Neil have organized their ideas and patterns under six basic principles, and each one gets a two page overview at the beginning of its own section of the book.

Principle one, “Make It Direct,” refers to the idea of direct manipulation and is covered by chapters one through three. Chapter one covers patterns for editing content without leaving the page. Chapter two is one of the longest chapters in the book and is focused on patterns for supporting Drag and Drop capability. Chapter three is about Direct Selection; the most common example of this is deleting a file by dragging an icon representing the file and dropping it onto an icon shaped like a trashcan or recycle bin.

Principle two is “Keep It Lightweight”, and it reminds us to make it easy for the user to interact with the site. Chapter four presents patterns for ensuring the tools our users need are easily found when they want them; they appear in context. A simple example is the “digg it” button used by Digg.

Principle three is to “Stay on the Page.” This is important to us because a page refresh is a disruption in the flow of the user’s interaction with the web site. Almost anything you can do to keep from refreshing the whole page will improve the user's experience. Chapters five looks at ways of overlaying new information on the existing page. Chapter six shows you different ways to display new information on the existing page; generally by shifting the existing content to create room for it. Chapter seven provides patterns for virtually extending the size of the page, and the patterns in chapter eight show you how to walk the user through a multi-page process without leaving the current page.

The fourth Principle is to “Provide an Invitation” to the user. In this case invitation means letting the user know that not only they can do something (what user experience people call affordances) but possibly leading them through the necessary steps. Chapter nine focuses on static invitations, like a message that says “Sign up now” with an arrow pointing to the "Sign up" button. The focus of chapter ten is on dynamic invitations, these are invitations that appear based on what the user is doing. An example of this could be a tool-tip bubble appearing when the user moves their mouse over an image.

Principle five is to “Use Transitions” to improve the user’s experience. While a page refresh breaks the user’s mental flow, judicious use of transitions from one state to another can help keep them engaged. Chapter eleven introduces several types of transitions like Brighten and Dim, Expand and Collapse, and Animation. Chapter twelve shows you how and why to use this power to create better user experiences

Principle six reminds us to “React Immediately” so the user sees that the program knows they did something. Imagine how frustrating it is for a user to click something that looks like a button and not see anything change?  No animation showing it depressing and rising back up, no reaction from the application of any kind? The next two chapters address patterns to prevent that frustration.

Chapter thirteen is about patterns for providing immediate feedback when doing a search or retrieving some kind of information. Chapter fourteen covers patterns for providing feedback during a long process so the user knows that something is happening, or so they know how far they’ve gone and how much farther they have to go before it’s done.

There’s a companion web site at http://designingwebinterfaces.com/ where you can get a feel for what’s in the book by wandering through the “Explore the Book” pages, and there’s presentations and articles available on the “Resources” page.

One interesting things I haven’t seen before is that all the diagrams and figures in the book are available on Flickr and are available for use in your own presentations under a Creative Commons license.