Chapter 32. Designing Button States

Button states are the different appearances that a graphical button takes on depending on how the visitor interacts with it. DHTML-based Web sites generally define two button states: the default state, which determines how the button looks normally; and the onMouseOver state, which determines how the button looks when the visitor mouses over it. (A JavaScript rollover function switches between the two button states.) Sites built with Macromedia Flash usually include a third state: onClick, which determines how the button looks when the visitor clicks it.

GEEKSPEAK

Button states are the different appearances that a graphical button takes on depending on how the visitor interacts with it.

Button states provide invaluable visual feedback on the average, link-infested Web page. With so much content crammed into a typical browser window, having things happen in response to mouse movements and clicks helps your visitors figure out how to use your site.

FAQ

What's with the strange nomenclature for button states?

Blame JavaScript. The names for the onMouseOver and onClick button states come from the corresponding JavaScript events.

When it comes to designing states for your buttons, you want to capitalize on the psychology of what's going on. In other words, you want your visual effects to correspond to the way your visitor's mind works. You don't want to contradict the psychologydoing the opposite of what your visitor's mind expectsor your site sends mixed messages, and your visual feedback creates confusion instead of improving usability.

Here's the theory: Design button states with increasing energy. To borrow the catchphrase of a famous TV chef, each successive button state needs to "kick it up a notch," following the logical order of how the visitor interacts with the button. Therefore, the default button state needs to be the one with the least amount of energy, since the visitor isn't interacting with it at all. The onMouseOver state needs to kick it up a notch, almost like the button absorbs the kinetic energy that the visitor generates by rolling the mouse. And the onClick state (if you have one) has to kick it up another notch to correspond to the additional kinetic energy of clicking the mouse.

What you're doing here is graphically duplicating the way a real-world object like a machine operates: Energy goes in, and something happens. Your computer's LED doesn't switch off when you power up and then stay on all night after you power down. That doesn't make intuitive sense. Yet how many graphical buttons have you seen on the Web that seem to switch off when you mouse over them? If you design your buttons so that they go down a notch when your visitor interacts with them, it seems like they're devouring energy and contradicting the laws of physics like a bad Star Trek plot.

When energy goes in, something happens. What happens exactly is up to you, but Table 32.1 offers some suggestions, and Figure 32.1 shows a few sequences of button states.

Table 32.1. Design Suggestions for Button States

ONMOUSEOVER STATE (HIGHLIGHTING)

ONCLICK STATE (ACTIVATING)

Make the color of the text label brighter Make the color of the button face brighter Add a border or glow around the button Nudge the entire button, or nudge the text label inside the button Underline the text label Add a bullet to the left of the text label Change the shape or size of the text label's bullet (if one already exists in the default state) Increase the point size of the type in the label

Make the button look pressed in Make the button look fully turned on (if the onMouseOver state looks partially turned on) Animate a quick flash of color in the element you changed or added in the onMouseOver state Add a bullet to the text label (if you didn't already add one in the onMouseOver state) Add an underline to the text label (if you didn't already add one in the onMouseOver state)

Figure 32.1. These button-state sequences go from lower energy to higher energy, just as the visitor intuitively expects.

TIP

Get creative with designs for the onMouseOver state, since what you want to do is highlight the button. Buckle down for the onClick state and go with the typical button metaphor of pressingthat is, make your button look pressed in, no matter what ingenious idea you came up with for the onMouseOver state. Making the button look pressed in is the most intuitive way to communicate to your visitors that they just activated your button.

TIP

Don't use a pressed-in design for the onMouseOver state, since it suggests to the visitor that the button has been activated (that is, clicked) when in fact it has only been highlighted. Save pressed-in designs for the onClick state in Flash sites.