Pulling the Right Buttons (Or, "Web Usability and Link Affordance: Doors as a Real-World Analogy")

How often have you approached a door, then pulled when you were supposed to push? It’s frustrating. And if anyone’s watching, it’s embarrassing. But it’s not your fault!

If usability folk ran the world, doors that must be pushed would look push-able.

Simple enough, right? Well it should be. But if you visit Vancouver’s main post office, you’ll run into these two doors, which would clearly fail a Steve Krug “Don’t Make Me Think” test:

The door on the left must be pulled; the door on the right must be pushed. Yet as both doors sport what appear to be pull handles, at a glance they appear identical!

Whoever designed these doors assumed that customers will actually read the signs saying PULL and PUSH respectively. But who wants to stop and read instructions on how to operate a door? And should we really have to? Shouldn’t a superficial glance be enough?

It’s just another example of crazy bad usability, the kind we all encounter every day in the real world. Can’t we do better than this?

And what has any of this got to do with web design? Well, the most obvious analogy is link affordance. If we want visitors to click on links, we should make links obviously clickable. Don’t rely on labels, don’t make visitors “figure it out”.

Just for fun, I’ll also take this opportunity do draw a distinction between errors that are critical, and those that are merely annoying:

Annoying Errors

Web Design: Something that looks like a link, but isn’t.

Door Design: A door that must be pushed, but looks like it’s meant to be pulled. You can still open the door, but you’re likely suffer the annoyance of a fruitless pull first.

Critical Errors

Web design: A broken or invisible link to an important page.

A door that must be pulled… and there’s no handle to pull it with. There’s simply no way through… at least without a crowbar.