In Computer Engineering school you learn the process of procedural thinking; being able to think about a sequence of actions and break it down into smaller sub-procedures. In eCommerce you learn that everything is aiming towards conversion. Every single piece of the puzzle plays a part in the entire picture, at the end it’s the little details that make big things happen. Such is the case of the Navigation.
We’re constantly being flooded with information, product and services. To improve our user experience it’s important that every site not only looks good, but that users can actually find what they are looking for. What’s the point of having a good animation or video if the client can’t find the shopping cart and checkout? The navigation is an example of a procedural thinking, it’s the place that we want to break in smaller pieces, easy to digest, read and find the most important piece of the eCommerce puzzle: Products.
Here’s a list of guidelines for better navigation.
Top-level categorization
There should be clear top-level categories. Depending on how much information you have to spread around, there could be only a handful or twenty. The name of the category makes a big difference. Avoid naming your link something generic like, “Stuff” or “Thingy”. The top level category names should be general enough but specific enough that customers immediately know what’s there.
Looking at one of our sites, pinktartan.com, their large variety of products have been arranged into the left hand side menu . It could be a misleading way of navigating the site if they were to have 20 categories or only 4. Their site makes good use of another good usability idea, minimizing clicks.
Most websites, especially those with lots of content, need navigation menus. Many will need more than two, but the big majority of eCommerce sites have at least two main menus: primary and secondary.
Primary navigation: the content that most users are interested in. But importance is relative to each website marketing strategy; a primary link on one site could easily be on a secondary navigation on another (for example: “New Arrivals”).
Secondary navigation: is for content that is of secondary interest to the user. Any content that does not serve the primary goal of the website but that users might still want would go here (for example: “Backpacks”)
Related: eCommerce Conversion Design Synergy
DROP-DOWNS AND MEGA DROP-DOWNS
Sites with a large amount of products will often need more in-depth navigation. Usually for these sites a single horizontal menu won’t do the trick. Drop-down menus can fit a lot of categories in one space, saving valuable pixels on the screen. Information will be hierarchically organized into sub-levels and sub-levels. Users will appreciate having pre-filtered information.
Even more useful are mega drop-downs, which can accommodate an even wider variety of content and layouts, but more importantly provider larger click areas for users. Just go to snugglebugz.ca/ and take a look at their menu. Mega Menus can hold more content while saving space. They are also the perfect location for additional information like promotions and discounts. In both cases it’s important to clearly indicate that a drop-down is available, use arrows or icons, be creative.
Showcase your Best Sellers
A good conversion practice is placing the best-selling products on the mega menu. This gives the user the ability to click directly on them without the need to visit a sub-category or search for them waisting valuable time.
Test it in a Range of Browsers
The nightmare of every Front End developer, cross browser compatibility. Make sure the menu works in all browsers and devices (touchscreen). Make sure it’s easily navigable for everyone.
Use Images and Icons
bluesodapromo.com for example use icons to appeal the eyes of the customers. They are easy on the eye. They also have promotional clickable areas to their current promotions or best sellers within the sub-navigation.
Related: Home Page Conversion Optimization Tips
Link Contextual Images Directly To The Products Shown
Images are worth a thousand words, use them properly. Images will draw a lot of attention on your site, specially the big banners on the home page or the category pages. If a user gets stuck trying to find the product they are looking for their eyes will wonder quickly around the page looking for anything that might resemble what they want. If you show a contextual image of product or sale make sure it’s linked to the appropriate location of the products being show.
Even if the purpose of the image isn’t to promote that particular product, users will become frustrated if they can see the product but not access its page.
Keep navigation simple and functional
I will safely assume you have bought online before. Make yourself this questions: Are you more likely to purchase if you can easily find what you’re looking for or if you have to click through 50 options? Complexity hurts conversions. Extra clicks and menus or endless categorization are annoying. Make your menus and navigation options simple and intuitive.
Don’t go to the opposite side of the spectrum either, do not over-simplify. You do need a menu. If you’re waiting to hear that there’s a magic formula for your categorization, let’s be honest there’s none. A good piece of advice will be to try to limit it to somewhere between three and seven main categories and three or fewer sub-navigational categories. Before you obsess with the quantity of navigation options, make sure your options are clear.
Final thoughts
When it comes to information organization make sure to dissect your content into small and understandable pieces. Think about your users. What would they like to see first? Study your site metrics; make sure to add the most converting products to the home page or the navigation.
Look at your site search history, if most of your clients are searching for “Black Jeans” why don’t you include that on the navigation? Make it easier for your users to find the information they are actually looking for.
Information categorization is a topic that I love to talk more about. Feel free to reach out and spread the word. Let me hear your ideas and experiences on information categorization, sharing information is key to having better experiences as designers and developers.
I leave you with a small round-up of Do’s and Don’ts for your homepage navigation:
- Do give your visitors an airplane 30,000 foot view of what your site sells so they can drill down to specific categories.
- Do provide links to return policy, customer service, shipping and privacy pages, make use of that footer.
- Don’t Assume you know what people are looking for.
- Don’t jam every category and subcategory on your home page.
- Don’t Use generic stock photos. This screams inauthenticity.
Related: Accessibility and eCommerce: An Exercise in Dirty Words
The post Guidelines For Better Navigation appeared first on Demac Media.
