Designing Web Interfaces

Principals and Practices for Rich Interactions
Designing sites that are easy to use is still a challenge because the challenge is only partly technical.

The Problem:

For most of the history of the web, just getting something up on the screen that resembles your original design — in two or more web browsers — has been a challenge on its own. Today, browsers have become more standardized, and libraries like jQuery UI and the Dojo Toolkit are bringing desk-top-style interface widgets to websites. However, while designers can create sophisticated interfaces, designing sites that are easy to use is still a challenge because the challenge is only partly technical.

Public websites (as opposed to those for internal use by an organization) often have to be both a tool for performing a task and an advertisement for the website’s brand. Combine this with the need to be quickly picked up by new visitors, and easy to use by those familiar with it gives the designer an interesting challenge balancing these different goals. While not touched on in the book, Apple’s iPhone/iTouch offers a counterexample: websites designed to run well on these devices try and mimic the native UI so that users familiar with, say, selecting podcasts feel at home navigating websites.

What Does the book teach?

As their bio indicates, Bill Scott and Theresa Neil have both been involved in website design for several years, and many of the examples are drawn from websites they’ve worked on, and they draw on this experience in this book. Designing Web Interfaces takes the reader through a series of principals for creating sites that are easy for users to use. Each principal: Make it Direct, Stay on the Page, Provide an Invitation and React Immediately is given its section. In each section are a series of chapters, each covering a set of design patterns that relate to that chapter and section. For instance, the Stay on the Page section has a chapter on Overlays that covers how to use dialogue boxes (such as those available in jQuery UI) effectively. The book pays a lot of attention to details, like how to visually indicate a page element can be interacted with using such as the example of a photo that when hovered over gains an icon and the background changes, so the picture appears to become a button. At the same time, the book has examples of “anti-patterns” – examples of what designers have done wrong according to the authors. One example given is over-using drag-and-drop to score movies when a simple star-rating might have been more effective. Other shows how websites have evolved, for instance, Digg.com (or just ‘Dig.com’) originally made “digging” a story a 2-step process. Each chapter and section finish up with a wrap-up that includes a set of best practices.

See also  The Principles of Beautiful Web Design

What it doesn’t

The book isn’t so much about the overall design of the site itself. Instead, it goes the opposite way: right into the details of how an element should work. As well, there is little mention of the process of building the website once it has been designed- readers looking for advice on what JavaScript library to use will be disappointed. Still, there is enough material covered in this 300-page book already, and it’s probably for the better, the examples here will be relevant for longer than some of the libraries or frameworks popular today will be in a few years.

Conclusion

Designers have gone from click-able text links to having nearly the full palette of UI options available to desktop applications. With that amount of choice, mistakes are bound to happen. Designing Web Interfaces doesn’t try and teach everything about web design, there is almost no coverage of the implementation details, but what it does cover is a lot of everyday situations that might come up when creating a website. This book offers a guide to how other designers have approached the problems – and sometimes how they have got it wrong. The layout of the book is straightforward to follow: plenty of illustrations and clear examples along with various break-out boxes. This is a good reference book to keep around. The principals are good ones to keep in mind, even if your project doesn’t quite fit into the cases provided. I think anything more substantial than a personal website is going to get into areas where the lessons here are applicable.
Date published: 29-Mar-2010

See also  Neuro Web Design