Drop-down menus are a valuable navigational tool for e-commerce and other sites. There are potential usability issues, but a well designed drop-down will help customers to navigate more quickly and effectively.
In this post, I'll look at some of the pros and cons of drop-downs, mega drop-downs, as well as some examples and best practices from a range of e-commerce sites.
The importance of drop-down menus
Drop-down menus are now almost ubiquitous on online retail sites and, used well, they enable shoppers to take a shortcut to the product category or sub-category they are looking for, while also providing a chance to promote certain products or offers.
From a design perspective, the use of drop-down menus also allows a 'busy' layout to be tidied up, with all of the sub-categories hidden away awaiting a mouse-over.
However, they can be fiddly to use when not implemented well, and are frequently a pain when viewed on a mobile screen.
Usability issues with drop downs
There are some potential usability hazards with drop-down menus, such as losing the menu altogether by moving the cursor out of the menu area.
To minimise this risk, avoid drop-down menus with more than two levels, as in the example below from Best Buy.
Since the menu and sub-menus are activated, then the cursor hovers over the menu, it is very easy for customers to hover outside of one of the columns and lose the whole menu.
It also makes the menu almost impossible to use on a mobile device.
Making users scroll within drop-down menus should be avoided, as this can be a fiddly process which creates more work for the user, and increases the risk of losing the menu altogether.
Hover or clickable drop-downs?
Another consideration is the action that users need to take to activate drop-down menus. 
Users could either click on the navigation bar to activate the navigation menu below, or else the menu could appear when users mouse over the category.
One advantage of the clickable option is that the menu remains in place whether the cursor remains in the area or not. This therefore removes one potential source of frustration.
The fact that users have to click to activate the menu needs to be indicated, as in the example on the right from Google. However, the majority of retailers use the hover option, which is one argument against the clickable drop-down.
If users hover and no menu appears, they may assume that there isn't one. It also removes the option of clicking on the navigation bar and heading straight for the category page.
The problem of losing the menu due to misplacement of the cursor can be solved by delaying the disappearance of the menu by a second or two.
Microsoft's UK site used to take this approach with its drop-down menus, though it has since redesigned and opted for the clickable drop-down.
If you move the cursor outside of the menu area, it doesn't instantly disappear, but instead users are given a second or two to return to the menu before it vanishes.
This is an excellent solution to the problem which removes a potential source of frustration for web users.
If a menu is activated by the cursor moving over the target area though, it should be easy to close. After all, the user may not have intended to open the menu.
In this example from O2, hovering over the data allowance button opens a drop-down explaining the package, but this then obscures part of the comparison table, and it can only be closed by clicking the X. This isn't ideal.
Mega drop-down menus
Large drop downs can display large numbers of links to sections of the site, and allow users to jump straight to the category or sub-category they are looking for. This means customers reach product pages more easily and quickly.
The design of large drop downs should be tested though, and it is possible to overwhelm users with too many links.
Pros and cons of mega drop-down menus
Pros
- Visitors can reach lower levels of navigation quickly, and with a smaller number of clicks.
- If well designed, the drop-down can offer a variety of paths to the same product depending on how the customer wants to shop e.g. by Brand or by Product Type.
- Drop-downs can be used to filter and therefore narrow the customer's product selection, saving them extra clicks.
- They enable retailers to intelligently merchandise the menus by offering the most popular categories at the top and on the left of the drop-down, where they are most visible.
- Mega drop downs work well with horizontal navigation bars. Microsoft eye-tracking research strongly supports using horizontal navigation across the top of a web page, while Jakob Nielsen backs this up with his 'F-shaped reading pattern', whereby users start by reading across the top line and then look down the page a little and read across again and then continue down the left side.
Cons
- Drop-downs can be very difficult (and sometimes impossible) to use on mobile devices. With the growth of mobile commerce, and the use of tablet devices, then retailers need to consider the needs of mobile users.
- Large drop-downs can slow the customer journey by providing too much choice and complexity. The 'Paradox of choice'.
- They are often scripted with code that behaves differently depending on the browser used.
- Large drop-downs can be visually unappealing and cluttered, making them difficult to scan and make sense of. A well-designed drop-down will use different font sizes and colours, icons and images to make them more readable.
Examples of drop-down menus
M&S tried out a mega drop-down when it redesigned its website in 2009.
One huge drop down menu provided all of the links to the shopping areas of the site, with more than 60 links available from the menu.
All the links are available to click without having to do any scrolling at all, though M&S could have used colour, different font sizes. bold text, and images to make the list easier to scan and digest.
Also, I think this menu was perhaps too large to be usable, and M&S did replace it with a smaller alternative, which is easier to digest.
Kiddicare's drop-down menus provide a good example of filtered navigation, by narrowing users' searches to car seats for the correct age group, or sending shoppers straight to Isofix car seats:
For an example of using drop-downs for merchandising, see how Argos places the most popular products at the top and left of the menu:
On ASOS, the drop downs allow customers to see all of the product sub-categories at a glance:
Comet uses a large drop-down, but instead of using it to display a long list of sub-categories, highlights some of its latest deals and best selling products.
River Island used to have a stark drop-down menu with no background. It does match the brand, though the retailer will need to be careful about the images used behind the menu, as this could make the text hard to read.
It now uses a more 'traditional' drop-down:
Officer's Club shows the price range on its drop-down menus so that users can filter by price before they reach the category page.
This should work well for the retailer's generally price-sensitive customer base.
This is an excellent example from Sunglass Hut, showing images of the different styles of sunglasses provides a very useful navigation aid.
There are a large number of options on this Kiddisave drop-down, but the use of logos does at least help to make it easier to scan:
Tips for improving (mega) drop-down usability
Use headings
One of the main reasons for using a mega menu is to present a large range of links in related sets. To show users which links fall into related sets you can use headings to group them together.
Use columns
Most sites already group related sets into their own columns and often use a single pixel column border to help with demarcation
Showcase your best sellers
Save time for customers by placing your best-selling products on the mega menu so users can click directly to them without the need to visit a subcategory and then locate the product.
Keep it short
Be cautious of making your mega menu too tall. It might extend off the page if they are browsing from a small screen, such as a netbook or mobile device.
You can check how many of your customers have such screens by using Google Analytics. Try to make the menu fit the majority of screen sizes.
Add a border or shadow
Help the menu to stand out from the page content better by using a drop shadow or subtle border. This is particularly important if you're using a white menu on a white background.
Test it in a range of browsers
Make sure the menu works in all browsers by undertaking plenty of cross-browser testing to ensure it's easily navigable for everyone.
Consider using the full width of the page
Some of the clearest and most effective mega menus are the ones which span the entire width of the page, or a significant proportion of it.
They allow the site to include clearer headings, supporting images and promotions for offers and best-selling products, which aids usability and helps drive sales.
Use images and icons
The Sunglass Hut example, and this from BMW show how drop-down menus can be more useful, as well as easy on the eye, with the addition of product images.
Promote your USPs
Promote offers, guides and unique selling points on your mega menu.
Get the timing right
Make sure the menu appears rapidly, stays in place while the user's mouse is hovering over the top and vanishes when the mouse is moved away.
Jakob Nielsen recommends that the menu should wait 0.5 seconds before appearing, as this prevents the menu popping up every time a user passes their mouse pointer over the top.
Vary the menu size if you need to
If some top-level categories contain dozens of subcategories while others contain just a few, consider using mega menus containing different numbers of columns.
Some sites with small ranges in certain areas use a combination of wide multi-column mega menus and short drop-downs to good effect.
Focus on granularity
When you're planning what to include on your menu, take time to consider your approach.
You don't want to offer too many groups or include too many sub-categories, otherwise you'll make the menu too big and overwhelm your visitors with too many options.
No hay comentarios:
Publicar un comentario