Following on from the first in the series ‘Usability best practice’ which focused on the use of Tabs as navigation I am continuing with another form of navigation system. This blog focuses on mega drop-down menus and their main features and how they have improved standard drop-down menus.
The mega drop-down menu is a new and increasingly used navigation system and one that Jakob Nielson actually recommends using in his Mega dropdown navigation menus work well study. They offer the user a clear preview of the site and access to the majority of its pages. Not only are they a great navigation device they can really enhance the look of your site.
John Lewis is a good example of a mega drop-down menu.
- Single drop-down appears on hover
- Contents displayed in one large panel with no scrolling
- Links are grouped into clear and relevant categories
- Easy to use and are accessibility compliant
How to use:
- Keep them simple do not add text fields or command buttons try to keep them simple links
- Icons or other graphics can be used to aid the user
- Menu should appear after the user has been hovering for 0.5 seconds over a category before the drop-down appears
- Once the menu had been revealed it should remain for 0.5 seconds after the user moved away from menu category box
- Create them with accessibility in mind – One solution is to make only the top-level categories accessible and not the content of the mega-drop down
- Use colours that don’t conflict with the rest of the site leading to the menu getting ‘lost’
A good use of icons/graphics being used with the menus system is Aviary.com.
Problems with ‘regular’ drop-down menus:
- Site categories can be hidden which presents an immediate barrier
- They don’t support category ‘grouping’
- They can be hard to use usually with a small active area making them very fiddly!
- Particularly bad when a second level of navigation is included. Usually another drop-down menu appearing to the right of already selected drop-down menu
- Less flexible and scalable limiting the site’s growth
- Can lead to poor user orientation making the user ‘lost’ in the site
An example of a poor use of drop-down navigation is Toshiba which is too small making the text hard to read and is difficult to use. Also, the colours used don’t distinguish the navigation from the rest of the site enough – very disorientating.
In conclusion, mega drop-downs can help improve the navigability of your site and can also look very stylish. Also, if they function correctly they will build trust between the user and the site which is invaluable for any website.Tweet