Wolf’s Little Store

The biggest mistake you can make when building an interface is doing the unexpected. This is called the principle of least astonishment. Sometimes adjustments made with the best of intentions actually harm the application’s usability.

A common example: imagine a form where you have to enter your credit card number. A credit card has a specific format: for VISA, it’s XXXX-XXXX-XXXX-XXXX, in which X stands for a number between 0 and 9. The clever developers decide to write a little script that makes the focus jump to the next form field whenever the previous one is filled in.

This seems like a helpful and smart move, but it’s not. By adding new behaviour, the developers are breaking the expected behaviour. A user who knows they can use the tab key to navigate through form fields enters the first four numbers, hits tab, and the focus is on the third input field, instead of the second.

To make matters worse, the team’s designer thought that the input fields didn’t really look all that nice in his operating system, and preferred a simple look. He added the following little rule to his stylesheet:

input.text { border: 1px solid #83A8CC }

In his opinion, he made the application look cleaner, made the form fields ‘fit’ within the interface, and did a good job overall. Wrong again: by adding a 1 pixel wide border he broke the focus ring for Firefox Mac, Safari Mac and Opera Win/Mac users.

Combine the unexpected form field focus change, and the loss of the focus ring¹ and the team just worsened the usability of the application, while in their minds, they improved it.

Everyone in a team needs to take his responsibility, and wear the usability hat every so often.

• Category: webdesign
• Back to the overview