Improving Your Site Search: The Search Bar

In this first installment of our series on improving your site search experience, we’ll begin with a fundamental but often overlooked part of search: the search bar.  First, we’ll discuss why the search bar is so important, and then we’ll discuss some key factors that make a great search bar.

Why Your Search Bar is Important

Google and Amazon have trained users to start their browsing experience by conducting a search.  Your users will behave the same on your site, even though you may have invested lots of time and energy into beautiful catalog pages.  Your responsibility is to embrace your user’s natural behavior, and make it as easy and simple as possible to do a search on your site.
Not only will this improve your customers’ experience, but it will also give you important data about your business.  The more people search on your site, the more data you have about what your customers want.  Think of your search bar as a free, continuous customer research project.  What better way to know what your customers want than to constantly peruse the stream of data that they’re typing into your search bar?  And the easier you make it for them to find and use your search bar, the more data you’ll have.

How to Improve Your Search Bar

Make it accessible.

Make sure your search bar is easy to find on your page.  Hiding your search bar behind the click of an icon, or banishing it to the remote corners of your site frustrates your customers.  And frustrated customers don’t stick around.  Instead, put your search bar prominently in the top middle or top right of your site, where users expect to find it.

Consider also focusing (that is, placing the cursor in) the search bar when your page loads so that users can begin typing their search query without having to click the search bar.  As of HTML5, you can do this by adding an “autofocus” attribute to your input tag.

Make it usable.

When it comes to usability, conformity trumps creativity.

Use a standard sans serif font in your search bar.  Using custom, unexpected fonts is off-putting to users.  Don’t worry too much about matching the rest of the fonts on your site — those are designed to be for the site’s content.  It’s ok for your search bar to have a more standard look and feel.

Furthermore, make sure your search bar is big enough for most of your user’s queries.  It feels clunky to type in a search and not be able to see your entire query.  Look through your search logs and size your search bar so that 95% of your users’ queries fit into it.

Make it interactive.

Users expect modern-day search bars to help guide them to their destination.  Adding autocomplete or a list of product suggestions allows the user to explore your content quickly and easily.  Further, it increases your users’ engagement with your site, and invests them in finding what they want.  (Constructor.io offers autocomplete as a service with only two lines of code.)

An accessible, usable, and interactive search bar is the first step in improving your site experience.  These simple steps can go a long way towards making your site feel more engaging and professional, with the added bonus of generating more data to improve your business.