Why is Navigation Important?

Posted on

When a customer finds themselves unable to locate a product that your website stocks, there’s a serious problem. It’s scary to think that a visitor may only be prepared to navigate your site for as little as 10 seconds before abandoning it altogether. You can read more about bounce rates here.

The last thing you want to do is frustrate your website visitors using cryptic headings, inactive dropdown bars, and disjointed navigation. When a customer visits your website, they will generally jump straight to the main menu and select the sub-category that is of most interest to them. Your store’s navigation needs to be a sharp and intuitive process to allow for a smooth customer experience.

What’s in a header?

Essentially, your header acts as a list of inventory for your e-commerce business. If both your inventory and variety of products are on the larger side, take some time to consider the navigation of your store. It’s important to ensure that your navigation bar is easy and intuitive for potential customers to navigate. Website visitors want browsing to be mindless, so more and more business owners are streamlining their website interfaces, to allow for a smooth and seamless user experience. Most tweaks are small but can have a resounding effect on your site. Some simple A/B testing before fully integrating any changes on your site will ensure that your menu is both functional and intuitive for the visitor’s use.

It all comes back to design

It’s crucial to consider the design of your website - especially the format of your header, which needs to be easy to use. Your header sits at the top of your website. It’s an essential part of any website and can actually contribute to conversion rates and improve UX (User Experience). Whilst your heading bar is completely customisable, some common features include:

  • The main navigation and sub-categories of your website
  • What’s new – this is a useful feature for regular browsers on your site, and those who want to see new products, without navigating the entire site
  • A search bar – visitors who use it, really use it. Integrating images into the search bar (as Amazon have done) has had a positive impact on businesses conversion rates
  • Your basket/cart
  • Store Locator
  • Contact us

At Elkfox, we generally recommend limiting the filter on your header to just 2 levels within your main menu, however if you opt for a mega-menu, it is possible to use 3. Remember, if your site is overly complex, you run the risk of frustrating browsers who could abandon your site altogether.

3 examples of some successful headers

1. A basic menu with a submenu dropdown

Ivy Muse's menu is a great example of a basic menu/submenu design. As visitors hover their cursor over the different menu items, more information on the contents of each of these titles appears, for example under ‘About’, ‘Collections’ or ‘Shop Ivy Muse’. Let’s use ‘Collections’ as an example: as the visitor hovers over this heading, a dropdown menu containing direct links to all their current collections is revealed.

2. The Mega Menu

This type of menu gives the customer the opportunity to quickly locate something specific they have in mind. For example, a visitor might hover over the ‘Shop’ heading, which then becomes a further drop down box containing various subcategories. The Plants Project have also incorporated images into their navigation bar, a with different image for every category e.g. Trees, Plants, Florals etc.

3. Full Screen Menu

The more complex your inventory, the more you should consider your product categorisation or ‘information architecture’. When grouping together different products, think about the customer and the connections that they will make. Your customers will be frustrated if they visit your website to find a specific product, but can’t find it. In Green Press Co’s full screen menu, there are Parent Categories and Subcategories that fill the entire screen, allowing for easy navigation and a pleasant customer experience.

Parent Category

The title for a group of subcategories. On a homewares website, for example, the parent categories will often be different rooms: ‘Living Room’, ‘Office', ‘Kitchen’ etc.

Subcategories

The smaller categories that fit into your parent category. Again, this is more straightforward to understand using an example. If ‘Living Room’ was your parent category, your subcategories might include ‘sofas’, ‘chairs’, ‘tables’ and ‘storage’.

Sometimes, a product can belong to multiple Parent Categories. For example, the subcategory ‘Side Tables’ could fit into ‘Living Room’, ‘Office’ and ‘Bedroom’. To increase sales, you want to make sure that your categories don’t limit the exposure of your products, so if possible, try to feature ‘side table’ in all relevant categories. When giving your categories titles, ensure they are simple and clear. If you’re still struggling with customer navigation and usability, you can read more here.

It’s not always possible to include each and every category in your header, so you may need to prioritise. If you’re struggling with this, take a closer look at your data using tools such as Google Analytics. Here is some more information on optimising the customer journey on your e-commerce site.

Filter or No Filter

Once you have a fully functioning navigation bar, you may want to consider introducing filter options to streamline browsing for your users. Providing a filter option will help to direct your customer to a product more swiftly. Some excellent examples of this include e-commerce giants ASOS and more recently Arket, who have both installed extensive filter options to minimise scroller fatigue.

What next?

Elkfox are Shopify Experts working to streamline your e-commerce site to increase sales and improve user experience. Get in touch with us and we can help you to maximise your navigation design on your ecommerce store.