Menu

Beta — We’re reformatting our articles to work with the new site, but this is one hasn’t been done yet; it may contain formatting issues. No need to report this. We’re working on it.

Users Decide First; Move Second

by Erik Ojakaar
on October 25, 2001

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. (Figure1)

crate & barrel flyout menu
Figure 1: Most users do not move their mouse over categories until they
have already decided where to go.

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. (Figure 2)


Figure 2: The content of a dropdown menu is only visible if the user decides
to click on it. How likely are users to look at the site’s Olympic Games content
if they never click on the Motorsports/Other dropdown?

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. (Figure 3)

Verizon's disappearing menu
Figure 3: This older version of Verizon’s site made moving the mouse in
a straight line unusable. The user wanted more information on the Verizon Foundation,
but the option kept disappearing.

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. (Figure 4)

msnbc flyout menu obscuring content behind it

Figure 4: Users couldn’t see what the categories at the bottom contained
before they moved the mouse.

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.
(Figure 5)

cnn.com's simple design
Figure 5: CNN.com doesn’t use fancy design elements. Users could see the
categories and what they contained. They were more confident that they were
going to find their desired content.

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.•