You can have absolutely amazing products, and great USPs, if your site navigation is rubbish people, aren’t gonna find your products in the first place.
Today, we’re going be talking about Mega Menus, some tips for getting the most out of them, and why they’re so important.
We talk about search and the importance of search, the value of customers that go through this your search, but your site navigation is the primary way that people navigate around your site.
So it’s worth investing the time to optimize it to make it work for your customers.
So today we’re gonna take you through a few different tips to help you get started with a little bit of a bonus at the end.
Organize your hierarchy
My first tip is about organizing your hierarchy. A no-brainer but useful to do with fresh eyes. Get different perspectives on your products, how they should be grouped together in such a way that is going to make sense to customers. Importantly, from the customer’s perspective, as they are visiting the site, they are going through each set of categories with the thought process of “In my head. I have something that I’m looking for, which of these, say 10 items in this list is most likely to offer the products that are similar to my needs. So consider that when you’re breaking your products up into categories at each different level, first level, sub- children, second level and third level, that is a decision process that people are going through. So, you know, you might go through something such as like a card sorting exercise to help kind of get fresh perspective on how to group things together. But this is incredibly important.
Avoid long lists
Avoid long lists. I mentioned 10 as a number as just an example. That’s probably the upper end of what I would consider. Think of someone scanning through a list quickly. 10 is a lot to hold in working memory to be able to decide which one just as they’re scanning through, which one is the most likely one for me.
And so try and keep it, I would say – useless recommendation but – medium level granularity. So enough depth to understand what is available in your product store, but not to kind of. Go so granular that you’ve got huge long lists of every specific type of category that you could have.
Don’t over filter
Related to this is a tip of don’t over-filter.
This is about the discovery process and aiding it for customers as they come to the store. You want to get them to a category page as quickly as possible with a broad selection of your products in the realm that they might need. And it’ll then allow them to filter and use the filters on the left-hand side to or up whatever you choose use the filters to navigate their search more.
The worst thing that can happen is you narrow their discovery process too early. They land on a category page with 10 products. And if the item they’re looking for, isn’t there, you know, you, you might have it in another category, but they’ve already sort of narrowed their search and they either have to restart or kind of move on or go somewhere else.
Aid scanning with images
Next up use images to aid that scanning. So I said, scanning is, is what the customer’s doing. You know, they’re not reading all the texts. They’re scanning, looking for familiar words to see that they might recognise. You can use images. We know that people recognize images a lot more quickly than text. And so images are a great addition to your mega nav to be able to facilitate this. We’re just thinking about things that make it more attractive, and easier to digest.
Prioritize the order
One more item on the list is ordering. Consider what order to have each of your list items. I think the first recommendation I would have is to order by popularity. So if you’re thinking of your Mega nav, your Mega Menu you’ve got columns of lists your most left-hand column, if your left or right, is going to be your most popular category and sub-category. And similarly within each list most popular to least popular category.
The exception to this rule is alphabetical order. There is a time and a place when alphabetical makes more sense again, to aid recognition.
If your lists are of very recognizable names. So you think TV shows, if you kind of gift seller, you’ve got a list of TV shows, then people know exactly what they’re looking for. Alphabetical makes sense then similarly for perhaps if you are offering gifts and you offer for gifts for dad gifts for mom, then kind of those relationship names, also very recognizable. So alphabetical order makes sense.
But in most other areas you know, like home and garden there are so many different names for things and different categorization techniques that it’s not something that the customer can rely on so far better to just do it based on most likely.
Use promotional images
Another image tip is to have images on the right-hand side of your Mega Menu, which promote the most popular products, current most popular Categories, and trends as that first way of trying to capture people. Or perhaps another bite of the cherry for those that have already looked through the category list and not found what they were looking for.
It’s another way of creating an engaging Menu, another opportunity to capture that customer to pursue and continue the journey with them around the site.
And the last tip I would have is quite common, which is to have another sort of bar at the bottom of your Mega Menu. Again, this could be an image or way or image and icons to advertise. Again, popular categories or perhaps USPs is another common one. So what are your values? Why should the customer choose you? You know, delivery and returns situation. So you can make it most of that as well.
Fix the flicker
One of the biggest drawbacks to Mega menus is a flickering problem. So if you open say the first item in the navigation, Mega Menu opens up and you’ve got a column right on the other side that you want to navigate to. You naturally sort of move your mouse directly to it. But that accidentally activates another Menu item.
So there are multiple ways to solve this, but just make sure you give people time to navigate to a sub Menu item before activating another parent level item, if they just kind of scanned across it quickly with their, their mouse. That’s something to be aware of.
Lazy load images
Lazy load images. I’ve just given you all these recommendations, which mainly involve putting more images on your site. I appreciate. That’s not gonna help from a performance perspective. So certainly look into lazy loading on BigCommerce, there’s lazy sizes available to you out the box that you can kind of hook into.
But you just kind of be wary of you are adding a lot of image, page weight. You that’s the, as with anything, these images are there for a reason. there a good reason, but let’s not make it delay. The sort of main content on each page, particularly with Mega menus, you know, they’re not going to be used in the first, second or so, so it’s a great opportunity to, to lazy load.
Our Mega Menu app
The bonus that I have for you today is that we have launched a Mega Menu app to the BigCommerce app store. Given this is such an important area. As, as I’ve been discussing, we were a bit frustrated with what came out of the box in BigCommerce. The Menu is very much tied to your category structure and you can’t add additional content very easily.
We were then finding on our projects that we were creating sort of a custom solution for every project, maybe improving upon it, integrating page Builder, but it was still a bit janky. So we wanted a more seamless solution. So we have created an app that enables you to manage your menu items and your menu tree completely independently of your category structure, upload images choose different layouts and add that to your storefront.
So as I say, this is brand new to the app store. We have stores of our own that have already launched with it and more launching soon, we would love to get your feedback.
Please try it out and let us know how you get on.
