This link has been bookmarked by 38 people . It was first bookmarked on 23 Mar 2009, by John Keyes.
-
27 Jun 09
-
28 May 09
Zach Harkey> Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.
-
Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.
-
Indeed, one particular navigation design — the mega drop-down menu — tested well enough that I want to encourage its wider use.
- 2 more annotations...
-
-
Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.
-
Don't make response time too fast, though: the mouse should remain stationary for 0.5 seconds before you display anything that's hover-dependent, such as a mega drop-down or a tooltip. Violating this guideline will make the screen flicker insufferably when users move the mouse. Only after 0.5 seconds of resting the pointer on a navbar item can you assume that a user actually wants to see its associated drop-down.
-
-
-
12 May 09
Thomas BuyleBig, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.
-
29 Apr 09
-
16 Apr 09
-
09 Apr 09
-
02 Apr 09
-
01 Apr 09
Dave JefferyBig, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.
dropdown nielsen jakobnielsen menus ux interface usability webdesign menu navigation
-
31 Mar 09
-
-
For bigger sites with many features, regular drop-down menus typically hide most of the user's options. Yes, you can scroll, but (a) it's a pain and (b) scrolling down hides the initial options. As a result, you can't visually compare all your choices; you have to rely on short-term memory. People have enough on their minds, and messing with short-term memory reduces their ability to accomplish their tasks on your site. Mega drop-downs show everything at a glance, so users can see rather than try to remember.
-
-
Mark BlairSummary:
Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.
To prepare for our upcoming Navigation Design seminar, we've been running user studies of various navigation features. As always, some test poorly. Also as always, the more faddish features — such as tag clouds — exhibit major usability problems.
Luckily, other Web trends fare well in user testing because they have inherently good usability and match user behaviors and goals. Indeed, one particular navigation design — the mega drop-down menu — tested well enough that I want to encourage its wider use.
Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other. -
30 Mar 09
-
29 Mar 09
-
28 Mar 09
-
27 Mar 09
-
25 Mar 09
-
-
Mega Drop-Down Navigation Menus Work Well
-
- Big, two-dimensional panels divided into groups of navigation options
- Navigation choices structured through layout, typography, and (sometimes) icons
- Everything visible at once — no scrolling
- Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs
mega drop-downs have the following characteristics:
- Big, two-dimensional panels divided into groups of navigation options
- 8 more annotations...
-
-
Speed is essential to making any user interface feel responsive. Interface elements must render within 0.1 seconds to suggest physicality and make users feel like a display's changes are a direct result of their actions
-
Don't make response time too fast, though: the mouse should remain stationary for 0.5 seconds before you display anything that's hover-dependent
-
The main grouping guidelines are:
-
Chunk options into related sets
-
Keep a medium level of granularity. Don't offer huge groups with numerous options that require extensive time to scan
-
Use concise, yet descriptive labels for each group.
-
Order the groups.
-
Show each choice only once. Duplicating options makes users wonder whether the two occurrences are the same or different. Also, redundancy makes the entire interface bigger and more cumbersome.
-
-
-
24 Mar 09
-
Stefan WobbenBig, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.
-
-
heavyweight interaction area
-
Keytips are an alternative to access keys
-
-
23 Mar 09
-
Christy TuckerRecommendations for drop-down navigation menus with big menus grouped with structure
-
-
- Big, two-dimensional panels divided into groups of navigation options
- Navigation choices structured through layout, typography, and (sometimes) icons
- Everything visible at once — no scrolling
- Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs (not shown).
As the following screenshots show, mega drop-downs have the following characteristics: - Big, two-dimensional panels divided into groups of navigation options
-
Mega drop-downs show everything at a glance, so users can see rather than try to remember.
- 3 more annotations...
-
-
Mega-drop-downs let you visually emphasize relationships among items
-
Mega drop-downs make it easy to use icons and pictures when appropriate.
-
- Wait 0.5 seconds.
- If the pointer is still hovering over a navbar item, display its mega drop-down within 0.1 seconds.
- Keep showing it until the pointer has been outside both the navbar item and the drop-down for 0.5 seconds. Then, remove it in less than 0.1 seconds.
Thus, the timing should be: - Wait 0.5 seconds.
-
-
-
-
-
Frederik Van ZandeBig, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.
-
-
Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.
-
-
-
Jeff Karlsenmega drop-downs have the following characteristics:
* Big, two-dimensional panels divided into groups of navigation options
* Navigation choices structured through layout, typography, and (sometimes) icons
* Everything visible at once — no scrolling
* Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs (not shown). -
-
mega drop-downs overcome the downsides of regular drop-downs
-
a new form of drop-down
-
-
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.