Site navigation on e-commerce websites represents the path that users are following when they are looking for something to purchase. As a consequence, a drop-down menu is a design aspect that will help users to navigate more easily through links.That’s why running usability tests with drop-down menus before launching an online store is a best practice in what conversion rate is concerned.

Drop-down menu and research

Photo source

Drop-down menus are usually activated by customers who are doing research on a website. Unlike the search box, drop-down menus are not so focused on conversion; in a search box, the customers know exactly what they are looking for. It means that they have already done a research.

Customers need to activate the menu by clicking on the navigation bar; otherwise the menu will appear when the slider moves over the menu area. These are the two main options to display the drop-down menu. In case of choosing the click option, make sure to clearly indicate to your customers that they need to click on the navigation bar in order to get the overall view…like Google is doing 🙂

Drop-down menu click

Large drop-down menus offer the possibility to customers to navigate easily through the site, within 3 clicks. Take a look at this example:

Drop-down menu

All of the product sub-categories are displayed at a glance; the customer doesn’t have to scroll down to see the whole menu.

Nice personalization: The categories for Women are:

  • Shop by Product
  • Shop By Edit
  • Marketplace

Drop-down menu

Drop-down menu

On the other hand, the categories for Men are:

  • Shop by product
  • Most Popular
  • Market Place.

The fact that women choose their outfit taking into account where they are going to wear it(at work, at a party etc.) is a great criterion to design drop-menus for clothing online stores.

Pros of a large drop-down menu

  • It works like a filter, so it narrows the chances for the customer to get confused on the website, lowering the number of clicks
  • It gives customers the opportunity to search by criteria like: brand, category, product type, price etc.
  • It offers different paths for the same product due to the selection criteria mentioned above.

Cons of a large drop-down menu

  • It can slow the customer’s path to purchase offering him too many options.
  • It doesn’t work for mobile devices. This is not good news given the fact that the market tendencies show a growth in the online purchases made on mobile devices. Find more about it from this blog article.
  • If not well designed, it can seem cluttered and it may disturb the customer’s first glance.

How to design efficient drop-down menus 

1. Use the menu to promote your USP- the menu is displayed on a horizontal bar on the top of the page. So use it for offers and other promotional stuff that you have

2. Clear headings help you to group all of the links and ease your customer’s task to convert

3. Keep its length short enough so it can be viewed on tablets, notebooks and other devices with smaller display

4. Emphasize your best offers, best-selling products or other features that make you different from competitors in the mega menu, for the same reasons as in the 1st tip

5. Test it in different browsers: different consumer profiles, different browsers to use

6. Pay attention to timing: if the menu disappears at the first move of the slider outside its area, the customer may not return to it and lose his first instinct to action on your website.

7. Organize it through columns: it is a more friendly display and it helps the customer to easily navigate

Other examples of drop-down menus

H&M

Drop-down menu

Zappos

Drop-down menu

Sunglass Hut

Drop-down menu

Designing drop-down menus is just one thing you can do on your e-commerce website. Do more with Omniconvert, with a focus on conversion rate.