Optimize e-Commerce Search Box to Convert More Visitors
From the dawn of website design, search component is more than crucial for any site. It is the guiding light for users when they feel lost or they want to find something quickly.
The search box is not just an input and button.
Nowadays, the search field is much more as it may influence users’ choices and purchase decisions. Designing a search box requires a lot of consideration when it comes to positioning, size and contrast. All these factors act as a stimulus for the users.
Setting the search strategy
The positioning of the search field and its prominence should be determined by answering the question how we want users to interact with a website.
Usually, there are two types of interactions when it comes to e-commerce websites: the users are either encouraged to search or to browse categories.
Amazon has a large input field which encourages the users to start searching immediately after landing on the main page.
How big should search box be?
Depending on what user’s approach should be in finding a product, the size and prominence of the search box will be determined.
If the strategy is the user to directly search for products then the search box should be larger and visible.
In the following example with Walmart, the search field is very large and takes a large portion of the top section. It clearly encourages the user to start searching.
Gap.com has a search field in their header section but it is not so visible. Here the approach, suggested for the users, is to use categories to find a product.
The Dominance of the Search Box
The colour of the search box can also play a major factor in urging user to use it. As you can see in the following example, groupon.com uses a bright green brand colour at the top part which makes the white search area stick out. The user is instantly drawn into the search field.
The Hidden Search Field
Some websites use a new approach to search by showing only the magnifying glass and when the user clicks the search input field either expands to a long one or it is positioned to occupy the whole width and height of the screen to offer full immersion.
Reserved, the popular Polish retailer, obviously encourages the user to click on the large images or the categories. The search input is there, but it is only presented with a magnifying glass icon and it expands when user click on it.
Adobe.com has a search in the top right area of their website and when it is clicked, an immersed experience is presented. The whole search area overlays on the top of the website and when the user starts typing, the search results are enhanced with product icons.
Influence Visitors with Autocomplete
The autosuggest or autocomplete feature is now a well-established feature. When used intelligently, it can improve conversions by a mile.
This type of search can be taken a bit further with showing images of similar or relevant products when the user starts typing in.
Newegg.com has a rather complex search results, when the product is typed in you can see three sections appearing. The first two sections are only word-based but the third one, which features retailer’s recommendations shows a detailed description of the product together with its image.
People are perceiving information quickly when a visual clue is provided, so it is very likely that users click on products presented with images.
E-commerce websites, especially the ones offering wide range of products, should determine their strategy when it comes to product finding and browsing.
Adding a rich search, enhanced with autocomplete function and images in it, is a feature which helps users navigate effortlessly and finding products quickly.
It is important that users’ interactions with the searches are closely monitored and updated according to their behavior.
Also, adding too many options and suggestions in the search could confuse users. Ten to twelve product suggestions are enough. Keeping search suggestions relevant is also important as users do not like products that are not in sync with what they are looking for.
Finally, optimize for mobile. Keep searches consistent and easy to use on mobile devices as the trends for the last couple of years suggest that more and more people are browsing and shopping online.
Does your e-Commerce site converts as you would like to? Chat with us to help you improve it to gain more sales.
Originally published at webadviser.io.