Sorting out your store’s navigation

Written by Nicole Kohler on April 26, 2016 Blog, Design & UX.

There’s a lot to think about when you create a new store. You can’t just throw something together in five minutes and call it a day — that’s a guaranteed recipe for disaster.

Navigation is one element of a store’s design that requires careful consideration, experimentation, and likely even future updates. You could create your navigation in five minutes based on what feels right… or you could use advice and insight to make smarter decisions.

Today, we’re going to explain how you can set up your store’s navigation to work well for shoppers. These tips should help you answer any questions you have so you can get every link placed properly (rather than quickly).

Let’s start by taking a closer look at why navigation options like menus matter so much in the first place.

Why it’s important to get eCommerce navigation right

Econsultancy estimates that up to 30% of your shoppers will go directly to the on-site search bar to find the products they are looking for. That leaves 70% (or more) of shoppers who will instead use your navigation to browse, shop, or hunt for products.

This gives us the first, and perhaps most obvious, reason to get your store’s navigation right: there are a lot of people depending on it. If it doesn’t serve the purpose it’s supposed to, they’re likely to get frustrated and leave.

caption (Photo credit: #WOCinTech Chat)
Your navigation is a critical component of your store’s design — get it right, and everything else should work together. Get it wrong, and the elements might feel disjointed. (Photo credit: #WOCinTech Chat)

Another reason to properly sort out the navigational elements of your store: the rest of your design often hinges on them. Whether or not you add additional links to your pages, make your search bar a certain size, or add other features might depend on what you do with your navigation.

Basically — get your navigation right, and everything else should work and flow together seamlessly. Get it wrong, and your store could feel disjointed or difficult to use.

Now that you know why it’s important to get this aspect of your design right, let’s go over some tips that will help you set things up properly.

Links to your products should be front and center

The very first thing you’ll want to add to your store’s navigation is easy access to your products.

If you only have a few products, this may mean adding direct links to those pages in your navigation menu, like the JOCO Cups shop does:

Just a few items in your store? Link to them directly from your menu -- it'll save shoppers time.
Just a few items in your store? Link to them directly from your menu — it’ll save shoppers time.

On the other hand, if you have multiple products divided into categories, like the ELEVEN velo store, you’ll want to link to those categories instead:

Here, the navigation serves as a starting point -- shoppers will browse through additional pages to find what they want.
Here, the navigation serves as a starting point — shoppers will browse through additional pages to find what they want.

This brings up the same important point: your shoppers should be able to find and access your products from the moment they view your navigation. Whether that’s through a number of categories or direct links depends on the number of items in your store.

Place other important items in the main navigation — what they are will vary by store

Most online stores have two sets of navigation — one “main” area at the top of the site, as well as a second area at the bottom or in the footer. More important navigational items are typically placed in the main area, while less important links are added to the footer.

Having said that, what you consider an important link might be very different from what a store owner considers important. So when you’re deciding which products, pages, and destinations to link from your top menu, you’ll want to consider your own needs, not what other stores are doing.

Deciding what makes your "main" navigation and what ends up in a footer or sub-menu will vary from store to store.
Deciding what makes your “main” navigation and what ends up in a footer or sub-menu will vary from store to store.

For example, consider a store that sells shoes. It can be tough to get the fit of your footwear right without trying it on first, and the subtle variations by brand and shoe type can make returns a far more likely possibility for this type of product. So linking to your return policy page from the main menu would be a no-brainer here.

For a store that sells cookies, though? If you don’t personally like the cookies you receive, you can probably just give them to someone else. The cost is much lower, and cookies are a consumable good. So this store would be safe to add that returns link to their footer instead.

To decide if a link merits space in your main navigation, think about:

  • Its frequency of use — Like the return policy example above, it might not make sense to place certain pages front and center if the majority of your customers will never click on them.
  • Where customers will look for the information — Many shoppers are now trained to scroll to the bottom of online stores for information like FAQs, policies, shipping fees, and so on. Think about where you might go to look for something before you place it.
  • The amount of space lost — This might seem like a strange one, but it’s definitely possible to run out of room in your navigation. Don’t try to cram everything into one small space.

The footer should contain less frequently accessed pages, like your policies and legal terms

Now that we’ve talked about what belongs in your main navigation, let’s move on to the second area of links, or the “footer” in WordPress terms.

Most store owners use the footer to store links to important but usually less frequently accessed pages, such as:

  • Policies and legal terms, ex. return policy, privacy policy…
  • Shipping fees and/or carriers available
  • General company information
  • Information not meant for typical consumers, ex. how to sign up for an affiliate program, press coverage
  • Contact options including email address, phone number, and social media links (even though they may be displayed/linked elsewhere)

As you can see, the footer can come in really handy if you have some additional pages you’d like to add to your store, but don’t have room to link at the top of your website. But don’t think of this area as a simple “dumping ground” for your leftover links — it should look good, be laid out sensibly, and make sense in the same way your main menu does.

For example, have a look at how the Henry J Socks footer has subheadings that help to classify each area of links:

No confusion here. This navigational section is properly labeled, so you know where to go for what you need.
No confusion here. This navigational section is properly labeled, so you know where to go for what you need.

If you have a lot of footer links like this store does, you can use a similar approach to your store’s design, which will keep everything organized and easy to locate for your shoppers.

Have necessary but not “front-and-center” pages to link? Use sub-menus to consolidate and organize

As we mentioned, most sites have a menu at the top and a footer area at the bottom. Most of the pages and products you’ll want to link will fall neatly into one of those two areas… at first.

As you grow, however, you might find that you’re not able to decide just as quickly and easily where a new page should go. This goes double for those of you who might be adding lots of new products in the future, which will take you from “I can fit these in my menu!” to “wow, my menu’s really long.”

The first solution to this problem is to create category pages that you link instead. Another option is to take advantage of the sub-menu option in WordPress, which allows you to create multiple choice menus that slide out or drop down (depending on your theme) of a given top-level link.

So let’s say that instead of only linking to a shirts category, you now want to link to T-shirts, sweaters, and dress shirts. No problem — you can simply add the three new categories as sub-menu items of the shirts category already present in your navigation. When a shopper hovers over “shirts,” the three additional items will show up for them to click on, too.

Sub-menus save space and make your navigation neat & tidy.
Sub-menus save space and make your navigation neat & tidy.

You can read more about creating menus and sub-menus with WooCommerce right here in our docs.

Don’t have too many navigation sections! A header and footer is ideal

One final word of advice: don’t give your shoppers too many choices.

This might sound a bit odd. Normally, the opposite is true — it’s certainly fine to add new products, or make new color and size options available. But when it comes to your store’s design, simple is definitely the best way to go.

Too many choices might confuse shoppers or leave them stranded. Eliminate issues by consolidating as much as possible.
Too many choices might confuse shoppers or leave them stranded. Eliminate issues by consolidating as much as possible.

This absolutely applies to your navigation. If you try to add a third menu, another footer, or even too many sub-menus, your potential customers might become confused by all the choices in front of them.

Imagine a shopper coming to your store for the first time with the intent of browsing to simply see what you have available. If you give them too many options, they simply won’t know where to go first!

This can even cause problems for shoppers who are coming to look for something specific. If there are multiple menus or places to look for categories, products, or sources of information, they might not know where they can find it. This can lead to frustration and site abandonment.

The lesson here: keep it simple wherever possible. It’s doubtful you’ll need more than a header and footer; if your site gets large enough that your destinations won’t all fit there, direct visitors to topical landing or category pages and break it down from there.

Sorting out your navigation takes time, but it will make your customers’ journeys much smoother

Making a conscious effort to create your store’s navigational options with your customers in mind is definitely more time-consuming than simply doing what seems “right.” But there’s a huge reward: it makes your customers’ journeys smooth and simple, eliminating questions and allowing them to find what they’re looking for much faster.

We hope this post has helped you start to think about what your store’s navigation should look like, whether you’re starting a new one or in the process of a redesign. Have any questions for us? Let us know in the comments, we’ll be happy to help.

cta-banner-10-product-page-v2_2x

5 Responses

  1. Jay
    April 26, 2016 at 6:54 pm #

    I own woo based custom tshirt site with decent traffic and sales. I just reworked on my navigation part after reading this article. I checked heatmap today and I noticed much improved navigation click experience from users. Thanks for the post.

  2. sprint6m
    April 27, 2016 at 4:27 am #

    Nicole – great article on Navigation – one question for you tho we want to rework our sites navigation and was wondering what style of navigation the sites you showed us in the article are using – we have many products and I like the way the ELEVEN velo store has there layout, is that a plugin or part of there theme?

  3. Kyra
    April 27, 2016 at 2:05 pm #

    Hi Nicole

    Do you not recommend a category menu in a sidebar? For example a wine shop – we were thinking of have wine types and regions in the sidebar.

    Thanks in advance
    Kyra

    • Nicole Kohler
      April 28, 2016 at 2:53 am #

      Hey there Kyra! Many stores now opt for navigation at the top (the main menu) and bottom (the footer). Navigation on the left or right side is typically mostly seen with blogs and stores that have filtering. The big concern some have with it is that it’s not always mobile-friendly, but nearly all WooCommerce themes you find now will be responsive, so that’s not much to worry about 🙂

      Having said that, some shoppers will respond really well to navigation on the side, while others won’t like using it at all. It depends on the size of your navigation/menu, the type (drop-down, etc.), number of options, style/visual presentation, and so on.

      The only real way to know for sure what is right for your store is to test a side navigation against a different style for a period of time and see which gets more clicks, results in better conversions, etc. with A/B testing software. For some industries or websites, it’s absolutely possible that navigation or menus in a sidebar will work just fine. But for the most part, the norm is navigation along the top — likely because of the mobile-friendliness and because it’s what shoppers have come to prefer for shopping.

      But your results may vary. So do what you think is best, but have an open mind and consider testing 🙂

Leave a Reply

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment