Blog

Not Clicking is Not Action

December 09, 2006

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.

Posted by rus at 04:50 PM

Comments

Yeah, I know I have way too much free time. :) But we're actually fighting about this at work, someone came up with a new HTML template for a new deliverable we're planning, and it has all these rollovers, and one team is threatening not to do their deliverable at all if they can't get rid of the rollovers.

Also, I read with my mouse, but the ergonomics lady told me to stop, so I'm trying to be more like the normal people now.

Posted by: Theresa at December 10, 2006 11:25 AM

I listen to pledge breaks as well.

How about the netflix popups? I have learned to appreciate those - saves me a clickthrough usually - but almost every other time I've seen something similar it has been frustrating.

Posted by: Dave G at December 10, 2006 12:53 PM

Funny you should bring up the Buy.com example. Just this weekend I had the following interchange with my sister (entitled "How Buy.com made me look bad"):

Sister: Where's a good place to buy an iPod case?

Me: Try Buy.com, they're giving good discounts when you buy with Google checkout.

Sister: (goes to Buy.com, searches for iPod case, starts looking at results)

Buy.com: (starts throwing up giant mouseover popups in search results)

Sister: Whoa, why is it moving around like that?

Me: Umm... they're, uh... trying to show you a preview or something... (regrets Buy.com recommendation).

THE END

Posted by: Abe at December 11, 2006 06:26 AM

See, I actually find the Netflix movie info rollover a bit annoying as well, because the rollovers are quite large when they appear, and each Netflix screen has hundreds of "hot" areas.

But unlike a lot of rollovers, the Netflix info popup only appears after a delay, which is more like the tried-and-true "tooltip" interaction style, which users have grown accustomed to.

I would argue that a small, clickable "[?]" icon would have been better, albeit maybe less discoverable (fixable with a one-time OOBE or a "Did You Know..." or similar).

I think it's interesting that you see the rollover as saving you time--- objectively it's actually slower than a click because you have to wait for the timeout to occur.

But as usual, the perceived performance is much more important, and that's probably a rollover's best argument for existing: it's really only been in the last 12-24 months that users could reasonably expect a click to sometimes not result in a 1-5 second page load. You don't know if you'll like what you get when you click (or if you'll think it was worth waiting for), so you often don't click.

But the rollover is the designer's opportunity to get you to "trip" over the behavior--- maybe you don't like the behavior, but since the page is booby-trapped with it, you'll definitely at least discover it.

Maybe if rollovers had a little "Never show me these again" checkbox that we could click, that would reduce the annoy-ware factor of this discoverability-through-booby-trapping design pattern.

Posted by: Rus at December 12, 2006 08:06 AM

Here is an example of rollovers from a company that is known for having good usability:

http://picasa.google.com/intl/en_us/web/learn_more_picasa.html

Posted by: adrian at December 12, 2006 02:45 PM

Actually, the popups appear faster than waiting for the new page to load (~3s), even with the delay (~1s?). Maybe the action begins faster, but it doesn't finish faster (at least for my connection). But I have realized, I only actually use it on my queue page, where it is nice to not lose the context, esp. if I am rearranging things, in order to remember what the hell those weird foreign movies that seemed like a good idea at the time were before they get bumped down the queue to make room for more tv show dvds.

Posted by: Dave G at December 14, 2006 05:02 PM

I think I would like to marry you next.

Posted by: Becky at December 21, 2006 02:11 PM

Both of us have bad track records at this point with committment. Would you settle for lunch? :)

Posted by: Rus at December 22, 2006 12:12 AM