Why Your Search Bar is Important
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.)