« Making Mischief - The Newest Tool for High Resolution Artwork | Main | Using C# To Draw An OrgChart in Visio 2010 »
Sunday
Jun022013

UX: Over-sensitivity in Two-Level Flyout Menus  

This is an issue you'll find often in web sites. Let's take the Vimeo music store (http://vimeo.com/musicstore) where this morning I was reminded of this problems

Snap00034

 

Specifically I'm going to the Search box and look for “Chill out music”. Now just clicking on the search box, reverals the flyout, conveniently for me I see that it is a classic two-level flyout meny. The first level is a category. In this example, it is set to “Genre” and the seccond level a list of items in the category. Fortunately for me, “Chill-out” is already listed (highlighted in red below).

Let's see what happens: 

 

 Animation1a

And now the breakdown: I click on the search boc and see “Chill-Out”

Snap00035-a

 

Naturally intend I move my mouse as shown below.

Snap00035-b

As my cursor crosses the first level of the flyout –  it selects another category.

Snap00036

Now keep in mind I'm not slowly moving the cursor –  I'm making a very fast gesture that will bring the cursor to my destination in a fraction of a second.

The end result is that I have find my mouse where “Chill-out” used to exist on my screen.

Snap00037

This is an irritating pattern because, once a user figures this out they have to carecfully navigate the maze of the flyout as shown below:

Snap00038

 

A couple of things I want you to keep in mind.

  • Depending on the UI, the maze can get tricky to navigaste as you may have to move the mouse down some tight corridors. For example if “Genre”s had been an icon only that corridor may have been very small.
  • Users may not have the physical dexterity to do this –  they have problems moving their hands and so their paths may be more erratic than very precise geometric movements
  • Some users may be using a device that makes such fine control difficult
  • Users may be able to perform the navigation, but it may take time doing it due to their device or physical dexterity

 

Possible solutions

  • One option is to provide a delay when moving over the first category. The problem there is that for some people the delay will not be enough and also other people will perceive the delay as sluggishness.
  • The most straightforeward solution is force users to click on the category to select it instead of relying on merely cursor position.

 

 

 

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>