Questions regarding the use of arrows with navigational flyout menus

23 Feb 2009 - 2:40pm
5 years ago
4 replies
954 reads
Greg Bosque
2009

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

http://clients.saforian.com/tests/flyoutmenus.jpg

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.

Thanks

Comments

24 Feb 2009 - 3:14am
Yohan Creemers
2008

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 http://www.vanluin.nl

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 ixda.org
http://www.ixda.org/discuss?post=39123

24 Feb 2009 - 10:23am
Greg Bosque
2009

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

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 ixda.org
http://www.ixda.org/discuss?post=39123

3 Mar 2009 - 10:23pm
Anonymous

I am in a similar quandary, only with arrows to the left of menu items
and with an expandable menu, a la, an operating system.

We are developing a site with a left navigation menu that has several
options within it that expand to show the sub-links within a top-level
category. Little "arrow" to the left (Apple style, right?)

The question is... is it kosher for the little arrow icon to expand
the menu only, while the text/menu option to the right of the arrow
would take users to that page if clicked on.

So, similar to what was mentioned of Linked In and Flickr, just
flipped. We've done no treatment to separate the arrow and text.

My issue is that our menus are very tight; the arrow is quite close
to the text and I can't help but think it's putting two different
behaviors within extreme proximity of one another.

Or, is this a standard behavior? I see it in operating systems for
file structures...

If this seems basic, sorry. I'm rather new at being solely in an IA
role :)

Thanks again,
Jennifer

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39123

4 Mar 2009 - 4:19pm
Matthew Ventre
2008

Jennifer,

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 ixda.org
http://www.ixda.org/discuss?post=39123

Syndicate content Get the feed