This link has been bookmarked by 388 people . It was first bookmarked on 23 Mar 2009, by John Keyes.
-
14 Jan 16
-
14 Dec 12
-
We know from user testing that mega menus work.
-
Mega drop-downs make it easy to use icons and pictures when appropriate. And, even if you stick to text alone, you have richer typography at your disposal (letting you differentiate link sizes according to their importance, for example).
-
Chunk options into related sets
-
Keep a medium level of granularity
-
Use concise, yet descriptive labels
-
To keep words short and direct, the base form of verbs ("shop") is usually better than gerunds ("shopping").
-
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.
-
The standard usability guideline to "keep it simple" also applies to mega menus. Just because you can put anything into them doesn't mean that you should.
-
A final point here: just because mega menus are big and have room for many options doesn't mean you should overload them. Simplicity applies to interaction semantics at least as much as it applies to the presentation layer. Fewer options mean less to scan, less to understand, and less to get wrong.
-
Even if coded correctly, mega drop-downs can cause problems for low-vision users who use screen magnifiers to enlarge tiny portions of the screen.
-
-
08 Sep 12
-
06 Sep 12
-
24 Apr 12
-
26 Feb 12
-
06 Jan 12
florence ruellanBig, 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.
-
- 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 menus have the following characteristics:
-
-
22 Dec 11
-
11 Dec 11
-
11 Nov 11
-
26 Oct 11
-
25 Oct 11
-
17 Sep 11
-
14 Sep 11
-
07 Sep 11
-
30 Aug 11
-
17 Aug 11
-
01 Aug 11
Zdenek ZengerNielsen and Megadropdown menu
webdesign nielsen menu megadropdown knowledge usability accessibility
-
30 Jul 11
-
18 Jul 11
-
02 Jul 11
-
26 Jun 11
-
09 Jun 11
Chris WhiteUsability studies show mega menus have greater usability than regular drop down menus.
-
31 May 11
-
27 May 11
-
26 May 11
-
13 May 11
-
10 May 11
-
20 Apr 11
-
19 Apr 11
-
05 Apr 11
-
28 Mar 11
-
18 Mar 11
-
14 Mar 11
Christian SaxGiven 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
webdesign usability navigation ui dropdown menu megadropdown design pattern
-
28 Feb 11
-
12 Feb 11
-
31 Jan 11
-
26 Jan 11
-
07 Jan 11
-
05 Jan 11
-
29 Dec 10
-
28 Dec 10
-
17 Dec 10
-
16 Dec 10
-
13 Dec 10
-
11 Dec 10
-
08 Dec 10
-
17 Nov 10
-
16 Nov 10
Peter TatianBig, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.
-
15 Nov 10
-
12 Nov 10
-
04 Nov 10
-
22 Oct 10
James Otto"Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices."
usability navigation webdesign menu design ui interface dropdown JakobNielsen
-
20 Oct 10
-
15 Oct 10
-
13 Oct 10
-
12 Oct 10
-
05 Oct 10
-
14 Sep 10
-
09 Sep 10
-
02 Sep 10
-
20 Aug 10
-
16 Aug 10
-
13 Aug 10
-
22 Jul 10
-
05 Jul 10
we are londonJakob Nielsen on mega drop-down menus. One of the articles that seemed to kick start the drop-down revolution.
-
02 Jul 10
-
28 Jun 10
-
22 Jun 10
-
16 Jun 10
-
01 Jun 10
-
17 May 10
-
28 Apr 10
-
23 Apr 10
-
18 Apr 10
-
the mega drop-down menu — tested well enough that I want to encourage its wider use
-
Mega drop-downs show everything at a glance, so users can see rather than try to remember
-
Mega-drop-downs let you visually emphasize relationships among items.
-
Mega drop-downs make it easy to use icons and pictures when appropriate. And, even if you stick to text alone, you have richer typography at your disposal (letting you differentiate link sizes according to their importance, for example)
-
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.
-
the diagonal problem, which happens when the path temporarily takes the pointer outside the active area. The drop-down shouldn't disappear when the user is on the way to point to something within it.
-
The main grouping guidelines are:
-
Chunk options into related sets
-
Keep a medium level of granularity
-
Use concise, yet descriptive labels for each group
-
Order the groups.
-
Show each choice only once.
-
Keep Megas Simple
-
avoid GUI widgets and other interface elements that involve more advanced interaction than simply click-to-go
-
Mega drop-downs are a fleeting screen presence and shouldn't replace dialog boxes, which are the natural home for more complex interactions and can support them better
-
Fewer options mean less to scan, less to understand, and less to get wrong.
-
Accessibility
-
screen readers
-
Even if coded correctly, mega drop-downs can cause problems for low-vision users who use screen magnifiers to enlarge tiny portions of the screen.
-
tiny selectable items hurts touchscreen users
-
two main approaches to improving the accessibility of mega drop-down menus:
-
make each top-level menu choice clickable, leading to a regular Web page where you present all drop-down options in plain, fully accessible HTML
-
Emulate the "keytips"
-
-
16 Apr 10
-
13 Apr 10
-
11 Apr 10
-
07 Apr 10
-
01 Apr 10
crazybikerdaveUsability study on mega drop-down menus and why they work for some purposes. Wonderful article.
-
30 Mar 10
-
29 Mar 10
-
24 Mar 10
nowherefastBig, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.
-
18 Mar 10
-
12 Mar 10
-
08 Mar 10
-
02 Mar 10
-
01 Mar 10
-
19 Feb 10
-
17 Feb 10
Rob JohnsonBig, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.
webdesign accessibility usability interface ui menus navigation css webdev 2010b feb FromDelicious110113
-
16 Feb 10
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.