by Eric Reiss - 24 November 2004

10 things every designer should know about interactive elements

Most web usability tests consist of giving someone a task and studying them as they attempt to click their way to a solution. Although “usability” encompasses much more than just button-clicking, the fact remains, when users click on the wrong buttons, or click them in the wrong order, they generally fail to achieve their goals.

That makes buttons pretty important in the grand scheme.

Over the years, I’ve observed that virtually all button-clicking problems seem to fall into one of 10 distinct categories. Although “findable,” “accessible,” “efficient,” and other popular terms are used to describe various aspects of usability, most of these concepts encompass more than one of my categories. For example, “efficient” would include both “convenient” and “ergonomic,” and possible even “visible.” Yes, button problems can fall into more than one category, too, but a single category always seems to dominate – and fixing the dominant problem invariably provides the greatest single return on investment.

What I’ve attempted to do is to identify these basic usability building blocks as they apply to interaction. Here they are.

1. Functional

Quite simply, buttons and other interactive devices have to work when you activate them. And they have to work correctly. For example, pre-determined menus have to include all the necessary options. In forms – drop-down menus in particular – this may mean including “Other” as a stopgap category. The reverse is also true: a site must not demand information that the user cannot provide, such as a “State” in a European address.

I had considered dividing this category into “functional” and “appropriate” but in truth, when a needed option isn’t available, the feature is essentially “broken,” so I stuck with a single term. On a more general level, “functional” can be extended to mean the presence of relevant content, but that is beyond the scope of this article.

2. Ergonomic

Can we physically click on something without difficulty? For example, drop-downs and fly-outs can be tricky to catch. Pop-ups can get in our way. Very small buttons or short, single-word links can be tough to hit with the cursor – particularly for elderly users or users who have their screen resolution set very high.

3. Responsive

Buttons and other controls need to send a clear signal (usually visual) that they have “received the message.” Buttons that look like they’ve been physically depressed when clicked are quite good, even though they’re now out of fashion.

Various “wait mode” icons, such as the hourglass symbol, are very useful too, reducing both user frustration and the temptation to click on something else. If the click has triggered a change in the state of the existing screen (searching is a typical example of this) the revised screen must also send out a clear signal that something has changed. Feedback has long been a key Human-Computer Interaction concept.

4. Consistent

Things shouldn’t change their name or location. Buttons should always do the same thing. There is a growing body of evidence that suggests navigation should remain consistent, too, even when a site is being personalized. On a related note, headlines, content, and page graphics across the same level should be displayed in a recognizably similar manner.

The other side of this coin relates to best-practices – don’t go against established web conventions. For example, a radio button is round and lets the user make just one of several choices. A checkbox is square and turns on or off a specific function. Consistency is also a basic HCI concept.

5. Logical

Menus should present logical, unambiguous choices.

Men   Women = yes

Men   Women   Adults = no

6. Understandable

Users need to understand what a button means. With the exceptions of the little house for Home, the envelope for E-mail and possibly the magnifying glass for Search, icons are usually misinterpreted. Labels that feature unfamiliar words or acronyms create problems, too. A good rule of thumb is not to take anything for granted. Even a popular acronym like FAQ isn’t as widely recognized as you might think.

7. Predictable

If you click on “Light bulbs” you shouldn’t end up on a page labeled “Spare parts.” (I think I stole this example from Steve Krug) Anyway, surprises of this type have a tendency to rattle and confuse people – they think they’ve done something wrong.

8. Convenient

Long standard country lists that start with Afghanistan are not particularly convenient if you need to find the United Kingdom. If this was a list of corporate subsidiaries, unless you have an office in Kabul, Afghanistan shouldn’t even be on the list. Unfortunately it often is. In a convenient system, what you need will be easy to get to. Users won’t have to carry out unnecessary steps either – including drilling down through many levels.

Finally, convenient also means that relevant buttons are “within easy reach” on the page. For example, when someone is done reading about something, their eyes are focused on the bottom of the page. So that’s where relevant related links should be, too – even if they also appear somewhere else on the same page.

9. Visible

Anything interactive needs to broadcast its “clickability.” For the most part, this means links need to look like links. It also means putting stuff where it will be seen. Grouping related items can improve visibility. And, naturally, really important links should be immediately visible on the screen without the need to scroll (Newspaper folks call this “above the fold,” which refers to everything on the top half of the front page.)

Conversely, the concept of “banner blindness” in which the first 60 pixels from the top of the page are often ignored by users, also applies to a wide range of other horizontal page dividers. The classic example consists of instructions, followed by a graphic separator, followed by a form. Most people will dive right into the form and not see the instructions or other key links nearer to the top of the page.

10. Foolproof

If you make a mistake, the system should help you get back on track, either through error messages, effective back navigation, breadcrumbs, alt tags, or some other description/device. Redundant links with slightly different labels can help channel people with dissimilar vocabularies to a particular page. And the ability to return to a partially completed form without having to start from the beginning is not just convenient, it also helps avoid the creation of new errors.

Let me know if you find this summary useful, or if you have suggestions for additions/improvements.

Comments or questions?