Summary:
Application usability is enhanced when users know how to operate the UI
and it guides them through the workflow. Violating common guidelines
prevents both.
It’s hard to write a general article about application design mistakes because the very worst mistakes are domain-specific and idiosyncratic. Usually, applications fail because they (a) solve the wrong problem, (b) have the wrong features for the right problem, or (c) make the right features too complicated for users to understand.
Any of these three mistakes will doom your app, and yet I still can’t
tell you what to do. What’s the right problem? What are the right
features? What complicating curlicues can safely be cut from those
features? For each domain and user category, these questions have
specific and very different answers.
The only generalizable advice is this: rather than rely on your own best guesses, base your decisions on user research:
- Conduct field studies and task analysis before deciding what your app should do.
- Paper prototype
your initial ideas before doing any detailed design — and definitely
before wasting resources implementing something you’d have to change as
soon as you get user feedback.
- Design iteratively, conducting many rounds of quick user testing as you refine your features.
Of course, people don’t want to hear me say that they need to test
their UI. And they definitely don’t want to hear that they have to
actually move their precious butts to a customer location to watch real
people do the work the application is supposed to support.
The general idea seems to be that real programmers can’t be let out
of their cages. My view is just the opposite: no one should be allowed
to work on an application unless they’ve spent a day observing a few
end users.
(Whatever you do, at least promise me this: Don’t just
implement feature requests from “user representatives” or “business
analysts.” The most common way to get usability wrong is to listen to what users say rather than actually watching what they do. Requirement specifications are always wrong. You must prototype the requirements quickly and show users something concrete to find out what they really need.)
All that said, there are still plenty of general guidelines for
application UIs — so many, in fact, that we have a hard time cramming
the most important into our two-day course.
Here’s my list of 10 usability violations that are both particularly
egregious and often seen in a wide variety of applications.
1. Non-Standard GUI Controls
Basic GUI widgets — command links and buttons, radio buttons and checkboxes, scrollbars, close boxes, and so on — are the lexical units that form dialog design’s vocabulary.
If you change the appearance or behavior of these units, it’s like
suddenly injecting foreign words into a natural-language communication.
Det vil gøre læserne forvirrede (or, to revert to English: Doing so will confuse readers).
For some reason, homemade design’s most common victims are scrollbars. For years, we’ve encountered non-standard scrollbars in our studies, and they almost always cause users to overlook some of their options. We’re seeing this again this year, in the studies we’re conducting to update our course on Fundamental Guidelines for Web Usability. (The linked article includes screenshots of offending scroll controls.)
Some of the world’s best interaction designers have refined the
standard look-and-feel of GUI controls over 30 years, supported by
thousands of user-testing hours. It’s unlikely that you’ll invent a
better button over the weekend.
But even if your homemade design, seen in isolation, were hypothetically better than the standard, it’s never seen in isolation in the real world. Your dialog controls will be used by people with years of experience operating standard GUIs.
If Jakob’s Law is “users spend most of their time on other websites,” then Jakob’s Second Law
is even more critical: “Users have several thousand times more
experience with standard GUI controls than with any individual new
design.”
Users will most likely fail if you deviate from expectations on
something as basic as the controls to operate a UI. And, even if they
don’t fail, they’ll expend substantial brainpower trying to operate
something that shouldn’t require a second thought. Users’ cognitive
resources are better spent understanding how your application’s
features can help them achieve their goals.
1.a. Looking Like a GUI Control Without Being One
The
opposite problem — having something that looks like a GUI control when
it isn’t one — can reduce usability even more. We often see text and
headlines that look like links (by being colored or underlined,
for example) but aren’t clickable. When users click these look-alikes
and nothing happens, they think the site is broken. (So please comply
with guidelines for visualizing links.)
A similar problem occurs when something looks like a button but doesn’t initiate an action, or looks like a radio button but isn’t a choice. We found an example of this in our current round of studies.
To design a custom-tailored shirt on Liste Rouge Paris, you must
provide your measurements. As the following screenshot shows, there are
two different paths through the application here, depending on whether
your measurements are already on file with the tailor.
Our test user clicked incessantly on the New Customer
button to indicate that he was indeed a new customer. Unfortunately,
this screen element was not a button at all, but rather a non-clickable
heading.
He was the only user to test this site because he encountered
it during a task in which users could choose a site to visit (usually
from a search listing). In this case, the user eventually overcame the
confusion and proceeded to enter his measurements. If we had tested
more users, a small percentage would have likely failed at this point.
Each small error in dialog design reduces usage only by a small amount,
but most UIs contain bundles of errors, and the number of lost customers adds up.
As an aside, this screen also uses radio buttons incorrectly. In
theory, all five choices are mutually exclusive, which does call for
radio buttons. But in the user’s mental model of the workflow, there
are actually two issues
here: (a) new vs. old customers, and (b) how to provide the
measurements for your situation. You should use a single set of radio
buttons only when users will choose between options for a single issue.
So, in the case above, a better design would first ask users to
decide the new/existing customer question, and then reveal the relevant
radio buttons for the option they choose.
2. Inconsistency
Non-standard GUI controls are a special case of the general problem of inconsistent design.
Confusion results when applications use different words or commands
for the same thing, or when they use the same word for multiple
concepts in different parts of the application. Similarly, users are
confused when things move around, violating display inertia.
Using the same name for the same thing in the same place makes things easy.
Remember the double-D rule: differences are difficult.
Another example from our current study: Expedia pops up a two-month
calendar view when users specify the departure or return date for a
trip. The composite screenshot below was taken in February and shows
what happens when you want to book a trip that starts on March 10 and
ends on March 15.
In the second pop-up, the month of March has moved to the left,
leaving room for April to appear on the right. This may seem like a
convenient shortcut, since there’s no way the user would want a
February return date when traveling out in March.
In reality, however, the user is looking for March 15 in the
same spot where it appeared in the first pop-up calendar: in the
right-most column.
In our testing, the inconsistent placement of the months in the
second pop-up caused confusion and delays, but users ultimately figured
it out. We tested only a few users with this site, but if you observe
this kind of almost-miss error in user testing, it’s usually a sign that a few users will make the mistake for real during actual use.
Booking the wrong return date can have disastrous consequences —
customers could arrive at the airport without a ticket for their
expected flight. If a site has good confirmation emails,
users might discover the problem before departure, but even that will
cause aggravation and expensive customer support calls to resolve the
situation.
Even if people eventually use the calendar correctly, it takes more time to ponder the inconsistent design than the time users save by not having to click the next-month button for April departures.
The shortcut that moves the months around saves time only for
very frequent users who learn how to efficiently operate this part of
the UI. So, an application for professional travel agents should
probably use Expedia’s calendar design. A site targeting average
consumers should not.
3. No Perceived Affordance
“Affordance” means what you can do to an object. For example, a
checkbox affords turning on and off, and a slider affords moving up or
down. “Perceived affordances” are actions you understand just by looking
at the object, before you start using it (or feeling it, if it’s a
physical device rather than an on-screen UI element). All of this is
discussed in Don Norman’s book The Design of Everyday Things
.
Perceived affordances are especially important in UI design,
because all screen pixels afford clicking — even though nothing usually
happens if you click. There are so many visible things on a computer
screen that users don’t have time for a mine sweeping game, clicking around hoping to find something actionable. (Exception: small children sometimes like to explore screens by clicking around.)
Drag-and-drop designs are often the worst offenders
when it’s not apparent that something can be dragged or where something
can be dropped. (Or what will happen if you do drag or drop.) In
contrast, simple checkboxes and command buttons usually make it
painfully obvious what you can click.
Common symptoms of the lack of perceived affordances are:
- Users say, “What do I do here?”
- Users don’t go near a feature that would help them.
- A profusion of screen text tries to overcome these two
problems. (Even worse are verbose, multi-stage instructions that
disappear after you perform the first of several actions.)
When I tested some of the first Macintosh applications in
the mid-1980s, users were often stumped by the empty screen that
appeared when they launched, say, MacWrite. What do I do here,
indeed. The first step was supposed to be to create a new document, but
that command was not shown anywhere in the otherwise highly visible
Macintosh UI unless you happened to pull down the File menu.
Later application releases opened up with a blank document on the
screen, complete with an inviting, blinking insertion point that
provided the perceived affordance for “start typing.”
3.a. Tiny Click Targets
An associated problem here is click
targets that are so small that users miss and click outside the active
area. Even if they originally perceived the associated affordance
correctly, users often change their mind and start believing that
something isn’t actionable because they think they clicked it and
nothing happened.
(Small click zones are a particular problem for old users and users with motor skill disabilities.)
4. No Feedback
One of the most basic guidelines for improving a dialog’s usability is to provide feedback:
- Show users the system’s current state.
- Tell users how their commands have been interpreted.
- Tell users what’s happening.
Sites that keep quiet leave users guessing. Often, they guess wrong.
(For an example of the problems with poor feedback, see the screenshot of VW’s car configurator toward the bottom of my recent article reporting on our current round of testing: Because users couldn’t tell which tire was selected, they had trouble designing their preferred car.)
4.a. Out to Lunch Without a Progress Indicator
A variant on
lack of feedback is when a system fails to notify users that it’s
taking a long time to complete an action. Users often think that the
application is broken, or they start clicking on new actions.
If you can’t meet the recommended response time limits, say so, and keep users informed about what’s going on:
- If a command takes more than 1 second, show the “busy” cursor. This tells users to hold their horses and not click on anything else until the normal cursor returns.
- If a command takes more than 10 seconds, put up an explicit progress bar, preferably as a percent-done indicator (unless you truly can’t predict how much work is left until the operation is done).
5. Bad Error Messages
Error messages are a special form of feedback: they tell users that something has gone wrong. We’ve known the guidelines for error messages for almost 30 years, and yet many applications still violate them.
The most common guideline violation is when an error message simply says something is wrong, without explaining why and how the user can fix the problem. Such messages leave users stranded.
Informative error messages not only help users fix their current problems, they can also serve as a teachable moment.
Typically, users won’t invest time in reading and learning about
features, but they will spend the time to understand an error situation
if you explain it clearly, because they want to overcome the error.
On the Web, there’s a second common problem with error
messages: people overlook them on most Web pages because they’re buried
in masses of junk. Obviously, having simpler pages is one way to
alleviate this problem, but it’s also necessary to make error messages more prominent in Web-based UIs.
6. Asking for the Same Info Twice
Users shouldn’t have to enter the same information more than once.
After all, computers are pretty good at remembering data. The only
reason users have to repeat themselves is because programmers get lazy
and don’t transfer the answers from one part of the app to another.
7. No Default Values
Defaults help users in many ways. Most importantly, defaults can:
- speed up the interaction by freeing users from having to specify a value if the default is acceptable;
- teach, by example, the type of answer that is appropriate for the question; and
- direct novice users toward a safe or common outcome, by letting them accept the default if they don’t know what else to do.
Because I used Liste Rouge Paris as a bad example under
Mistake #1a, I thought I’d play nice and use them as a good example
here. The tailor offers 15 different collar styles (among many other
options) for people ordering custom-designed shirts. Luckily, they also
provide good defaults for each of the many choices. In testing, this
proved helpful to our first-time user, because the defaults steered him
toward the most common or appropriate options when he didn’t have a
particular preference.
Dialog to specify your shirt’s collar on www.listerouge-paris.com (3 of 15 styles shown).
8. Dumping Users into the App
Most Web-based applications are ephemeral applications
that users encounter as a by-product of their surfing. Even if users
deliberately seek out a new app, they often approach it without a conceptual model
of how it works. People don’t know the workflow or the steps, they
don’t know the expected outcome, and they don’t know the basic concepts
that they’ll be manipulating.
For traditional applications, this is less of a problem. Even if
someone has never used PowerPoint, they’ve probably seen a slide
presentation. Thus, a new PowerPoint user will typically have at least
a bare-bones understanding of the application before double-clicking
the icon for the first time.
For mission-critical applications, you can often assume that
most users have tried the app many times before. You can also often
assume that new users will get some training before seeing the UI on
their own. At the minimum, they’ll usually have nearby colleagues who
can give them a few pointers on the basics. And a good boss will give
new hires some background info as to why they’re being asked to use the application and what they’re supposed to accomplish with it.
Sadly, none of these aides to understanding apply for most Web-based applications. They don’t even apply for many ephemeral intranet applications.
Usability suffers when users are dumped directly into an application’s
guts without any set-up to give them an idea of what’s going to happen.
Unfortunately, most users won’t read
a lot of upfront instructions, so you might have to offer them in a
short bulleted list or through a single image that lets them grok the
application’s main point in one view.
As an example, our test user who was trying to order a
custom-tailored shirt was highly confused when the first screen in
Hamilton Shirts’ “Create Your Shirt” process displayed a fully designed
shirt with an “Add to Bag” button. This screen mixed two metaphors: a
configurator and an e-commerce product screen.
This is a case where a default value isn’t helpful: people who want
to design their own shirt are unlikely to want to buy a pre-designed
shirt on the first screen.
(This screen also suffers from Mistake #1: non-standard GUI
controls. In addition to its non-standard drop-down selection menus in
a tabbed dialog that doesn’t look enough like tabs,
the screen has a non-standard way of paging through additional fabric
swatches. Users are less likely to understand how to select fabrics
when the controls are presented in this manner.)
Our test user never understood the process of designing his own shirt on this site and ultimately took his business elsewhere.
9. Not Indicating How Info Will Be Used
The worst instance
of forcing users through a workflow without making the outcome clear is
worth singling out as a separate mistake: Asking users to enter
information without telling them what you’ll use it for.
A classic example is the “nickname” field in the registration
process for a bulletin board application. Many users don’t realize the
nickname will be used to identify them in their postings for the rest
of eternity — so they often enter something inappropriate.
As another example, we once tested an e-commerce site that
smacked users with a demand for their ZIP code before they could view
product pages. This was a big turn-off and many users left the site due
to privacy concerns. People hate snoopy sites. An alternative design
worked much better: It explained that the site needed to know the
user’s location so it could state shipping charges for the very heavy
products in question.
10. System-Centric Features
Too many applications expose
their dirty laundry, offering features that reflect the system’s
internal view of the data rather than users’ understanding of the
problem space.
In our current study, one user wanted to reallocate her retirement
savings among various investments offered by her company’s plan (for
example, to invest more in bonds and less in stocks). She thought she
did this correctly, but in fact she had changed only the allocation of future additions to her retirement account. Her existing investments remained unchanged.
As far as the mutual funds company is concerned, new investments and
current investments are treated differently. Reallocating future
additions means changing the funds they’ll buy when the employer
transfers money into the account. Reallocating current investments
means selling some of the holdings in existing mutual funds and using
the proceeds to buy into other funds.
The key insights here?
- Our test user didn’t have this distinction between new and old
money; she simply wanted her retirement savings allocated according to
her revised investment strategy.
- Even users who understand the distinction between new and old
money might prefer to treat their retirement savings as a single unit
rather than make separate decisions (and issue separate commands) for
the new and old money.
It would probably be better to offer a prominent feature for changing the entire account’s allocation, and use progressive disclosure to reveal expert settings for users who want to make the more detailed distinction between the two classes of money.
Bonus Mistake: Reset Button on Web Forms
This mistake relates to Web forms, but because so many applications are rich in forms, I’ll mention it here: It’s almost always wrong to have a Reset button on a Web form
.
The reset button clears the user’s entire input and returns the form
to its pristine state. Users would want that only if they’re repeatedly
completing the same form with completely different data, which almost
never happens on websites. (Call center operators are a different
matter.)
Making it easy for users to destroy their work in a single click
violates one of the most basic usability principles, which is to
respect and protect the user’s work at almost any cost. (That’s why you
need confirmation dialogs for the most destructive actions.)
