Book Review: Designing Web Interfaces

Book Reviews

Johnny's reviews of great UX books.

See all posts

Related posts:


Design patterns are among the most underrated tools in the world of interaction designers. And that’s not because they are difficult to apply, but mainly due to the fact that designer are stubborn. We want to come up with all the solutions ourselves. But why? If you use patterns you save time and money, and you are more sure that your product will be understood by it’s users. Fortunately there are still believers, and they even wrote a book for us.

In 2005 Jenifer Tidwell published a book called Designing Interfaces, which can be considered as being the mother of the title I’m currently reviewing. The book gave us a solid overview of the most common design patterns around. It served as a superb handbook for any user interface designer. But as we all know, the digital world evolves in a very rapid way… new technologies aris and new solutions and patterns must be developed. So it isn’t strange that Bill Scott and Theresa Neil decided to publish a book full of great web patterns. And that’s the book we’re going to review now: Designing Web Interfaces.

Contents of the book

While Designing Interfaces had a very ‘physical’ structure (chapters with headers, navigation, footers and forms), Designing Web Interfaces has a different approach. It uses principles to structure the different patterns. With this method the authors learn us the main principles that are (in their mind) important to design web interfaces. So let’s take a look at the different principles and content of the book:

Make It Direct

In this chapter it’s all about making it clear for users when they can change something on a page. How do you make a page visually appealing and still make it very clear what can and can’t be edited?
Chapters: in-page editing, drag and drop, direct selection

Keep It Leightweight

Websites are becoming more like software by the day. With this principle you learn to keep actions simple: provide sufficient feedback, but also keep it simple.
Chapters: contextual tools

Stay on the Page

Not every click and action should result in loading a new page. Sometimes you only want to refresh part of a page (like with e-mail on Gmail) or you don’t want secondary information to cause users to leave a page (so you use overlays). This principle and the chapters give you great tips when and how to do that.
Chapters: overlays, inlays, virtual pages, process flow

Provide an Invitation

With websites becoming more complex you need every space you can use to provide good contextual information and support. In this principle you learn how to help visitors to discover the possibilities on a site, via inviations. For me this is one of the more interesting new ways of learning people how to use your site, by giving them a live tour through your site/page.
Chapters: static invitations, dynamic invitations

Use Transitions

In this chapter you get a series of patterns on how you can use transition to tell the right story, stay in a flow and get the correct attention.
Chapters: transitional patterns, purpose of transitions

React Immediately

You see it ever more often, getting suggestions in search boxes while you are typing. This, and other direct feedback, are becoming the standard. People expect nothing less from website than direct feedback. In two chapters the book shows us a series of lookup and feedback patterns that could help you fulfil many expectations.
Chapters: lookup patterns, feedback patterns

Conclusion

What I really liked about this book is the detailed, but interesting to read, way that the patterns are described… Instead of just showing us the best way to do it, the book manages to give good context. In some cases it shows different appliances of a certain pattern, describing the advantages and disadvantages in detail. This is really usable material for interaction designers, because it makes us aware of the necessary detail. A lot of designers will just design a page and describe the interaction in general, leaving it to the programmer to come up with the best solution. But it’s not just his responsibility, but (also) that of the interaction designer. We must understand how a user will respond, and patterns and facts (like: making something respond after dragging for 3 pixels makes something feel smoother than after 5+ pixels) help us do that.

So, in my opinion, every interaction designer should have a book (or online source) with design patterns within reach. It helps making decisions faster, and saves time for the real innovation.

Book details
Designing Web Interfaces
author: Bill Scott, Theresa Neil
published: O’Reilly, 2009
details: 296 pages, softcover

Jeroen van Geel

Jeroen van Geel is founder/chief kahuna of Johnny Holland and the interaction director at Fabrique [brands, design & interaction], a Dutch multidisciplinary design agency. You can follow him on Twitter via @jeroenvangeel.

3 comments on this article

  1. Being Devils advocate here, but isn’t a lot of these patterns common sense to most interaction designers? And what advantage does this book have over pattern libraries currently out there?

    I am inclined to think this book (and perhaps many other Interaction Design books similar to this one) are more suited as tools to “win arguments”, in other words: illustrate to whoever is in charge, but is not an interaction designer, that what you are suggesting is actually a good idea.

  2. Vicky Teinaki on

    Common sense is a funny thing, particularly when it comes to interactions. For example, after NYTimes tech columnist David Pogue wrote a post about ‘Tech Tips for the Basic User’ and was flooded with tips, he wrote: “Many readers chimed in with other “basics” that they assumed every computer user knew–but soon discovered that what’s common knowledge isn’t the same as universal knowledge.”
    (Link: http://pogue.blogs.nytimes.com/2008/10/02/tech-tips-for-the-basic-computer-user/)
    That’s relevant in the IxD profession, as in my opinion we still don’t have that much literature of the basics. So yes, it’s common sense, but it has to be explicitly made common through books and the like. Then we can agree about it and move on.
    That said, I do agree with the comment about these books being good argument tools!

  3. Theresa on

    I actually refer to our book a couple of times a week to look at examples of how different web applications have approached a particular interaction. I don’t use it to “win arguments” with my clients or other designers I collaborate with, but as a catalog of decent examples for reference.

    I don’t think many developers, product managers, marketing folks, and QA people have reference books for current interaction design concepts (this is just my observation). For me personally, the book helps organize the interactions into patterns with recent examples, so we can use common terminology and live examples in our design sessions.

    Explore the book and all of the illustrations at http://www.designingwebinterfaces.com and we are posting fresh content and examples at http://www.designingwebinterfaces.com/posts .