Articles Usability

Creating Efficient Search Box: Usability Tips

5/5 (1)

Needless to say that a search box is a critical element in a website usability these days, especially if it's a website with a lot of pages and elements that we're talking about.

Today these functional elements are implemented almost on every website, and there's a reason for that. Most of the default search boxes are powered by some search engines like Bing or Google and you as a simple user think that it is more than enough for the visitors. Having a well-thought search with simple and rich interface is equal to having another main navigation menu on your website. Search box helps your visitors to find precisely what they are looking for and obviously it is very comfortable and influences a lot on your website's UX as well as bounce rates and conversion rates.

Our today's subject has two basic components that should be taken into consideration, these are the design attractiveness and the search functionality. Provide your visitors with visually attractive, simple and intuitive search box and you'll see the positive results very soon. Before we start I would like you to pay attention to a number of things that you should consider before placing the search box at your website. So, here are the don'ts:

  • don't place your search box at the bottom of the page, the best place is in the top right corner;
  • do not put advanced search in a first level;
  • do not oversize (or undersize) the input box, it must have comfortable size so that the user could see at least 3-4 words of the query;
  • give correct name and proper size to the submit button (words "Search" and "Find" are more comprehensible than "Submit" or "Go");
  • do not mix search field with other functional elements (putting in one block the "Search", "Register" and "Subscribe" buttons can really irritate visitors)

Be like Google - Use Instant Search!

I'm sure that you are familiar with the "Instant Search" feature which was implemented by Google few months ago. It's not that easy to implement from the technical point of view, but it is worth your efforts. There is no doubt that your visitors will love to use this feature at your website, it is extremely user-friendly and saves their precious time.

improving search tips

After-Search Suggestions

Another useful feature brought to use by the mighty Google are the after-search suggestions. Sometimes we can't formulate our search query in a precise way and showing some related searches or suggestions on what they may have been looking for can help visitors to find exactly what they need. You can find few modules that would allow you to implement this feature at your very website.

Filters

Offer your users to use some filters to clear up search results. It has been said before filters option may mislead or confuse users and putting them right to the input box is a quite risky solution. Though there are several successful implementations of this method. Do not overload your search with too many filters, 2-3 parameters would be more than enough with additional features available on an advanced search page.

search-box-tips

Icons and Other Visualizing Solutions

Original design components are often neglected by web developers due to the myth about over-designing. Maybe you have seen some websites where search boxes are presented in a really experimental manner, but it doesn't mean that you should do it in a bold and simple way. Adding some visualization is always great for the visitors is like an extra tool in helping them to navigate trough your website quickly and comfortably.

Multi-Level Search

This type of search is great for eCommerce projects as it allows you to use two types of search interface on one page. First one is the simple search by keyword, it is displayed by default. But what's good about it is that there's a second-level search available on demand (either in an AJAX box, or on a separate page).Very often that's an advanced search page with a lot of filters and additional parameters.

  • Xavier

    You are wrong, what you are saying is instant search is in fact type ahead. Instant search means showing the results immediately, not suggestions. And instant search is a horrible idea, unless you are google or microsoft. Why? Because it means that every keystroke runs a full search. Do you really have the server capacity to run 15 to 20 searches for each 1 search that the user intends to do?

    • John Malkovich

      I don’t think it is so bad. The instant search idea is based on the principle of caching search results. Look at the MacOS search it doesn’t really break your system – if done properly it is very useful and safe to use technology.

  • BeautyWebsites

    No Search Box yet, but still beauty in webdesign. Have a look and think about wellness to websites. All the standards of html 5 are great.

    http://automat.cc/Beauty/

    Xavier you are wrong too. A suggestion means in fact – you can take it or not. The suggestions are from searches which allready have been searched for. It means to me – if I choose a sugggestion, it doesn’t have to be searched for again. So in fact it reduces searchtime because the SERP’s are indexed before.

  • Zakman Green

    so-o… how difficult is it to write the markup for a custom search with these features — can you recommend either a good tut, OR a freelancer to do this?? I have terrible luck w/ programmers and am considering doing it myself unless I decide to take a chance on another one….

    thx in advance…