Tuesday, November 30, 2010

The Importance of Predictability in Design

If you watch a few user tests, there’s an excellent chance that, at some point, the user will point at some element of the product and ask, “What does this do?” If I’m moderating the test, it is almost guaranteed that I will respond with “What would you expect it to do?”

I’m not trying to be difficult when I ask that question. I’m trying to learn the user’s expectations, because this is an important thing to understand when evaluating the usability of a product.

In my many years of watching and running usability tests, I’ve noticed a pattern of behavior for users encountering a new screen:
  1. Scan quickly
  2. Click the first call to action that seems remotely relevant to the task at hand
  3. Declare the product confusing if that call to action doesn’t do what they expect
  4. Leave
There are three very simple things that you can do right now to improve this experience in your product.

Calls to Action Should Be Explicit

Users should always know, or at least have a good idea of, what will happen if they click on a call to action. One way to do that is to make the copy or icon associated with the call to action really obvious and descriptive while still keeping it concise enough that people have a chance of reading it.

Recently, a company was testing landing pages. There were two pages, and the ONLY difference between the two was the copy on a button. One said “Login” and the other said “Login with Facebook.” Both buttons popped open the Facebook Connect dialog asking them to enter their Facebook information.

The percentage of people who clicked on the button was not statistically different. However, nearly twice as many people who clicked on the “Login with Facebook” button actually completed the step and ended up logging in.

Why is that? Because they weren’t surprised by the Facebook dialog. The people who simply expected to log in to the site were thrown by suddenly being asked to enter their Facebook credentials. The other group understood what was about to be asked of them, and they continued on.

Ironically, some people who might have been happy to login in with Facebook most likely didn’t want to click the plain Login button at all, since they didn’t want to create a whole new account or weren’t sure they could log in if they didn’t already have an account.

Things That Look the Same Should Act the Same

Have a More Info link in a couple of places in your product? Make sure that every time somebody clicks it, the same thing happens. If it’s an inline popup with some help text in one place, make sure it isn’t a link to a different screen in another place.



One product for which I was conducting user tests had this exact problem in a very bad spot. On most screens, users would click a little help icon next to certain terms and get a nice, short, inline description of the thing they were looking at.

Unfortunately, in the checkout flow, there was a piece of information that the team felt would not fit inline. When users clicked that icon, they were taken away from the checkout flow to a completely different help system. This obviously interrupted the checkout flow, while annoying users who had to find their way back to what they’d been doing. This, unsurprisingly, reduced the number of completed checkouts.

Obviously the other take away here is not to interrupt the checkout flow by sending people elsewhere, but it’s also important to note that, if people had at least expected the behavior, they wouldn’t have had the additional unpleasant surprise of something happening that they didn’t expect. They also might have been less likely to click the icon, if they’d known it was going to pull them away from the expected flow.

Icons Should Be Standard


Do you have a little pencil icon next to some elements? If so, it should always mean “edit.” Sure, you could use some other icon, but why would you? You could also use a pencil to mean something else, but it would confuse the hell out of your users.

Certain icons have simply shown up in enough interfaces that they are as identifiable as actual words. When you change the meaning of those icons or use a different icon instead, you are making your users learn a whole new language. You wouldn’t use “blue” to mean “red,” would you? Treat icons the same way.

Why Is This Important?

Often, people who are building a product think, “well, this might be a little confusing the first time, but people will figure it out.”

There is an important truth to understand about your product: people almost never spend enough time with it to learn all the ways in which you’ve decided to be different or inconsistent.

If they are confused the first time, they will most likely continue to be confused or to make the same mistake over and over until they finally become frustrated and leave with the impression that your product is just too hard to use.

By making your product’s behaviors easy to predict, you are reducing the cognitive load for your users and making it easy to use, not just the first time, but every time.

Enjoy the post? Please, follow me on Twitter!

Or, read some of these related posts: