UK retail mega menu navigation review
Ben Logan - Published: 25th Feb 2010 09:42 GMT
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
Methodology
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/
Tests we conducted
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?
Detailed test results
| ASOS | Next | John Lewis | Debenhams | Matalan | |
|---|---|---|---|---|---|
| Pass/Fail/NA | Pass/Fail/NA | Pass/Fail/NA | Pass/Fail/NA | Pass/Fail/NA | |
| Can user tab to top level items with keyboard? | Pass | Fail User has to tab past all content in the page first to get to the menu. |
Pass | Fail User has to tab past all content in the page first to get to the menu. |
Fail |
| Top level navigation items have appropriate alternative text if applicable? | Pass | NA | NA | NA | Pass |
| If using access keys for the top level navigation are they implemented in a usable way? | NA | Fail Repeated use of the same accesskey for different navigation items. |
NA | NA | NA |
| Mega menu constructed using semantic markup? | Pass | Fail Headings such as 'Shop the directory' could be marked up using an appropriate heading tag. |
Pass | Fail Headings such as 'Shop the category' could be marked up using an appropriate heading tag. |
Fail Headings such as 'Ladieswear' could be marked up using an appropriate heading tag. |
| Number of links not too overwhelming? | Fail 225 total in mega menus. |
Fail 349 total in mega menus. |
Fail 272 total in mega menus. |
Fail 272 total in mega menus. |
Pass 76 total in mega menus. |
| Screen readers users have to tab past every sub link to get to next top level item? | Pass |
Fail |
Pass |
Fail |
Fail |
| Mega menu appear below the fold at 1024 pixels by 768 pixels? | Pass | Pass | Pass | Pass | Fail |
| Is there a keyboard trap when tabbing through the menu? | Pass | Pass | Pass | Pass | NA |
| Does the focus indicate which top level menu item you are on when tabbing? | Fail | Pass | Pass | Fail | Fail |
| Skip link to navigate straight to the content and past the menu? | Fail | Pass | Pass | Fail | Pass |
| Totals | 3 | 5 | 2 | 6 | 5 |
Need some more information?
If you would like to learn more about how we can help you run and co-ordinate Usability research then please call us or email us below and we would be happy to help out where we can.
We are ready to answer your questions right now, so please contact us by telephone on +44 (0)207 168 7526 or drop us a quick email info@spotlessinteractive.com and we will do our best to help you with any questions you might have.
