steve kwan user experience designer

Not all buttons are created equal

(March 25th, 2008 - 11:44AM)

I've been thinking a lot about buttons lately.

Everyone knows I'm a big fan of buttons. I've been getting a lot of flak at work because I recently designed a screen that has a gigantic "click here" button consuming half of the visual space. In my opinion, that screen represents the pinnacle of UI design: no confusion, and it's painfully clear what the User should do. But I digress.

Buttons are an essential navigation element on any UI, regardless of what Steve Jobs will tell you. But there's more to button design than just dropping a handful of options onto a screen. The button itself can give the User an indication of which action she should take.

Let's take a look at one of the screens we developed for docmetrics:

A screenshot with different-looking buttons.

Notice how attention is drawn to the "Next" button, whereas the "Back" and "Finish without forms" buttons are less emphasized.

This is a really subtle effect, and it may not seem like a big deal, but take a look at the same screen with similar-looking buttons instead:

A screenshot with similar-looking buttons.

Notice how your attention is no longer guided towards the "Next" button? No actions are empasized, and the User doesn't know what her "default" action should be. For the first-time User, this is a big problem.

I noticed Firefox making use of this principle. See the screenshot below. Notice that the "Back" button is significantly larger than the "Forward" button. At last! Someone acknowledges that nobody uses the "Forward" button!

Using different-looking buttons draws attention to primary actions and de-emphasizes secondary actions. If you're worried that your Users won't be sure which action should be their "default," make one of your buttons visually distinct from the others.