Big Friendly Buttons

by Zack on August 16, 2009

Big Friendly Buttons

You’re a user experience designer. With every decision you make about your blog, website, or application you’re designing the way your users will experience it. And you want to give them a good experience.

User experience design is half art and half science. Good art is a matter of opinion and tastes change over time. The Mona Lisa might be timeless, but a good website today looks very different than a good website from 10 years ago. Art is constantly reinventing itself.

Science is more stable and easier to measure. With the science part of user experience design you can actually prove that one user interface is better than another. One key metric is big friendly buttons. Larger buttons are actually closer to where your mouse is. This happens because distance on your computer screen works differently than it does in real life.

fitts

User experience design professionals call this Fitts’s law. The equation scared me at first too, but the idea behind it is easy. On a computer screen the amount of time it takes to get your mouse to a control depends on how far away it is and how large it is. Basically, bigger friendlier buttons are actually closer to your mouse.

We can prove it with a simple experiment. Try to press these two buttons with your mouse:

I’ll bet the big friendly button was much easier to press and took you less time. Now let’s try a second experiment. Click the buttons again, but this time do it with your non-dominant hand. If you’re a righty switch your mouse to the left side and vice-versa. That big friendly button is even bigger and friendlier with your left hand.

Bigger doesn’t always mean larger

Big and friendly isn’t just for buttons. It works for links, menu items, and anything else your users might want to click on. Making a control larger makes it an easier target to click on, but that isn’t the only way. On a Mac they made the menu bars bigger by putting them on top of the window and giving them a hard stop. You can push your mouse well past the menu item and still hit it. The menu bar is infinitely large moving upward.

menu_bar_mac

On Windows each menu bar sits below a window title so they’re pretty small.

menu_win

Internet Explorer 8 made it even more difficult to select something by putting the menu bar below the location text field.

menu_win_ie

Making big and friendly UI

Bigger controls are easier to use, but make everything gigantic and you’ll run out of space. The hard stop on the Apple menu bar is one way of making a larger target without taking up more space on the screen. There are a few others.

Invisible borders make a big target without looking big. This technique is used on the icons view when you put your mouse over an image and see the big button border.

Sticky buttons are ones that hold onto the mouse pointer just a little longer than normal. Done right sticky buttons make the target big and friendly, but make the button too sticky and they hold the mouse pointer too long. This Flash-based sticky button demo lets you adjust the stickyness so you can see how they respond.

Expanding buttons make the target much larger by causing the button to grow when the mouse moves over it. This type of button is more popular in Flash. Here is a simple expanding button demo.

Big friendly buttons are a tool to make your applications more usable. They are one more way you can help your users forget about the interface. Leave them thinking how great your application was, not how tricky it was to click that button.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: