SITESEARCH DESIGN

After you make your sitesearch easy to find, make it usable.

Text in the search box:
Keep some meaningful text in the search box and make it disappear on clicking so that the users can enter their search term without any confusion. If shoppers don’t find the desired product in the search results, they might search again with a slightly different search term. So, keep their previous search term in the search box so that they don’t have to type the entire search term again.

Submit button:
The submit button should look different from the input field and should either read "search" or have a search icon. Show results even when users press enter, but this doesn’t mean that you can do away with the “submit” button entirely.

Scoped search:
Though search scope is not necessary for every eCommerce store, it is critical for large stores with wide range of products. Allow users to search within a particular category. Default your search scope to entire store rather than a specific category in order to avoid users searching within a wrong category.

Auto suggest:
Offer search suggestions as the user types in a query. A dropdown with common searches that will help reduce typos and avoid a no results found state. It’s even better if you suggest a few best-fit products along with thumbnail images and price of the products suggested. Land the shopper on the individual product page if he clicks on any product suggestion.

Let your shoppers hunt for products, not for your search box. Make your search box stand out so that people can easily find it.

Sitesearch elements:
Avoid using only a submit button without the text field. That will make the search box hard to find. Also avoid having only the text field without the submit button, not every user knows that they can hit enter to submit.


Placement of the search box:
Position your search box away from all other boxes such as email signup. Place it consistently on all pages except the checkout page. Top right, top center or in the main menu are popular positions for the search box.


Size of the text field:
Along with making the search box more prominent, a longer search field will also allow the users see what they type which would reduce errors. Make sure it can hold at least 30 characters. Another thing you could do is to look at your Site search data, find out what your shoppers are searching for and use that to decide what the optimal character limit should be.


Contrast:
Make sure, the color of the input field doesn’t make it hard to understand where the search term should be typed in. Increase the contrast between the site header, text field and search button to increase the prominence of the search box relative to other elements.

Whether you are a large eCommerce store with a wide range of goods or a small one with simple navigation, you definitely need to have sitesearch on your store as it would help you learn what your shoppers expect from you and shoppers who use sitesearch are more likely to convert than those who don’t. Even with a simple sitesearch feature you can better engage your visitors and drive sales.