Navigating large websites has always been a design problem not just with regards to information architecture and taxonomies but also specifically how that information is presented visually on the page.
Web navigation is a key area for usability and new navigation methods are introduced frequently as web programming languages evolve. The last twelve months has seen several large retail sites using ‘mega menus’ as their primary navigation structure. In this article we have reviewed five popular retails sites in the UK with regards to the usability of the mega menus in the site, and we have developed our own check list and criteria to test against.
About mega menus
Mega menus are essentially a development on the classic drop down menu, and more often than not will use visual design with typography and icons to try and display the information more clearly for a wider audience when the user hovers their mouse over the menu bar.
The typical features of a mega menu are as follows:
- Attempts to show all the options in one large area
- Uses icons or other graphics to help the user
- Is a single drop-down that appears on hover
- Groups options into related categories
Summary of results
The list below shows UK retail sites in order of the least number of non-compliances with John Lewis having the least non-compliances (2) and Debenhams having the most non-compliances (6).
- John Lewis – 2 non compliances
- As Seen On Screen (ASOS) – 3 non compliances
- Next – 5 non compliances
- Matalan – 5 non compliances
- Debenhams – 6 non compliances
We chose five UK retailers at random and primarily focused our tests on the horizontal navigation and mega menus themselves and not all of the surrounding content on the page. We chose to conduct a manual expert review for the purposes of this article, and the sites were evaluated by a fully sighted consultant to form an assessment of their compliance some general usability checkpoints.
Each page was tested using these techniques:
- Manual inspection of the source code.
- User interface testing via the GUI of a standard web browser (Windows Vista Business, Internet Explorer 8.0, Firefox 3.5, and Adobe Flash Player 10.0.32.18).
Who we looked at
We based our tests on the following five retail sites in the UK.
ASOS – http://www.asos.com/
Next – http://www.next.co.uk/
John Lewis – http://www.johnlewis.com/
Debenhams – http://www.debenhams.com/
Matalan – http://www.matalan.co.uk/
We tested each site against the following criteria, some of which are based on specific WCAG 2.0 level AA checkpoints, and others are more general usability guidelines:
- Can the user tab around the top level items in the navigation with the keyboard?
- Do the top level navigation items have appropriate alternative text if images are used?
- Are access keys used for the top level navigation items and if so are they implemented in a usable way?
- Is the mega menu constructed using semantic markup?
- When used with screen readers such as Job Access With Speech (JAWS) 10 does the user have to tab past every sub link in the menu before getting to the next top level menu item?
- Does the mega menu appear below the fold at a resolution such as 1024 pixels by 768 pixels?