The Me-Too-ness of Ecommerce Category Navigation

By , User Experience Director

Looking at ecommerce sites is a bit of a hobby-slash-occupational hazard for me. I’m always looking around to see what people are doing to innovate in the interactive retail space, and that means I see a lot of patterns, both good and bad. The smaller boutique retailers are a little exempt, they tend to use more interesting custom interfaces – but the big players tend to stick with the same safe solutions that we see again and again (and again and again).  Today I’d like to talk about ecommerce category navigation, and some things you can keep in mind when trying to improve or design a store.

The problem is well-known:  You’ve got a site filled with hundreds or thousands of products, and you need a mechanism for your customer to find what they’re looking for or shop around for things to purchase. The interesting thing about this problem–which can be solved in so many ways–is most often solved in the same generalized way:

 

June14_fullnav

 

Look familiar? You’ve got your category groupings, a few popular links listed beneath, with a view all link that presumably takes you to a category landing page where you can explore further.  Very functional. Very boring. I know that navigational structures like this work fine, we’ve seen users have no problem with them, but there are serious risks in overwhelming a customer when you present them with too many text choices with little to help them parse the information. When it comes to fulfilling a user’s needs AND giving them a world-class experience… I like to see a little more elegance in the solution.

So let’s take another step into The Land of a Little better:

 

June14_fullnav3

 

Fundamentally the same idea, right?  However, they’ve augmented the display with product thumbnails that maintain the flavor of the site and serve as wayfinding elements that help the customer zero in on the type of product they’re looking for. There’s also a bit more visual hierarchy between the category headings and each individual element. I’d like to see this design opened up a little bit more, it feels a touch crowded. But its heart is definitely in the right place.

Interfaces like these are great for large sites filled with thousands of products.  If you’ve got a little more of a limited product offering, or a taxonomy that lets you narrow your top-level categories into a manageable set of options, it’s time to get a little more creative and visual:

 

June14_fullnav2 Screen Shot 2014-06-06 at 3.01.06 PM

 

The fun thing about these is you have nearly unlimited opportunities on how you can present the visual view of the products using animation and presentation. If you’ve got more categories than can fit on one view, you can animate them all in from one side and tease the remaining category images to indicate more options are waiting in the wings.

Finally, let’s take a look at some navigation that’s integrated within the site structure:

 

June14_Macys

 

Here we have individual category clusters on the left side of the navigation, with the sub-categories expressed with photo icons in the main frame. The great thing about this is that the main categories are much easier to read through, and the icons help lift the sub-categories up tremendously.

Above all, the most important aspect to any navigational structure is that the user is able to parse and understand the breadth of your site in around ten seconds, and a quick usability test of a handful of people will let you know if you’re successful.

 

A Post-Script:

Please make sure your menu behaves itself. Don’t make your customers play whack-a-mole with your interface. Get clever with your code so if the user takes their mouse out of the hot zones for a few seconds, the menu doesn’t disappear or act erratically. This is especially important if you absolutely have to use an interface with nested options. But try your best not to do that.