3 High Impact Search Bar Optimizations You Can Make Today

Online retailers are always on the hunt for ways to optimize their site. What small adjustments can we make to increase revenue by a couple of percentage points? Can minor design adjustments even do that?

Honestly, we didn’t think so. But last year we decided we wanted to find out. Would changing the design of the search bar increase usage at all? We expected to see minor increases to search usage(maybe 5-10%).

But what we ended up finding actually startled us.

We had to look at the data a few times before we believed it. Then we performed an experiment.

The Experiment

Our client, MXGear, knew that their average search visitor was converting at a rate about 350% higher than non-search visitors, so they wanted to see if they could get more of the visitors searching.

Based on our initial search design study, we made a handful of suggestions. The image below is what the site looked like 3 weeks later.

Can you spot the differences? There aren’t many.

MXGear saw their search usage increase from 6% to 13% virtually overnight.

Search Bar Location

The location of the search area is one of the most important facets of your site’s design. Initially, MXGear had their search bar located left of center in their header. According to our research, this is the worst location out of the three that are ordinarily used (top left, top right, top center).

"Center placement resulted in 15.86% search usage, whereas top right delivered 13.43%. Top left was, by far, the worst option with just 7.72% usage.” SearchSpring Search Study

You’ll notice that top right placement gets nearly double the usage when compared to top left placement. Center placement is a little better, but usually requires more significant page redesigns.

However, if this is something you can do, it might be worth it. The best performing site in our study was Candy.com, which had over 70% search usage.

As you can see, their search bar is place very prominently beneath the main navigation.

In the case of MXGear, this would have crowded out other important page elements, and might not have performed well anyway. Since the product finder drop-down boxes are important to many of their visitors, both elements could have suffered.

Swapping sides is rarely as detrimental, so it might make more sense to do that if your search bar is on the top left. However, the top right is by far, the most popular location for the search bar at the moment. What can you do if yours is already located there and you can’t move it to the center?

Search Bar Contrast

The search bar shouldn’t look like any of the other navigation elements. Every other navigation tool is a button, but the search bar is NOT a button, it’s an input field.

Notice how in MXGear’s initial design, it blended in with the background, and look like all of the buttons surrounding it.

The search bar should be open and inviting to text entry. A white background is the only correct choice here, as other colors seem to indicate to visitors that entry is blocked.

“Sites with entry fields that were any other color saw usage of 4.79%, while sites that used a white text entry field (even on a white background) saw usage of 14.57%.” SearchSpring Search Study

Additionally, high contrast elements can be applied to make it stand out from other navigation elements. In this case, we suggested a bright orange button and border.

Search Bar Whitespace

Whitespace, or negative space, refers to empty areas surrounding important elements. Google is a great example of effective whitespace.

While this design isn’t the most fun thing in the world to look at, it serves its purpose. Is there any question what the designed wants you to do on Google.com? This isn’t a place for news, or shopping, or online dating, it’s a search engine.

While this is an extreme example, it illustrates the importance of the concept. If you want someone to see something, make sure there aren’t too many other things around it to distract them.

In MXGear’s original design, the live chat button was right next to it, taking up valuable horizontal space. While I probably would have preferred to have even more space in the new design, this would have required a lot more work from their developer, and may have conflicted with other goals for the header.

“Sites that did not use whitespace effectively (whether using a search box or icon) saw usage of 10.35%, while sites that gave the search area plenty of room to breath saw usage of 18.46%.” SearchSpring Search Study

Removing or relocating less important elements can really help you prioritize search in your design. In this, removing or relocating the social buttons and the phone number would probably help the search area see more usage. Perhaps these are very important to MXGear, but these are examples of considerations that can be made.

There are many more optimizations that can be made to your search to increase its usage. What percentage of your visitors are using the search bar?

‍

<div class="blog-rule"></div>

‍

Lane Fries is the Content Marketing Manager at SearchSpring, an ecommerce site search provider. Specializing in ecommerce marketing techniques, Lane creates content to help etailers improve their site’s shopping experience.