Why You Should A/B Test Your Online Store’s Navigation Menus

When you’re building an online store, you should never settle for just one web design. Instead, you can keep improving appearance just like you’d strive to keep improving products and services.

One way to do this is to continually make incremental changes that improve your design and the most effective way to do this is through A/B testing.

Most online marketers know the importance of A/B testing but today we’re going to talk about how it can be applied to the navigation menu, extremely important in directing the flow of traffic where you want it to go and well worth testing as meticulously as you would any other page.

As with any type of A/B testing, one of the first things you’ll want to do is develop a hypothesis. Testing random ideas that aren’t based on research or specific questions is usually just a waste of time. To develop a hypothesis, you’ll need to find the “sticking points” in your website— the bottlenecks that prevent customers from seeing certain pages or interrupt their intuitive movement through your site.

This “pre-testing” can be done with surveys. Why not just ask your visitors how easy-to-use they found your navigation, or if anything in the menu structure made it hard to find the page or specific bit of content they were looking for? If that doesn’t get the results you’re looking for, you can always track sample audiences’ movements through a page, or test the site yourself to see if there are any parts that annoy you.

Once you’ve identified a possible problem and a possible solution to it, come up with a plan for what you’re going to change and how you’re going to test it.

Always test both options simultaneously. Never test option A one week, then option B the next. If you do that, then external factors can taint the test results. For example, if you’re running an A-B test, and someone features your website on a blog or a special offer kicks in, your sales could to increase for reasons completely unrelated to the test. There are just too many unpredictable time-based factors.

If you will be editing the HTML and JavaScript yourself, you can use Google Website Optimizer, or a similar service like A/Bingo or Vanity. You can set up an A/B test in one of two ways: replace the element before the page loads, meaning that the tool will randomly replace the original button on your menu with one of the variations before loading the page for the viewer or redirect to another page. The second one’s pretty self-explanatory. If you want to test an entirely different menu, you may have to make a separate page with another menu on it.

Don’t conclude your results too early, even if one option starts to show a major difference part way through. It’s a good idea to use a calculator like this one to determine the optimum length for an A/B test.

Make your test consistent across the whole website. Your visitor should see the menu variation everywhere on the website. Yes that means on every page.

If the navigation changes involved are so major that it will change the way someone will interact with the site, then don’t test them on your returning visitors. Only include new visitors in the test.

You’ll mostly want to play with the order of your nav menus to determine which pages of your website bring in the most customers. These are the pages that you’ll want to work on improving in order to drive more traffic to them. I recommend you figure this out first, so that when you begin the next step, you’ll know which results are more desirable.

Once you know which pages are actually writing your paycheck, you’ll want to A/B test with the goal of driving more visitors. So switch the order of your menu bar and measure which order bring in the highest number of clicks for those specific pages.

Then, you should test the copy on your menu to see which subtle differences in wording can make big differences in your conversions. It’s not obvious, but menu titles are just an extremely laconic form of sales copy, and wording can make just as much of a difference in conversions there as anywhere else. When Formstack changed a menu option called “Why Use Us” to “How it Works,” they increased views for that page by 50%!

Finally, try A/B testing the colors. If meticulously testing the shade of blue used on their advertising links can bring Google $200 million extra a year, there’s no reason not to spend a little time trying a few different colors on your navigation menu_and your text links, as well–to see if any of them increase conversions.

And For Mobile…

Try different navigation options. Blinds, buttons, and blocks are a good place to start. For the uninitiated, blinds are a drop-down menu that lists all your options in a manner that resembles venetian blinds. Buttons are the layout that will be most familiar to most mobile users, and they’re pretty self-explanatory: a grid of icons not totally unlike those on a smartphone’s home screen. And blocks are a somewhat unusual format and consist of a series of large images that you scroll through, but are very good for highlighting visual elements.

As a side note, it seems that people prefer the word “menu” over the “hamburger icon” to signify a menu, despite the former’s near-ubiquity in web design lately. One possible explanation is that the hamburger icon’s a little too abstract for viewers to instantly connect it with the concept of a menu. Even worse, many site designers tend to make the hamburger too small, making some customers miss that there’s a menu there at all. Which, as you can imagine, is not a good thing.

Replacing the hamburger with the word “menu” can increase conversions by a fair percentage, but for some reason it only seems to work when there’s a border around it. Generally, the only things that should be hidden behind a burger are user settings, options, or other things that don’t directly affect your site’s navigation.

Bear in mind that you might not want to use a nav menu at all. When Yuppiechef removed the navigation menu from their landing pages, they doubled their conversions. Remember, in landing pages, less is more.

Multiple studies back this up – removing the primary navigation at the top of a landing page will drastically increase conversions. Optimizely even suggests you try removing the menu bar from all pages outside the checkout funnel. It sounds crazy, but it might be worth a try.

A website can only convert If your users can reach the pages they need to in order to buy something. So put the effort into testing and optimizing your menu, and you’ll see returns in your sales.

Any other advice for places to A/B test? Ways it should be done? Other options for creative menus that I haven’t covered yet. Let me know in the comments!

Image: David Micalczuk

About

Brenda

Brenda Barron is a freelance writer and blogger for hire, specializing in technology, WordPress, business, and e-commerce topics. She lives in southern California with her husband, daughter, and two cats.

Site web