Users Decide First; Move Second

Designers use interactive design elements, such as fly outs, rollovers, and dropdowns, to conserve space, make the screen less cluttered, and enhance the users’ experience. We were surprised when users succeeded more often when they didn’t encounter these design elements than when they did.

Fly outs are menu options that “fly out” from the button or link when the mouse rolls over them. Rollovers are design elements that cause something on the page to change when the user moves the mouse over it. In addition, dropdowns are window-shade-like menus that require the user to “pull down” the options by clicking on an icon, usually an arrow.

Designers continually battle the problem of limited space. On the surface, it seems that many sites are better served displaying exciting examples of their products or content on the home page, so minimizing the space occupied by category links makes sense.

Theoretically, the interactive elements should conserve space without decreasing the usability of the site. If we measured whether users found information they were seeking, we should see no difference in their success on the sites with the interactive elements and the sites without those elements. In fact, we should see users pay more attention to the featured content on sites with the elements, because of the extra space the designers dedicated to that content.

In watching users hunt for content, we’ve found just the opposite. Sites without these design elements did a better job of getting users to the content they sought and to valuable content they didn’t previously know existed.

We found users follow a pattern: they decide what they are going to click on before they move the mouse.

This is most prevalent when users have to scroll. They bring their mouse to the scroll bar and it stays there until they are ready to click on something.

Unfortunately the information in fly outs, rollovers, or dropdowns can’t help users decide where to click because the information isn’t available to users when they are making their decision. It isn’t until after they’ve decided where to click that they see what the element has to say.

In our studies, we observed that once users realized there was more information available to them, they stopped and re-evaluated the screen. Users seemed disoriented by this disruption in activity and they lost confidence that they were clicking in the right places. The users now questioned a choice that seemed to be a good one earlier.

Some dropdown and fly out implementations required our users to use awkward movements to make simple choices. For example, on a recent version of the Verizon site, the user was looking to find out more about the Verizon Foundation.

They had already guessed it would be under About Verizon and were ready to click on it. However, when they moved their mouse over that icon, more options appeared. They saw the Verizon Foundation link appear, but every time they went to click on it, the link would disappear. Instead of using a natural movement of bringing the cursor straight across, the rollover forced the user to use an awkward two-step movement: move down then to the left.

MSNBC.com has a similar problem with the fly out menus they’ve designed for their news. Users became frustrated because they couldn’t see the content in advance of choosing a category and some had problems with the menus going away when they used natural movements. Users expended so much effort to select a menu choice that they often missed stories that might otherwise have attracted their attention.

In contrast to MSNBC.com users, CNN.com users had no trouble getting to the stories that interest them, even stories they weren’t previously aware of.

While we actively support and encourage designers to explore new interactive design elements, we recommend they focus their efforts on achieving their goals. If the goal is to get users to the content quickly, simple usability tests can help designers identify any problems that prevent users from this goal. If you are using these interactive elements on your site, you want to do some simple tests to ensure they are helping your users.