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.

By: Staff


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 it’s 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 have the ability to 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 counter example: 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 though a series of principals for creating websites 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 photo 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 show how websites have evolved, for example 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.

What it doesn’t
The book isn’t so much about the overall design of the site itself, rather 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, but 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.

Designers have gone from click-able text links to having nearly the full palette of 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 common situations that might come up when creating a website and this book offers a guide to how other designers have approached the problems – and sometimes how they have got it wrong. They layout of the book is very easy to follow: plenty of illustrations and a 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, though I think anything larger than a personal website is going to get into areas where the lessons here are applicable.

Date published: 29-Mar-2010





Neuro Web Design

Before starting on your next website, put your customer on the couch; a little psychology can lead to more effective web sites.

Deliver First Class Web Sites

Checklists of things to keep in mind when designing and building a website.

WordPress 2.7 Cookbook

Get things done with WordPress without writing a lot of your own code.

The Principles of Beautiful Web Design

From colour picking to layout to typography, a step-by-step guide to creating good looking websites.

Eloquent JavaScript

By treating JavaScript as a language in its own right, the author has produced a solid guide to learning a language you might think you already knew.


2019 YYZTech

For American computers stores, visit: AmericanComputerDealer.com