The Basics of a Usability Failure

Flow ChartingUsability is a fancy word that we throw around a lot in engineering: “This API sucks from a usability perspective. It takes four calls to do anything!” or “How did anyone consider this a usable site?! I can’t find the Buy button!”

There are standard or semi-standard usability indicators, like time to accomplish a task, number of clicks, and eye-tracking heat maps. All of this chatter and all of these measurements come down to understanding what usability really is:

A measurement of how easily and efficiently users can accomplish tasks with your product.

That’s it. Good usability indicates that tasks are easier and faster to accomplish. Bad usability comes when things are hard to find or take a long time to do.

A large part of usability is about expectations. Buttons should be in places users expect to find them, usually distinguished by label or color. “Useful” information is often best defined as “the information the user expects to see on the page, and nothing extraneous.”

Let’s look at an example. This happens to be WordPress, though it’s certainly not the only site that has this problem.

This is a post listing. Notice that we have two places to create a new post. There’s an “Add New” button right next to the current page title (on the left), and another “New Post” button in the header (on the right). So what happens if we click them?

New Post Buttons

Logically, as a user, I would think that “Add New” (Post) and “New Post” would go to the same place. After all, they’re two apparent ways to accomplish the same thing: creating a new blog entry.

Here’s where the Add New button goes:

Add New Target

This is where the New Post button takes me:

New Post Target

Well, that’s not the same! They’re similar, but they don’t match. As a user, I have to learn two different user interfaces for creating a blog post. Depending on how I happen to access the New Post page, I have to do different things to complete my task. That’s a usability fail.

How would you fix it? Let me know by posting a comment below.

Post a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>