UI Patterns and Techniques

Rollover Effects

Use when:	You've put clickable things on your UI, but you don't want to make them all look like big clunky buttons. Static visual affordances like beveled borders aren't what you want -- perhaps because they take up too much space, or because they don't work with the design, or or because hunting for clickable items is part of the fun for the user.
Why:	Anyone who's used the Web now knows that if something changes when you roll the mouse pointer over it, it's clickable. The motion of the pointer causes the affordance to appear. Another advantage of rollover effects is that the user doesn't need to think about whether or not the pointer is really over an object. They gesture at it, and when they see the object or mouse pointer change out of the corner of their eye, they can click on it. Thus it frees up a little more of the user's vision and attention.
How:	There are many, many ways to do this. Naturally, they can be combined (and frequently are). Multiple affordances are better than just one. The object's color changes, either the text or the background. Most Web sites do this; HTML links do so automatically. Internet Explorer on Windows makes rolled-over buttons go from grayscale to color. Something nearby changes. Perhaps a title or a short description of the item is shown in a designated place; perhaps an image changes. The mouse pointer itself changes. UI toolkits provide plenty of built-in cursor shapes for specific situations -- I-beams for text entry, hands for dragging or button-clicking, etc. Use them where you can. They're standard and expected. The object's size changes, or it becomes animated. Please resist the urge. Your users will thank you. A word of warning: Don't depend too much on rollover effects. The clickable things should bear some visual resemblance to familiar conventions, e.g. text links down the left side of a page. A user shouldn't be expected to go a-hunting for links that aren't recognizable without moving the mouse pointer across every square inch of the page! If in doubt, test with real users.