Best Practice #2: Use chunking and grouping to increase scanability and learnability
So you’ve taken the mega-menu plunge and you now have more labels to fit into your drop-down. How do you make sure it doesn’t look like a mess of text?
There are a couple of options:
Create clear and logical groupings within the menu and give them prominent labels that can easily be scanned.
There are four elements to this approach
1. Logic: Groups have to be internally coherent and logical. Either they are all children of a common parent or somehow conceptually related in a way that is evident and quickly learnable.
2. Labeling: Use simple, unambiguous labels that convey the nature of each group. Decide if your labels will be “clickable” – is there a landing page behind them or is it just a visual way-finder? The mega-menus tend to discourage clicking on such intermediate levels, but marketing may want the space to provide category-level merchandising.
3. Volume: Follow general good practice on number of items in a category. We can thank cognitive science for an easy rule of thumb of 7 +/- 2, but I would say that in a mega-menu, space being limited, I would reduce that to 5 +/-2. This will reduce visual noise and fits well with best practice #1 (less is more).
4. Visual distinction: Use striking colors, increase white space between groups, use shading or dotted lines… anything that you can do to make a visual separation between the groups so that they eye can quickly skip from one group to the other without much thinking.
Let’s look at some examples.
Here’s a screenshot from an office supply site taken a while back:
Aside from the fact that it has far too many terms, it is suffering from not having good visual distinction. It’s hard to distinguish the group labels from the single items below, and some of the terms are a little confusing: “Basic Supplies”? What makes a message pad a basic supply vs. a paper supply? I’d have a hard time scanning that label and deciding to either skip over that category or make the effort to look at the children.
Compare this to the next version of the same site:
We still have the labeling issue, but notice how this is visually much easier to scan – I can concentrate just on the bright blue headings to quickly decide where to focus my attention.
Here’s yet another office supply site:
Good: nice visual grouping – flashy orange & capital letters directs attention
Bad: ambiguous labels (organization? how is a post-it organization?), too many terms in one category
This is fun… One more!
Although they’ve tried to use capital letters and some dashed lines, the grey text just doesn’t attract the eye. There are also too many groups and the inconsistent use of multiple groups per column makes it look cluttered and confusing. Another interesting thing to note is that although visually subtle, the use of groupings likely still attracts attention more than the left hand column which has a collection of single choices. I would venture a guess to say that a majority of visitors to this site would ignore the left hand column altogether (except for the A-Z artist block).
Keep in mind that when available, groupings will visually and cognitively trump singles, so avoid mixing the two approaches.
There are some cases in which the mega-menu does not lend itself well to grouping, such as low term volume (in total or per group). If you have 6 categories with only 2 items in each, it can be more visually distracting to have group labels cluttering up the menu. In such cases, an alternative approach is:
Create “chunks” of related terms separated by white space (i.e. with no labels.)
This approach is definately less straightforward and doesn’t give the scanability that grouping with labels does, but it’s better than a big list of undifferentiated terms.
Again, not as effective as labels, but cleaner and more meaningful than a straight list. Underwear, loungewear and socks are clearly related, and so are all the accessory type categories. One might be able to skip over a chunk after scanning only the first few items once you got the gist of its grouping principle.
Here’s what it looks like when you don’t use chunking or even ordering based on grouping principles.
The price points aren’t grouped together… it’s hard to tell whether the items below mean that they are under 50$ (they aren’t)… the tea products are scattered in with other types… Generally messy.
So, to recap:
- grouping is a good way to reduce the amount of work someone has to put in scanning a larger list of items
- use visually distinctive grouping mechanisms
- make sure labels are simple and intuitive
- if you can’t group due to low volume, consider chunking (or at minimum using meaningful ordering)
Next in the series: Best Practice #3: Use simple & concise terminology