yd-h7w
Last Updated: February 25, 2016
·
406
· aerin

Boost eCommerce Sales With a Well-Designed Search Bar

The simplest answer is often the best one. This was this kind of thinking that led to the final design of Google’s search engine interface and propelled the company to super-star status in just a few short years.

Now, most users are comfortable with what to expect when coming to any page that features a similar search bar, but sadly, many designers and web developers try to reinvent the wheel and end up turning away potential customers in the process.

Intuitiveness is the keyword here, and if all your efforts are geared toward creating a comfortable space, the benefits will be evident in improved conversion rates. So here’s what you need to do:

1. Make It Big

Picture

Every landing page is different, and there is no set standard for search bar sizing, placement or design. That said, you should at least try to make it visible.

Online stores that display their omnibars in prominent locations, usually above the fold, are able to achieve 11 percent higher order values on average and convert their customers at 2.7 times the rate when compared to those that don’t. And this can equate to some substantial business transactions.

After FontShop altered their site’s design in 2013 and went with an emphasis on the search bar, their visitors could much more easily see the emphasis on searching for the perfect font. And while optimizing a store’s design hierarchy may not be feasible without designing a whole new site, it represents a viable path.

2. Make It Central to Your Navigation

Picture

People tend to look near the top of the page to get their bearings when coming to a site from elsewhere on the web. This makes the search bar a critically important element as you won’t be able to control where your traffic is coming from.

Sites like CJ Pony Parts and others which have decided to integrate a centered search bar have done so in response to the preferences of their audience, setting themselves up for sustained success as a direct result.

And while placement will vary from site to site, making good use of heat maps to analyze the areas where customers are spending most of their time can narrow down your options. Just remember that the search bar should look natural and organic wherever it is.

3. Make It a Focal Point

Picture

Google has faced some heavy resistance from Chrome users in the past. When the company decided to move the search bar to the center of the new tab page in 2013, many were irritated and many made the switch.

What’s important to note, however, is that the backlash had nothing to do with the fact that the search bar was relocated. It was because the move created unnecessary confusion.

The trick is to build the bar into your site’s design, like Airbnb has done, and highlight its exact position with a transparent overlay or whatever makes the most sense.

4. Read Your Visitors' Minds

Picture

As one of the most well-known eCommerce stores on the internet, Amazon has set the bar pretty high when it comes to search bar functionality. The most effective omnibars tend to be predictive and are generally very good as streamlining the whole process.

You’ll notice that as you type your query, a number of suggestions appear to take the guesswork out of the equation and ensure you find what you need. In many ways, it’s like asking for help and receiving quality customer service in return.

It may seem like a small thing, but the search bar plays a critical role in the online discovery process and is needed to prioritize customer satisfaction. So once you’ve achieved a high enough search-engine ranking, be sure to allocate some time to optimize your site for search.

3 Responses
Add your response

22538

Good tips!

Images 2-4 are broken?

over 1 year ago ·
22550

Gah, I know! I was having the hardest time getting them all to work, at the same time. I'll fiddle with them some more and see if I can get them unbroken!

Glad you liked the tips!

over 1 year ago ·
22551

Haaa... I seem to only be capable of getting 1-2 out of four images to work at once. I'm sorry! You can visit the examples I gave to see them live, though.

over 1 year ago ·