The Confusing Mouseover

Posted by Martin Vilcans on 8 August 2007

Several years ago, web browsers started to include support for mouseover effects, i.e. the effect that a clickable link or picture changes its appearence somehow when you hover with the mouse pointer over it. In some cases it provides useful visual feedback, e.g. when a tiny text link changes colour when you point at it, so you know that you have hit the right spot and can click. As the mouse pointer changes from an arrow to a hand as well, you get visual feedback anyway so it's not completely necessary, but GUI design is not like database design and redundancy is often a good idea. (For example, in your e-mail inbox, you'll want new e-mails to be visually different from old e-mails in more ways than one, such as having a different icon, a bolder font and a different colour.)

After the Web became popular, desktop applications started to imitate the look of web sites. Developers started to implement mouseover effects on toolbars and menus. The picture below shows the toolbar in Firefox, which is an example of a good use of a mouseover effect. (I had to draw the mouse pointer by hand as it wasn't captured by alt+PrintScreen.)

But just like anything, mouseover effects can be misused and confuse the user. Here's a screenshot that shows behaviour in Microsoft Powerpoint that has confused me several times.

I didn't draw the mouse pointer on this picture, since when I was confused by Powerpoint's behaviour I was using the keyboard, not the mouse. I didn't care about or know where the mouse pointer was. That's why I was surprised to see that both slide 23 and 24 in the overview column to the left seemed to be selected. At first I thought this was a bug (probably a repaint that was missing), but I realised that the reason that slide 24 is highlighted is that the mouse pointer happened to be on top of it. The yellow colour is the mouseover effect, which looks all too much like the effect on the selected slide (the darker reddish colour). There are more examples of mouseover effects that are too similar to the "selected" effect on the web, but it tends to be more confusing when you're not navigating the application with the mouse.

EDIT: I got bitten by Powerpoint's behaviour once again just now! Even though I wrote about the problem less than an hour ago, I still was confused for a second before I realised that I was looking at the wrong highlighted slide. Also, I just now realised that Powerpoint doesn't remove the yellow mouseover effect when I move the mouse out of the slide's active area! That must surely be a bug.

Previous: My Other Blog
Next: New feed, more tagging

Comments disabled on this post.