Principles for effective mouseovers

1. Use only for highlighting hotspots or associating complex elements
2. Direct effect: the entire visual element should respond to mouseover
3. Highlighting: live links should respond positively to activation
4. Timing: Mouseover behaviour should respond directly to mouse stimulus

1) Use only for highlighting hotspots or associating complex elements

Mouseover behaviour really does one thing, which is to say: This is the current mouse target.

This information has three main uses:

1. Highlighting an active link or hotspot: "This is clickable"
2. Highlighting the scope of a clickable hotspot: "If you click now, you're clicking *this*"
3. Showing the user the scope of the current object, e.g. highlighting a row on a table tells you "All these pieces of data are the *current thing*" (see simple example on right). This may or may not also represent a clickable area.

Each of these uses can increase usability. They are now practically a universal standard (even more than simply a convention), standard practice on MacOSX and WinXP's buttons.

Do not use mouseovers gratuitously. Unless you're highlighting an active link or hotspot, or giving the user useful information, don't use a mouseover effect.

2) Direct effect: the entire visual hotspot element should respond to mouseover

For mouseover highlighting to work, there should be a direct mapping between cause and effect. Any visual change should affect the entire active hotspot. This gives the user useful information about the size and integrity of the clickable object.

People sometimes wave the mouse over unclear navigation controls, in order to gather information on what's clickable by noticing what responds to mouseover.

There are circumstances when the link's action will affect another screen element, when it may be appropriate for that other screen element also to change visually. In such cases, the hotspot must also change, in order to satisfy mouseover rules.

Hyperlinks in text can have mouseover effects (using the CSS pseudo-classes a:hover and a:active). Web browsers ensure that the whole link responds to mouseover. What about when text hyperlinks are featured in boxes, such as buttons, tabs or other navigation elements? If the HTML anchor is placed around the text, only the text will respond to the mouseover. Be careful, if the entire box highlights, the entire box must be an active hyperlink.

3) Highlighting: live links should respond positively to activation

A subtle lightening or addition of colour is often best.

If a link is 'live', any mouseover effect should have the effect of highlighting, showing that it is active or ready.

However, be careful that any lightening effect doesn't reduce contrast so much that the link recedes!

4) Timing: Mouseover behaviour should respond directly to mouse stimulus.

That means that the 'highlight' effect should remain as long as the mouse button is down over the element. The effect should not flash and go back to normal, unless the mouse leaves the target area (see e.g. http://www.diy-hosting.com). If the mouse moves outside the target area (whether the button is down or up), the element should revert to its default, un-highlighted state.

Make sure that both 'on' and 'off' effects appear instantaneous. Any delay more than a split-second degrades the user experience significantly.

For this reason, I recommend using CSS for mouseovers wherever possible. Many effects that can be achieved through switching images can be achieved in CSS, with the added benefits of greater flexibility and easier maintenance.

Example: michaelheppell.com

This is a good site (and the book is brilliant!).

BUT, if you mouse over the 'About be Brilliant' panel, and the graphic actually blurs! Try it:

This is totally wrong, because it breaks the 2nd Principle. Blurring an element makes it seem less - not more - active. It suggests "unavailable", as though it's moving away from you.

It doesn't want you to click it!

Update: They've now removed this effect from the site - well done!