Why Good Drop-Down Menu Design is More Valuable Than You Think

Posted by Hannah Stacey 10 Jul 14

Ometria_ebook_CONVERSION_HACKING_15_pdf__page_10_of_47_Are you fully exploiting the merchandising potential of your ecommerce store’s drop-down menus?

At Ometria’s latest breakfast seminar, renowned ecommerce expert Dr Mike Baxter offered some wisdom on drop-down menu design, alongside a variety of other ecommerce conversion ‘hacks’ - now available in a free ebook, Ecommerce Conversion Hacking: 12 clever tricks for boosting your online selling power.

In this video (a transcript of which is available below), Mike covers how to increase the converting power of your drop-down menus by using them to:

  • Make personalised product recommendations
  • Showcase product ranges
  • Increase the footprint of your website

 Ecommerce Product pages


This copy of ‘Homepage Usability’ by Jakob Nielsen and Marie Tahir that I brought along today was published in 2002 and it was actually quite a big deal for me at the time, because it basically told me that you can do science on websites.

One thing that I thought was intriguing was that in the preface, the first thing they say is:

“Homepages are the most valuable real estate in the world. Millions of dollars funnel through a space that’s not even a square foot in size.”

Anyway, the reason I went off on this ramble is that drop-downs increase the real estate on pages, and they do so in a profoundly rich way.

So here, for example, at the top is the Apple site. When I start to type iPad into the search bar, I immediately get a dropdown. And what this is doing is merchandising to me: it’s not just telling me what the search result might be that I’m looking for, it’s actually promoting stuff to me. So it’s using this extra piece of real estate that appears, prompted by a customer action, and it enables you, the online retailer, to merchandise on it, which is very powerful stuff.

Another nice piece of user merchandising is from Audi. When you get onto the car section and ask, say, ‘what does the R8 look like?’, you get a drop down menu that allows you to look at different variants of that particular model. Not only this, but it also makes you think ‘how amazingly cool does that car look?’. So again, it’s increasing the real estate that’s available to you and offering you new merchandising opportunities that are specific to the interests of your customer.

Here are another couple of examples. You’ll see as you hover over the women’s page on John Lewis that what they have done  - although they’re only using text - is they’ve got a whole bunch of clothing categories and they’ve also got an accessories category. But they’re also using the drop-down for slicing and dicing their catalogue in different ways like this, a whole ‘inspire me’ section. This gives you access to a whole bunch of different ways of presenting what is effectively the same content.

By using different facets, features and tags associated with content, you can increase the footprint of your website massively. If you only had your traditional hierarchical category menu, you might have a website of a thousand pages, but if you start slicing it and dicing it in different ways and you add, for example, a whole page for white dresses and a whole page for lace dresses and a whole page for floral dresses, and so on, you can see that a thousand page site might just have increased to a ten thousand page site. And again with M&S, in their ‘food to order’ and ‘occasions made easy’ sections, they’re using promotional panels within drop-downs.

So drop downs: are they a hack? Well to an extent, yes, as you’re effectively using simple Javascript (and there are jQuery instructions that will allow you to manage most of the drop down functionality that you would want). You would need to include your new panel in your template as it will need to be populated and, perhaps the trickiest thing, you’ve got to make sure that it’s wired up to your content management system in a sufficiently robust way.

So for some of you the functionality is probably already there available to be switched on, for others it might need a bit of development work. But if you can customise your drop-down menus and you’re not using them right now, you’re really missing a trick.

Artboard 10 B-1.png