Section 6.1. Principles of Usability

6.1. Principles of Usability

Whether you are building an Ajax application, an ATM, an air traffic control system, or a kitchen appliance, the basic principles of usability design are universal. Here we'll look at those principles.

Web development as a whole benefits from a multidisciplinary approach, and designing for usability requires similar breadth. There are a few different usability hats you can donand each role is essential.

6.1.1. Personal Assistant: Defending Attention

The job of building a UI is not unlike being a personal assistant. In this age of information overload, we could all use an assistant at times: someone to help manage and defend one of our most precious resources, attention. As you think about your user interface, imagine you're the personal assistant to a VIP. Perhaps an A-list celebrity or a Fortune 100 CEO. Your job is to help manage that person's attention. Even in menial tasks ("Bring me a Danish!"), your role is essentially to free your boss from dealing with low-level distractions (such as hunger), so he's free to focus on other tasks. Perhaps he's overwhelmed with a barrage of requests for attentionconstant phone calls, business opportunities, calendar appointments, emails, interesting news items, and so on. Some of those things may be vitally important; some are merely a nuisance. You must so thoroughly know his interests and priorities that you can act on his behalf: filtering, buffering, maximizing, and minimizing certain elements. Ideally, you will provide him with just what he needs, at just the time he needs it.

The role of a UI designer is similarto put certain pieces of information and certain opportunities front and center in the user's attention and to push other things toward the background. Just as a good assistant might dial the phone and wait on hold for you, so too a good piece of software might anticipate what you're likely to click next and pre-load it. A good assistant would prepare a portfolio of background information and hand it off just before a meeting. Similarly, a well-designed interface would provide the necessary contextual information to support a task.

(Granted, the job is a delicate and risky one. Woe to the assistant who assumes too much and to the software that's too helpful.)

Attention is a finite resource. Every feature, every piece of text, and every graphical element pulls at the attention of the user. By corollary, every feature or element added to a screen diminishes the attention paid to every other element. So think critically about the relative importance of every new addition and be a vigilant defender of the user's attention.

6.1.2. Tour Guide: Manage Expectations

The next role of the usability designer is like that of a tour guide: that cheerful person who knows the relative charms of every neighborhood, and who has an entertainment suggestion to suit every taste. She'll ensure that guests are always oriented and aware of their opportunities. Good user interface design requires the same sort of comforting touch, also known as expectation management. To put it simply: well-designed software always works like the user expects it to.

6.1.2.1. User models and program models

So what drives user expectations? The mind is quite amazing in its ability to make inferences and predictions about how a system works. When people use software, they form an internal, mental picture of the system called the user model. The bad news is that the picture is usually wrongor at least, oversimplified a great deal. But it's not the only model for how software worksthe other is the program model. The program model is always right, by definition, because it's embodied by the code itself. The program model is a precise, literal description of the way the software works, bugs and all. When the user model doesn't conform to the program model, users' expectations about the system fall down, leaving them frustrated and ineffective.

6.1.2.2. Example: Windows versus Mac program models

Generally speaking, Microsoft Windows applications always have at least one window openperhaps it's minimized to the taskbar, but it is still there. And when that master window is closed, the application exits. And so people gradually, unconsciously create a user model to explain the connection: something along the lines of "applications are windows." Of course, that's not strictly the reality, but it's an understandable assumption. But on the Mac, the program model is different: applications can run without any windows. Close them, and the application is still running. As a result, when Windows folks first use a Mac, they often unintentionally leave a string of running applications. All because their user model ("applications arewindows") doesn't conform to the program model ("applications have windows").

The job of expectation management can be seen as lining up the user model and the program model by providing cues that allow the user to make accurate predictions about how the software will work.

6.1.2.3. Set accurate expectations

Years ago, I traveled to Hong Kong and noticed something I'd never seen before: at major intersections, the pedestrian "Don't Walk" sign showed a timer, counting down the seconds until the light would change. It's a helpful piece of information to have: I could decide to speed up, slow down, change my course, or just wait it out. A clear win for expectation management: increased efficiency, reduced anxiety.

The memory returned to me a couple of years later, when my hometown installed the same type of pedestrian signals. Unfortunately, it was implemented slightly differently. Someone had decided (probably citing safety reasons) that they ought to fudge the numbers: so when the timer said there were ten seconds before the light changed, there were really fifteen seconds. The first time I encountered the new signal, they got me: I didn't cross the street, even though I had plenty of time. Annoying. But worse, it taught me not to trust the timer. I started watching how other people interacted with the light, and it was the same: even when the timer showed no time left, they darted into the street. The supposed safety feature backfired.

When building interfaces, trust your users. Provide accurate information, and they'll form accurate expectations.

6.1.3. Mentor: Design Not Just for Usability, but Learnability

The next hat that you wear when designing for usability is that of the mentor. In every profession (and simply in life) it's invaluable to have a mentorsomeone who is further down the road, and willing to share the lessons and wisdom they've gathered along the way. A good mentor isn't pushy, but a patient and encouraging teacher. A usable interface serves the same function: it gently teaches the user how to be more effective and efficient.

Usability does not always directly overlap with learnability. For certain applications, the requirements of the experienced power user may trump those of the newbie. Command-line interfaces are a prime example. To the uninitiated, no interface is more baffling than a blank screen and blinking cursor. But to an experienced user, it's supremely powerful. Try taking away the command line from a Unix guru, and you'll probably cut his productivity by half, at least.

In designing for usability, there is an important tension at play between optimizing for new users and optimizing for experienced users. The most important factor in resolving the tension is the application's purpose. Is it something that users will tend to live in, such as a programmer's text editor, or is it something that needs to be friendlier to first-timers?

6.1.3.1. Teach with affordances

An affordance is a teaching tool. It's an attribute of an object that indicates how it can be interacted with. These are everywhere: a door handle is an affordance for pulling, a button is an affordance for pushing, and a knob is an affordance for turning. UI designers supply affordances as well, and they're often taken for granted. For example, open up a window on your computer and take a look at it. Forget what you already know, and judge based on what you can see: is the window resizable? If the answer is yes, it's probably because the bottom-right corner of the window has little diagonal stripes, sometimes called a grip. That little graphic is a clue: an affordance for resizing. Even command-line interfaces offer at least one affordance, the blinking cursor. Affordances create learnability. They are the visual vocabulary of behavior.Figure 6-1 shows some common affordances.

Figure 6-1. Interface affordances

6.1.4. Trainer: Provide Immediate Feedback

Have you ever wondered why people pay money for a personal trainer at the gym? After all, how much training does it take to run on a treadmill and lift some weights? In fact, there are some good reasons (not the least of which is that spending money increases your psychological investment in the outcome). But for our purposes, one of the key roles of a trainer is to provide instant feedback during a workout: encouragement, correction, pacing, and education, tailored to the task at hand.

The usable interface works the same way: it brings cause and effect into close proximity, creating a tight feedback loop, so that the user can more naturally and responsively self-correct.

6.1.4.1. Direct manipulation

The idea of direct manipulation is a perfect example of a tight UI feedback loop. Whenever possible, the data display should not be separated from the user's interaction with that data. In other words, allow the user to interact with and manipulate the data directly. Some spreadsheet applications could use improvement in this area: they don't allow data to be edited directly in a cell. Instead, the user has to first click a cell to edit, and then shift their focus to a field at the top of the spreadsheet in order to make changes.

Contextual menus and drag and drop are ideal mechanisms for providing direct manipulation.

6.1.4.2. Work with the mind

Our minds and bodiesin particular, our visual and motor systemsare optimized for the physical world, and not the virtual one. Yet many computer interfaces don't acknowledge this reality. For example, your mind isn't optimized to notice changes when the screen flashes white. And that shouldn't be too surprising. After all, the world doesn't just vanish and reappear half a second later, slightly different than before. Things move gradually, and our visual system is finely attuned to movement. See Mind Hacks, by Tom Stafford and Matt Webb (O'Reilly).

When something is being added to a page and it's important that the user recognize it, a script.aculo.us highlight effect might be appropriate: it works with the user's hard-wired visual system to signify that something is important. On the other hand, suppose some piece of information is removed from the screen, because it's no longer relevant or necessary. Using the highlight effect again would be counter-productive. Better to use something like the fade effect.

6.1.4.3. Use color appropriately

When used sparingly and consistently, color can be a powerful way to increase usability because it creates a layer of visual data, in addition to text, shapes, and layout.

Use color consistently, and you'll train your users that they can rely on color conventions, allowing them to comprehend new UI areas faster and navigate your application more confidently, quickly, and with fewer errors.

If you use color to convey information in your UI, do so sparingly and don't try to associate more than a handful of concepts with colors. Otherwise, you'll risk creating a visual jumblehurting usability more than you help it.

While color doesn't generally have much inherent semantic value, there are certainly conventions for the meanings of colors, and your designs can benefit from them. From earliest childhood, red is associated with stop. (In fact, it's that way because of an accident of technology. Early lighthouses chose red as the stop signal because it was the most translucent stained glass available at the time. Later, railroads and eventually automobile traffic systems followed the same convention.) So don't let hundreds of years of tradition end with your web application! The semantics of red can be extended to indicate caution, no, cancel, remove, open, delete, etc. On the other hand, green is useful for conveying proceed, yes, confirm, new, add, open, create, etc.

When designing with color, be cautious not to take color perception for granted. Roughly one percent of women and five percent of men have some degree of color blindness. When using color in interface design, no information should ever be conveyed solely by colorcolor should simply enhance what's already represented in text or shape.