User-Friendly Navigation – A Vital Part of E-Commerce Web Design

Ensuring that your customers can find the products they are looking for is essential for any e-commerce business. Great product search goes a long way to improve product findability and conversion, but it is most effective in the later stages of the customer journey, when the user has a specific intent. Early on in the purchase process – when the visitor is just browsing and figuring out what he or she is looking for – user-friendly navigation is crucial.

So, what does user-friendly navigation look like? Here are a few simple and hands-on tips and best practices that could improve both your revenues and the user experience on your e-commerce website:

Stick with What Works

Every online retailer wants to stand out in the crowd, but using non-standard navigation is not the way to do it. As a user, you expect to find a site-wide horizontal menu on top and a vertical menu on the left-hand side of the pages. Any other design choice is almost certain to confuse users and undermine product findability.

Use Text Links

Although buttons may be easy on the eyes, there are several good reasons to use plain-text links for your navigation. First and foremost, text-based links will help search engines understand and index your site better. Also, buttons load more slowly and reduce accessibility. Be careful not to use text links ads above or below product list pages or search results as users tend to confuse these ads with navigational filters and sub-categories. 

Minimise Clutter

There are countless examples of e-commerce websites with dozens of links in the left-hand menu. With that many items to choose from, visitors are likely to scan past important links. Try to consolidate your product subcategories into not much more than a handful of main categories to make the list more user friendly.

Showcase Product Depth on Homepage

In order to avoid new users misinterpreting or underestimating your product range, try to demonstrate the breadth of your product catalogue on your homepage. One of the best ways to do this is by visually featuring at least 30-40% of your main product categories on the homepage (i.e. the first level of product categories).

Enable Breadcrumbs

Breadcrumbs are small, navigational links that normally reside right above your product listings. Enabling them is one of the easiest ways to make your navigation more organised and intuitive. A breadcrumb feature is built into most e-commerce platforms and can usually be turned on with just a few clicks. A recent Baymard study revealed that e-commerce sites should offer 2 types of breadcrumbs: both hierarchy-based and history-based breadcrumbs. When the breadcrumb is history-based it sends the user back to their previous page - which is typically what users expect when pressing the "back" button in their browser. 

Don't Place Ads Above Product Lists or Search Results

Internal ads (graphic or text) placed above product lists or search results confuse visitors and lead them to believe that the ad is somehow related to the product list or results. If the ads are highly relevant to the user's context they can be displayed, simply NOT on top.

Use Page Load Lightboxes Sparingly 

Surveys, contests, newsletters, promotions, country-selection, etc. that pop-up upon load on highly relevant pages like product lists or search results annoy visitors and are often closed before they are read.

6 Tips for Designing a Great Search Experience:

1. Design a box so it stands out graphically and is clearly visible. Visitors should find it immediately.
2. Include helpful text in the search box, such as: "search for products, categories or brands". The text should disappear automatically when the user starts typing.
3. Keep the search box populated with the visitor's search query. That way, the user can narrow their search without having to go back and remember what they previously searched
4. Allow the keyboard enter key to start the search.
5. Adjust the size of the search box. If you have long product names a larger box makes things easier for visitors.
6. Use auto-complete to suggest searchable keywords and phrases after only a few letters have been typed. Include the various categories to help refine search results.