Using mouseovers in web design
'Mouseovers' are common effects, by which an element changes in
response to the mouse pointer moving over it.
They make links more useful, by clarifying what's active. Mouseovers
are practically a universal standard, and should be used wherever
Mouseovers can be implemented through
- HTML properties
(e.g. 'hover' and 'active' link colours)
- Switching images
- CSS styles
(can apply link colours, and all properties can be switched using
- Flash, Shockwave, Java etc.
Whichever technology is used, there
are four core principles to follow to make sure mouseovers enhance
Principles for effective mouseovers
- Use only for highlighting
hotspots or associating complex elements
- Direct effect: the entire
visual element should respond to mouseover
- Highlighting: live links
should respond positively to activation
- 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:
- Highlighting an active link or
hotspot: "This is clickable"
- Highlighting the scope of a
clickable hotspot: "If you click now, you're clicking *this*"
- 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
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
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
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
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.
This is a good site (and the book is
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
It doesn't want
you to click it!
Update: They've now
removed this effect from the site - well done!