The Art of Search on Your Site (and How to Do it Right)
Unless you are an Ecommerce brand, chances are you do not take search bars that seriously.
But you should and there are three important reasons for it.
- The Natural Urge to Search – Think about the last time you went to Youtube or Spotify. Did you navigate all of its categories? You didn’t. You searched. And that’s the main point of internet if you think about it. Human beings are natural searchers. Searching saves time and gets us instant gratification – something we value more than ever in this fast paced world.
- Frustration Mitigation – Organizing content perfectly is a difficult task. In the absence of a search bar you need to ensure that there are clear pathways for your browsers and readers to find what they are looking for, and also continue to explore and navigate your site, without getting stuck or frustrated.
- Leveraging Internal Site Search – How can you separate keywords from search? You can’t and shouldn’t. Having a search bar on your website gives you the opportunity to track the items your browsers tend to look for the most from your brand. You can do this quite easily in Google Analytics. You can now fill in content gaps, or indeed make sure that the categories receiving a lot of focus are easy to find.
Now that we have established the importance of the search bar, let me ask you a question.
Are you doing search right, from the UX perspective?
The main reason why I dove into the importance of search is to incentivize you to consider improving the search experience for your browsers. Because you will benefit in the long run.
How to Make Your Search UX Friendly & Actually Useful:
Include Placeholder Text
It is a no-brainer. But don’t knock the difference placeholder text can make. Your users should not have to think – even for a split second – about the purpose of that bar tucked up near the top of the page.
So first word they see here needs to be “search”.
Then, you could add additional context for your specific service. “Search song” if you are offering streaming for example.
But keep in mind – context is optional, clarity of purpose is not.
Don’t go crazy with icons
No need to go crazy here.
Don’t fix what’s not broken… Search is a pretty basic action so a simple magnifying glass icon should be more than enough to do the trick for the eye.
Use another icon if you want to automatically hide the search box from your customer’s sight.
Make it visible
If users need to go searching for the search box, you are doing it wrong.
Granted that the search box is not the most visually attractive element. But it does contribute to eliminating navigation friction. So in a sense it works to optimize an important metric for your site – The Average Time on Page.
So display it proudly. Run a heat map and identify the areas of the site that get the most “eye action”. This way, you at least have some guidelines around where your search box will be the easiest to find.
It is important for a website with a high volume of content to have this primary function in direct sight all the time.
Autocomplete isn’t Restricted to Google
The search box is in and of itself a time saver. But you can go the extra mile here. Add the “autocomplete” feature to your search bar and help your browsers type less.
Guide them to their possible final destination that much quicker and they will appreciate the overall experience they have on your site.
I have crafted a search element for you and here is the code for it.
See the Pen Autocomplete Search by Diego Armando Catalan Tandi (@diego-catalan) on CodePen.
Use it on your website and don’t forget to comment on how it has worked for you.