Questions regarding the use of arrows with navigational flyout menus

23 Feb 2009 - 2:40pm
7 years ago
4 replies
1300 reads
Greg Bosque

Looking to get some feedback on your experiences regarding the use of
fly-out menus within top-level website navigation. Here is a link to a
JPEG file that provides three examples:

1. Linked in
2. New York Magazine
2 Yahoo Travel

Each example uses arrows next to several of the navigation labels to
indicate additional options. However not all act consistently with
some requiring just a simple roll-over while others a physical click.

My questions to the group are:

1. What are folks experience with the use of arrows and requiring a
physical click versus just a rollover?
2. Do the arrows help site visitors understand the available options?
3. What are your overall usability impressions of the duality of
clicking the label itself for navigating and an additional arrow, box
or image to expand a menu?

I searched the archives but could not find anything relating to Fly-
out navigation. I am new to this group and greatly appreciate any
feedback provided.



24 Feb 2009 - 3:14am
Yohan Creemers

Hi Greg,

The answer to your questions from my point of view:

1. A rollover could be annoying for users when the mouse hovers over
the menu unintentionally. For that reason I used a short delay
between rollover and showing the menu in

2. Yes, I think the arrows on the right site of the label are a clear
visual clue for the hidden dropdown menu.

3. If the label and arrow are part of the same gui-element, then they
should have the same interaction. The LinkedIn example is different
from the other two examples in the way that the label and arrow are
two separate gui elements. A click on the label opens a new page, a
click on the arrow shows the dropdown menu. Flickr does the same. I
presume that the clickable label is meant as help for novice users
-not used to dropdown menus- or for accessibility / easier keyboard
interaction. That would make sense to me. LinkedIn made a strange
choice however: using the keyboard label and arrow do act as one
single gui element.

- Yohan

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new

24 Feb 2009 - 10:23am
Greg Bosque

Thanks Yohan for your input.

I too agree that rollover menus can become annoying with the mouse
hovering and your not expecting it. I also personally prefer the
duality (single click on the link to access section / landing page,
etc. and then click on arrow to expand an optional flyout menu).
However I don't think this is as a common behavior for users as I
would like.

We have implemented plenty of mouse over fly-out menus and haven't
received a lot of concerns from customers, and it seems to be more of
the norm on the web versus the way traditional desktop applications

I am in the process of trying to influence a new client into moving
to the click to expand approach and wanted to see what others had
experienced to help build or adjust my case.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new

4 Mar 2009 - 4:19pm
Matthew Ventre


If you've designed a small target area for the arrow and not given
it separate treatment you then you may have a situation where the
user could overlook the arrow's function entirely.

What's more, a user might have the expectation that the menu behaves
a certain way e.g. a click opens the accordion menu. All it takes is
one click to destroy that expectation e.g. when their click on the
text, whose target area is larger, produces a jump to a new page.

Of course, this is subject to your own testing. At the very least,
separating the behaviors by creating two distinct UI elements and
aligning your interface with user expectations up front is a good
course of action.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new

Syndicate content Get the feed