Web 2.0 - A Second Chance To Make The Same UI Mistakes

Get ready kids. It's time to play the newest game in town; "Guess What This Control Will Do". Today's action packed game includes all sorts of links, drop-down lists, buttons and icons that don't do at all what you expect. Today's article is going to attempt to help (former) HTML jockey's understand the UI concepts that rich interface designers have been using for the last decade. There are simply too many UI mistakes being introduced into today's Web 2.0 applications.

My favorite book on UI design is Bruce "TOG" Tognazzini's "TOG on Interface". TOG provides a couple hundred guidelines and principles that were discovered (and in many cases verified through research and extensive user testing) by Apple's Human Interface Group through the creation of MacOS 7. While the book discusses these precepts using the Apple interface components as examples, there are analogs of the UI controls in both the Windows, Linux and Java desktops, and it only takes a modicum of imagination translate them to your chosen platform.

The most often repeated guideline in this book is "Invent new objects, with new appearances, for new behaviors". Obeying this one simple concept allows your user's to navigate through your application without any hidden surprises. TOG further describes each UI object as having three important characteristics which should remain consistent for each control:

  • Visual - What is the control's on-screen appearance.
  • Kinestetic - How does the user activate or otherwise use the control.
  • Behavioral - How does the control react to being activated.

Many of the Web 2.0 applications that can be found on the Internet today (and I won't pick on any of them by name), suffer from the HTML designer's lack of knowledge regarding these principles. Until recently, the browser controlled all behavioral aspects of each control. With the widespread adoption of JavaScript (or other DHTML techniques) to create a more interactive user session within the browser window, the behavior of some elements has been stretched to include actions that aren't consistent with any other rich UI system. Here are a few examples:

  • Radio buttons and Check Boxes have been created that activate data changes as soon as they are clicked. When this data is reloaded asynchronously and displayed along side the control, this behavior makes sense, but many Web 2.0 applications are using them simply as selectors to navigate to a new screen. A link or button is more appropriate in this situation.
  • Drop-Down Selectors are being used to dynamically reload the data within a page. One of these controls (with 5 to 10 items) can be used to select a filter for a data table or otherwise reload their corresponding screen elements, but beware of dynamically reloading data when there are more than one interdependent Drop-Down List. It is easy to create a hodgepodge of 10^5 combinations of DDL selections, but it's dangerous to create this functionality if it isn't perfectly clear to the user what rules are governing the data changes.
  • Trees are common controls in desktop applications that allow large amounts of hierarchically organized data to be displayed in bite sized chunks. Many Web 2.0 applications are implementing Trees (with or without asynchronous data loading), but care must be taken to provide consistent behavior. There are several AJAX applications that have created Trees that close branches indiscriminately. Trees should either allow one branch to be opened at a time, or should require user action to hide unneeded branches.

Next time your cruising around your favorite Web 2.0 application, compare the control's behavior to their equivalents in desktop applications ... I'm sure that you will find many additional mistakes. Then, when you're developing your own Web 2.0, remember to use the HTML controls in a manner consistent with their desktop equivalents.

In closing, I strongly recommend reading TOG's entire book. There is much to be learned about the psychology of Human-Computer interaction and UI design. For reference, the principles and guidelines described throughout the book are collected and categorized into an easy to read appendix.

Now if I can just follow my own advice:)