Mega drop-down menus

September 23, 2016 8:30 am

Mega drop-down menus



Mega drop-down menus have been endorsed by UX experts including Jakob Nielsen for their ease of use, so it’s no surprise that they have become the menu of choice for most retailers. Using a mega menu on your website has added advantages over using a regular dropdown menu. Not only can your users easily see everything at once without having to scroll, but they can also help illustrate relationships between categories, through the use of subcategories. Research by Jeff Sauro suggests that at any given time, 68% of users on your site are likely to be browsing, while only 16% are actually making a purchase. Therefore it’s important to have a website with good navigation. This article will discuss a few of the benefits of using mega drop-down menus, and also some of the disadvantages.

All users’ options are clearly visible at once

While mega drop-down menus allow your users to see all of the options available to them, it is important to clearly define these using visual cues. If you have a long list of options, structure these into subcategories with clear subheadings which help users browse to the sections of your website they are interested in. Spending time getting the organisation of navigation categories right pays off; Jeff Sauro found that better website navigation increases the average order value on products across websites.

The Argos website does both the organisation and the design layout well; clear subheadings separate each column shown to the user in a larger text and underlined, helping them quickly scan the categories available to them. While the subheadings and following links are not alphabetised, they are ordered based on what are seemingly the most popular products on the Argos website. This helps the majority of the users to quickly find what they are looking for.

Argos mega menu

Argos mega menu splits products into sub-categories, clearly defined using headings.

Using images and icons to draw attention

Using images in mega drop-down menus can also help make your website easier to scan for a user, but only if the image clearly represents options available within the menu. Jeff Sauro argues that text associated with images is more effective than just showing text or images alone, so mega drop-down menus can be improved by placing images or small icons near information that you want to emphasise.

In the Disney Store mega menu, shown below, images are used within the menu to help users navigate to the category they are looking for. While the images themselves are self-explanatory, and incorporate familiar Disney characters, they are also appropriately labelled; ensuring users can distinguish the different categories. The use of images can also help draw the users’ eye directly to a product. In the case of the Disney Store the user may see a product which is offered which catches their attention, which they did not intend to visit the site to buy. This therefore helps with up-selling of the websites products.

Disney mega menu

The Disney Store mega menu uses images featuring brand characters to distinguish categories.

Sunglass Hut also uses images to distinguish brands within their menu. Using recognisable brand logos helps users find products they are looking for quicker than having to scan through standard text in a menu, as the typography and style which illustrates that brands logo is familiar with the user.

Sunglass hut menu

Sunglass Hut use brand logos within their mega menu, to allow users to shop by ‘Brand’

Too many options will overwhelm your users

It can be tempting to turn mega drop-down menus into sitemaps, allowing users to see every available option within your menu. This can result in the user presented with a dizzying array of options, and becoming paralyzed by the number of choices available to them.

While incorporating a site-wide mega drop-down menu can seem an easy out for designers and site architects faced with difficult choices, this will overwhelm users and reduce engagement with your site. Taking time to understand how users would organise your website content with card sorts, and checking your navigation structures with tree tests will help ensure your mega drop-down menus are more usable.

Don’t let your mega menu become like this – if Debenhams site map was a mega menu it would be overwhelming

Small screen considerations

Visitors who access websites on their smartphone can run into trouble if they encounter a mega drop-down menu. These menus can become completely non-functional if the window is too narrow, such as on a mobile device, where only a portion of the mega drop-down menu will be visible. A quick solution to this would be to make each top level link clickable, and then re-direct the user to a regular webpage with all of the possible choices displayed. Another solution, is to detect what device the user visits the website on, and to load a different version of the website optimised for that device, so users visiting on a mobile device would view a mobile friendly version of the website – without mega drop-down menus. If you’re looking to optimise your site for mobile devices, have a look at the advantages of making a mobile specific website, or a responsive website. Nielson Norman outlines some of the benefits of both of these methods: https://www.nngroup.com/articles/mobile-vs-responsive/.

Accessibility considerations

Mega menus can also cause problems for some users. Similar to the small screen issues noted above. Low-vision users who use screen magnifiers are only able to see small portions of the menu at any time. They may be unaware of the scale of other content included and mean you lose out on potential orders. With so much text to read through, screen reader users may become frustrated with mega menus as they have to read through it all to find the categories they are interested in. One way to alleviate this is to code keyboard shortcuts to move through mega menus. However, both groups of users may prefer more hierarchical menus which allow them to scan through more manageable shorter sub menus, stepping through categories and sub-categories. Grocery websites such as Morrisons shown below, re good examples that mix some of the benefits of seeing a range of categories with being able to step through shorter sub-menus.

Morrisons flyout menu

In summary

Mega drop-down menus can work very well for your site, helping your users browse and get inspired to explore your website content. However one design does not fit all, and mega-menus are not the only navigation design option. Early research with users to organise your content and design testing with users will help inform the best design for your website.