Designing Web Interfaces: Principles and Patterns for Rich Interactions

Designing Web Interfaces: Principles and Patterns for Rich Interactions
Authors
Bill Scott, Theresa Neil
ISBN
0596516258
Published
01 Jul 2009
Purchase online
amazon.com

Want to learn how to create great user experiences on today's Web? In this book, UI experts Bill Scott and Theresa Neil present more than 75 design patterns for building web interfaces that provide rich interaction. Distilled from the authors' years of experience at Sabre, Yahoo!, and Netflix, these best practices are grouped into six key principles to help you take advantage of the web technologies available today.

Page 2 of 2
  1. Editorial Reviews
  2. Customer Reviews

Customer Reviews

Frank Mitch said
Reviewer: Dave Roman, GCPCUG member


This book has 14 chapters, but they are only sub divisions of a different type of classification. The book is about interaction design on the web. They have divided this book up into six principles and since they took this approach I am going to review the principles.

Principle One - Make It Direct
What does that mean? This is covered in three chapters. They discuss direct in-page editing of content, moving objects around directly with the mouse (drag and drop), and applying actions to directly selected objects.

Principle Two - Keep It Lightweight
This area discusses Contextual Tools

Principle Three - Stay on the Page
Here they discuss ways to keep the user on the page including overlays, Inlays, Virtual Pages and Process Flow

Principal Four - Provide an Invitation
This area talks about providing an invitation to the user in a number of forms. Static invitations are offered on the page using visual techniques to invite interaction. Dynamic invitations come into play in response to what and where the user is interacting.

Principal Five - Use Transitions
This area could be entitled "Pay Attention" because it IS about getting your attention using movement and transition. They discuss transition patterns like "brighten and dim", "expand and collapse", "Self-Healing Fade", "Animation" and "spotlight".

Then they go to the purpose of transition. What is the reason for using these powerful effects and where they are most effective.

Principle Six - React Immediately
This is all about what happens immediately after each interaction with the system. There should be an immediate reaction paired with the user's action. The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time and is called Latency Reduction.

They first talk about lookup patterns and then feedback patterns.

The web is constantly changing, so the authors provide sites to keep you up to date, one of which is http://designingwebinterfaces.com

It's a long book, but does a good job explaining what takes place in an interactive website. This is not a coding book, but more like a combination of the psychology of a web site and how to use this knowledge to make it easier for the user and also make it easier to buy a product or find the information they are looking for.

Grimmy said
Provides a good overview of the many interface options in use today. However, accessibility is generally not addressed, so you would have to assess this yourself for each option. Also, the screenshots could have been marked up to show the steps in the interactions more clearly, rather than just successive screenshots.

David Pepper said
Scott is a/the genius behind Netflix and Yahoo!'s interfaces, so I got this book to figure out how to make my web interface programming work more professional.

However, much of what I've read here goes against the spirit of the design I was taught to do in grad school. For example, Netflix/Yahoo! make complex designs that are highly functional for expert users, and at-least reasonably usable for intermediate users. These designs feature transitions which use fades, transparent controls which only become visible when a user hovers, and dueling interfaces which allow power-users to move at a different speed than weaker users, etc.

By comparison, my grad program emphasizes designing for readability, learnability and with a singular notion of organizational principles structuring content in such a way that it is accessible to humans, search engines, and user agents (speech synthesis for visually impaired users). In Designing Web Interfaces, this perspective is consistently swept aside in the quest to build "rich interactions" at the expense of these peripheral users.

The result for me of this encounter with "Designing Web Interfaces" has been a renewed appreciation of how hard it is to make interface design choices. So often design is a question of framing, which establishes who the audience is, what the goals are, and what standards to use for a product.

I think at best, this book offers insight into future trends of professional design -- what Scott calls "rich interactions". However, I have a feeling that I'll always be more on the novice/disabled/user-agent user's side, leaning towards standard-based and user-centered designs, no matter what these captains of industry are cooking up.

George said
With web interfaces using AJAX, Flash and Silverlight more and more, not only would designers would find this book useful, but also developers. The book is first-rate book, filled with examples from everyone from Yahoo, Google, Netflix, Apple and even Xbox. The examples in the book show just how much the web user's interfaces have changed in the last few years. Anyone designing or writing code to implement user interfaces will find the book helpful.

Coming from more of a programmer's background than designer, I found the book helpful in understand where particular patterns would work better than others. I see other readers recommending the book for art directors, project managers, web designers and interactive designers, but I would also include programmers, who want to understand why certain interfaces are used. This book has no code and is not the place to see how to implement the interfaces, but programmer will understand why a specific design might be used.

If the developer was looking for a book on how to code the design, then look somewhere else. If a developer wanted a better understanding of the ideas behind web interfaces, this would be a superb book.

E. Wood said
I've read a lot of books about designing functional user interfaces. This one is the best I've read. Even as a 12 year veteran of interaction design it had plenty for me to mine. It has up-to-the minute web 2.0 style AJAX interactions with directly actionable, pattern based examples. I bought one for everyone in the design group and made them read it!

The authors' approach to defining interactions using patterns isn't new, but the all-in-one catalog of rich interactions is. Using this book I was able to quickly review interaction options for a particular use case and pick the right pattern. After a couple of weeks I finished standardizing interactions styles for our entire site, which helped designers and developers alike. Another hit from O'Reilly Press.

If you are looking for a more philosophical definition of Interaction Design try Designing for Interaction: Creating Smart Applications and Clever Devices (VOICES)

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Engineers are all basically high-functioning autistics who have no idea how normal people do stuff.” - Cory Doctorow