Originally published: Oct 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)
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)
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)
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)
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.•
Read related articles: