« Making your day just a bit worse
Tis the Season »
Not Clicking is Not Action
Don't think of this as a blog post so much as an entreaty--- please, I beg of you, stop creating rollovers. It makes no sense, it's really bad user interface, and I'll tell you why:

What's a "rollover"?

It is any user interface element that has behavior or takes action just because the user's mouse is near it, even though they haven't clicked. And whenever you put one into a web page (or really any computer user interface) that you are creating, it makes me want to kill you.

For Example

Look at this buy.com shopping page. The entire window is a grid of the products that you could browse. That's actually pretty good; I can see 12 items at a time--- or can I? As soon as I start to read the page, I find that one of the items randomly swells to hide 3 of the other ones, so now I can only read 9 items instead of 12.

Confused, I realize that it's because of my mouse cursor happened to come to rest on one of the items. So if I'm not careful with my mouse, the page devalues itself. If I want to just read the page's 12 items, I have to first go "park" my cursor in one of the tiny 7 pixel gutters on the page that contain no mouse booby traps. What is good about this?

The mouse is not an eye tracker

Simply put, the mouse position does not correlate with the user's attention. Most rollovers are designed with the assumption that the user is much more interested in whatever is under the mouse, or more likely to click on what is currently under the mouse. But the mouse is NOT an eye tracker, that's a very different kind of interaction. When you make rollovers, you are building your interface on a bogus assumption.

So what does the mouse's position mean, usually?

Most users use the mouse as a tool for clicking (duh?), and so the mouse's position correlates best with the user's last click, not their next click. Most users don't waste energy waving the mouse around the screen, they just look around the screen (which is much faster and more accurate), leaving the mouse motionless until they have selected their next clicking goal.

So if you insist on creating rollovers, the ones that are most likely to activate are the ones under whatever the user last clicked on, such as the previous page, or a dialog box, which are usually not even visible anymore. Is that what you want? Didn't think so.

And what is mouse motion?

While I'm ranting, I may as well emphasize that the mouse is also not a gesture interface. The user cannot teleport their mouse to their next clicking goal, they have to move it along the 2D surface of the screen, from where it is now to where they want it to be for the next click. Most all users, from novice to experienced, will move the mouse as best they can in a basically straight line, according to Fitt's law.

What's important about this is that the user does not regard any elements on the screen except for the next clicking target--- they don't drive the mouse around like a car in Manhattan, avoiding obstacles and planning their route. They just go in a straight line, and if you've put a rollover on the screen that happens to be between any pair of clickable items, the user is going to hit it regardless of how uninterested they are in your stupid popup menu.

So when will rollovers activate?

The actual facts about how users mouse pretty much add up to one answer: Most of the time, rollovers activate by accident. If your interface is full of rollovers, then you've essentially made an interface full of accidents waiting to happen. So unless your rollover actions are very subtle, they will effectively punish the user for even looking at your interface--- every time they move the mouse, you're telling them that they are using your interface incorrectly. Your screens will feel booby-trapped, like there's no safe place for the mouse to go without causing some accidental action. Is that what you want? Didn't think so.

So cut it out!

  • Avoid rollovers that take any action that the user might find frustrating if it were to happen accidentally (rollover-activated ads, zero-click shopping, etc.)
  • Avoid rollovers that reorganize the information on the screen (i.e. rollover menus that shove the layout around when the mouse gets near them.)
  • Avoid rollovers that pop up to occlude click targets; the user might be moving the mouse towards a button at the exact moment that you choose to hide it from them with your stupid popup menu
  • Avoid rollovers that occlude information on the screen, because the user might be trying to read it
  • You can use gleams (little color changes or animations to hint that something is interactive when you mouse over it.) They're okay because activating one by accident doesn't hurt.
  • You can use tooltips if they're small. That's such an old interaction style by now that most people understand what they do, and even expect them.
  • If you want to present more information to the user, you can offer a small icon that gleams when they mouse over it, and uses more screen real-estate only if they click.
  • If you MUST have a rollover display lots of information, why not just reserve space for it on the screen ahead of time? Create a box into which your information is filled, and the user can read it without having to suffer a loss of some other part of the screen through occlusion. (I would argue that this isn't very discoverable UI, but hey, it's a free country.)

Wow, I'm shocked that you read this whole thing. I don't rant very often, and when I do I assume that I get switched off faster than an NPR pledge break. You have way too much free time.
blog comments powered by Disqus
The views expressed on this site are mine personally, and do not necessarily reflect the views of my employer.