Designing Web Interfaces

by Andy Polaine on July 21, 2009

in 2D, Interactive, Thought

Designing Web Interfaces - Cover

Review by David Little

Theresa Neil’s and Bill Scott’s Designing Web Interfaces (Amazon: US|CA|UK|DE) catalogues and describes seventy five design patterns – solutions to common problems – for building rich interactions on the Web. Not a book about visual design or particular technologies but rather about the whys and hows of interaction design for the Web; or maybe more simply, standards for Web interaction:

This book is about interaction design: specifically, interaction design on the Web… It is a distillation of practices, patterns and principles for creating a rich experience unique to the Web … The Web comes with its own context. It is not the desktop.

Scott and Neil have built their library of patterns on the back of many years’ experience; both as user experience specialists at Sabre, Scott’s involvement with the Yahoo! Design Pattern Library and Netflix and Neil’s work as a interface design consultant.

In just under three hundred pages the patterns are demonstrated and explained in terms of higher-level design principles. Although many of these principles relate to those long-established in the field of Human-Computer Interaction (HCI), readers need no background in it or interaction design to understand them. Any HCI jargon (e.g. “affordance”) is clearly explained and used only to aid understanding of a principle or pattern.

The book centres on six principles: “Make it direct”, “Keep it lightweight”, “Stay on the page”, “Provide an invitation”, “Use transitions” and “React immediately”. The principles are further broken down into a series of more specific examples which in turn contain a number of patterns. 

Many of these patterns will be familiar to those who use the Web on a regular basis, although one might be sometimes hard-pushed to describe them with snappy titles as in the book, e.g. “detail overlay”, “affordance invitation” or “multi-field inline edit”. Unsurprisingly, all patterns come with their own challenges and possibilities of abuse which can lead to ”anti-patterns”, to use Scott and Neil’s term.

Each pattern is described in some detail, alongside colour screenshots (also available online via the book’s Flickr stream). These are followed by discussions of the considerations of using the technique and tips and summary lists of best practices. Even interaction styles which may seem on the surface reasonably straightforward are surprisingly complex when considered in-depth. For instance, the chapter on “Drag and drop” calculates that there are ninety “interesting moments” or states at which interaction is possible, ranging from what happens on page load, mouse hover to dragging to a valid or invalid target, or accepting or rejecting the drop. 

Designing Web Interfaces

(Click to enlarge)

Of course, if just one thing has been demonstrated in the Web’s history, it’s that if something terrible can be done, it certainly will be. The book’s anti-patterns demonstrate how to get interaction wrong, from classic examples such as “mystery meat” navigation where icons provide no obvious clues as to their functions, through to “mouse traps” where overlays get accidentally triggered, obscuring content and infuriating users, and my favourites, “needless fanfare” where interface elements are announced with pointless and pretentious animations and “animation gone wild” which speaks for itself (see the Nasa website for a bewildering example of this); as Neil and Scott state,

The primary purpose of transitions is to communicate, and no amount of graphic trickery will make a noisy interface compelling.

Whilst the book is detailed, well laid-out and written in a clear, engaging and often witty style, it suffers a little from its organisation. It is certainly useful to describe design principles; after all these stay more constant than particular interaction styles. But grouping the patterns by principle makes the book a little difficult to navigate. Although in essence a reference work, it is difficult to dip in and out of. Instead the reader will benefit more from reading chapters in their entirety and many principles and patterns cross-reference others. 

I found the index more useful than the table of contents, although even that was not without its problems. For instance, the word “form” is not referenced, although patterns relating to forms are present throughout the book. Designers will also need to learn the vocabulary of interaction styles: knowing that a horizontally scrolling image gallery is called a carousel and the difference between an overlay and an inlay will certainly help in tracking down a particular pattern.

Its own Information architecture aside, the book is well designed: clearly aimed more at designers than a typical O’Reilly tech title, it features colour coding of principles, clear typography and many colour images. Some of the images are a little small and, as they try to demonstrate transitional effects, occasionally confusing. However, the book’s Flickr stream provides access to larger images and videos of transitions. 

Designing Web Interfaces

(Click to enlarge)

The book is also supported by its own website which allows for more interactive browsing of the patterns, alongside an actively maintained blog with entries by the book’s authors on further patterns and anti-patterns.

Hinted at, but not discussed in any depth in the book is the fact that all of the patterns rely on the use of technologies such as Javascript, Flash or Silverlight, all of which come with an accessibility overhead. Also, whether an interaction style is truly relevant to your website will only be revealed by testing it with your site’s users.

Designing Web Interfaces provides clarification on key Web interaction styles and their context. Pretty much indispensable for anyone involved in designing or developing websites, it is of course not a guarantee of success if used on its own.

Rating: ★★★★☆ 

Designing Web Interfaces is published by O’Reilly Media. You can also find it on Amazon (US|CA|UK|DE) or in The Designer’s Review of Books store.

About the author

David Little is a Web user interface designer and developer, based in London. He blogs about Web UI matters and other more random topics at Littled.net, and occasionally tweets at @djlittle.

Jonathan Abbett July 28, 2009 at 1:36 am

That link ought to be http://www.nasa.gov — doesn’t work without the “www”. I don’t see any animation on their homepage, however.

Editor July 28, 2009 at 6:50 am

Thanks Jonathan. I’ll fix that up and also ask David what he meant by it in the review. I’ve got a feeling NASA might have redesigned their site recently because of the Moon landing anniversary.

David Little July 28, 2009 at 9:26 am

The kind of animation that was being referred to is transitional animation (rather than in the sense of the kind provided in a Flash etc. movie). For instance, if you mouse over the top navigation links, “News”, “Missions”, “Multimedia” etc., you get an animated pull-out menu — move your mouse over all the headings in turn and you can start feeling a little sea-sick — watch one slide down as another slides up!

Also, if you move your mouse over the three stories on the home page (indicated with a red arrow), the stories slide out without needing to be activated with a mouse click etc.

I have to say I was looking at the site in Firefox (Mac and PC) — I can’t categorically say if this occurs on all browsers. It was the example referred to in the book however, so I assume that the behaviour is common across various browsers.

Hope this clears this up — of course, some people may like this effect!

Jonathan Abbett July 28, 2009 at 1:42 pm

Thanks for the clarification.

Now that I’ve tried them, the main thing that gets me about the menus is their speed — I don’t like having to wait for my navigation. The fact that they’re animated is only a secondary concern.

I have to disagree about the accordion of stories. I think it’s a fine way to maximize limited “above the fold” screen area. If the accordion weren’t smoothly animated, and an onhover caused a jerky shift from one article to another, the user experience would likely degrade.

In and of itself, animation has no value, positive or negative. Employed expertly (and sparingly), it can give UIs a satisfying, tactile feel. I’m confident the author would agree, since I believe the point is about excessive animation.

That said, certainly we could find far more “bewildering” examples of excessive animation than NASA.gov, which, for a government website, is halfway decent.

Editor July 28, 2009 at 2:37 pm

You mean like this one?