Wednesday, November 30, 2005

Parts of a GUI: the button

An ancient blog post under Writing.
← Prev   |   Next →

Buttons are an integral part of a Graphical User Interface because they provide a clear metaphor of interaction: buttons exist in the real world so when something looks like a button it is immediately apparent that it can be ‘pushed’.

To use a button to full effect it must be 3-dimensional. Which of the two following buttons is more obviously a button? Which one can more obviously be pushed?

The top button stands out because it is 3-dimensional while the rest of the page is 2-dimensional, and its visual depth makes it look like it can be pushed down. In usability terms we would say that the top button affords pushing.

Different styles of buttons

Yes a button is nice if your GUI’s design can accomodate one, but sometimes GUIs have a 'flat’ theme and a 3D button would stand out like a signal flare. Often these GUIs use simple flat icons as link buttons, but there is little clue that a user can click on them aside from the context of the icon and their cursor changing from an arrow to a hand when the user hovers over them.

You can still have the functionality of a button by changing the state of the icon when a user hovers the pointer over it. This is most common in the internet phenomenon of the mouseover:

The text of buttons often change color when moused over.

The button shown above is not actually a usable design for a button because, while the image itself is 3D and looks clickable, the mouseover does not reinforce its clickability (only its interactivity). This also goes for buttons whose background color only changes.

If a button depresses when it is hovered over, the entire button metaphor is broken. In the real world a button is pushed to activate it, and usually pushed again to deactivate it. If you had buttons like this

email button that depresses when hovered over

you would invariably get inexperienced users yelling, “I want to send email, not cancel it!” Seriously.

The perfect button

From this article we can say that the perfect button design is one that

  1. is 3D
  2. reacts to the user’s pointer in some way
  3. depresses only when pushed.

This is one thing where we really should listen to Microsoft; they have perfect buttons on Windows’ GUI. In Windows the toolbars and quick launch panel have 'flat’ icons, but what happens when a user mouses over an icon?

It pops out to look like a 3D button!

Amazing! But see what happens when an icon is clicked:

it shades as if it were pushed down!

Try and make your buttons like that.

New: Parts of a GUI: the button (this article).

That's all there is, there isn't any more.
© Desi Quintans, 2002 – 2016.