Home
5 items | 148 visits
The Usability of the Fly-out Menu
Updated on 2008-03-07
Created on 2007-10-20
Category: Computers & Internet
URL:
-
Usability and Fly-Out Menus : D. Keith Robinson's Asterisk
-
We found users follow a pattern: they decide what they are going to click on before they move the mouse…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.
-
-
90 Percent of Everything » Blog Archive » Mouse-over menus done right
-
(i) the delay, and (ii) the hit area and (iii) the context of use.
-
The delay needs to be long enough to distinguish an intentional “hover”
- 2 more annotations...
-
-
Fly-out Menu - Interaction Design Pattern Library - Welie.com
-
- Issues with Fly-out Menus
- difficult to select if you leave the area. Make it wider that it appears so that it doesn't disappear if you are moving the mouse just a couple of pixels outside of the menu'
- Fly-out with submenus are not a good idea. Really hard to select (Fitts law)
- You must make it clear that it is a menu, for example by adding a down-pointing triangle next to the label
- Make sure they work without Javascript for accessibility reasons. Otherwise search engines cannot index your site and accessibility also suffers.
- Use a delay before hiding the fly-out menu again, e.g. 250ms
- Only use horizontal menus with vertical fly-out menus. The vertical area in which the mouse-pointer needs to be move is too small, i.e. typically 12-14px, and causes the menu to be hidden unwantedly
-
-
Users Decide First; Move Second
-
We found users follow a pattern: they decide what they are going to click
on before they move the mouse. (Figure1) -
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.
-
1 - 5 of 5
Showing 20▼ items per page
List Comments
(0)
List Info
Sponsored Links
Ads by Google