Q: A Search box is a search box . . . right? How much difference can it make?
A: All the difference.
This might just be the single most important component in a successful eCommerce strategy and the key to driving significantly more revenue.
It is essential to get the usability of the search box within eCommerce sites right. Up to 30% of visitors will use the site search tool and these will be highly motivated shoppers who know exactly what they’re looking for. Shoppers who use the search box will buy more:
Search functionality should be prioritized when developing redesigns, whether for mobile or desktop sites. So, what are the most important considerations for your search box?
Accessibility and consistency are key here.
Ensure the search box is positioned prominently and where it’s expected to be; don’t make users search for the search box. The diagram below shows that usually, this is in the top-right of your eCommerce site.
from ‘Where’s the search? Re-examining Users Expectations of Web Objects’ study by A. Dawn Shaikh and Keisi Lenz
Usability studies have shown that placing elements on the right gives instant access to the browser scrollbar. Having said this, with eCommerce giants such as Amazon opting for a top-center search box, this is also now a common location.
If your site uses a modern NLP search engine, the chances are your customers will find what they’re looking for the first time they search. Unfortunately, this isn’t the case for traditional keyword search boxes. For this reason, it is important for the search box to remain in the same place on every page. The search box should be accessible in the navigation bar menu at all times.
The North Face demonstrate this consistency by making the search box available from any page on their site, including non-product pages:
“Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience.”
— Jakob Nielsen
The components of a search box may seem predetermined, but there are surprising variations in the composition of search boxes. Once again, it is important that users find what they would expect from a search box, that is, a text entry field plus a button or icon to click and execute the search. It is possible for a user to press the ‘enter’ key to execute, but the presence of a button serves as a reminder that there is an action to take after typing a query.
If your site necessitates more than one entry field on a particular page, make sure that the search box stands out as different from any other fields.
It is not necessary to display advanced search options by default in the search box.
It isn’t quite the case of ‘the bigger the better’… but almost.
A large search box is easier to spot and therefore click. Ensuring an appropriate field size also makes a search box user-friendly. A search box that limits the visible characters too much will conceal a user’s search, leading to shorter, more vague queries. Jakob Nielsen, usability consultant, recommends an ideal width of 27 characters.
For mobile pages where space is more restricted, the search box could be condensed to a magnifying glass which expands when selected.
The search button itself is most commonly labeled ‘search’, but might be labeled ‘Go’ or something similar:
The universally recognized magnifying glass icon is used increasingly to label the search button. It gives a visual clue as to what the text area is. A simple, schematic magnifying-glass icon should be used, without too much graphic detail to speed up recognition.
Every site’s branding and themes are different, but the colors used in the search box should be such that it stands out against its background. For example, if the website background is light in color, consider using a colored search box, and vice versa.
The microphone icon reminds users of voice search functionality, and mobile eCommerce retailers, in particular, should build a microphone into their search experience. Though voice search functionality is a great addition, a microphone icon is worthless unless the search engine is intuitive and understands conversational requests.
Revisit this EasyAsk blog from earlier this year for further detail about the use of the microphone icon.
Some search boxes are left completely blank, but businesses are increasingly using placeholder text in their search box to inform and invite their users.
Inform the shopper of the capabilities of your search box by upgrading the placeholder text from the traditional ‘Search’ text:
Limit the text to a few words for maximum effect.
Auto-suggestion or ‘Search As You Type’ (SAYT) function can guide a shopper by helping them formulate their query. This function shows a list of useful queries as the shopper begins to type. Look out for our future blog post on this topic.
Search box UX is an extensive and important aspect of eCommerce site design. Shoppers who search are looking for something they want to buy, so they need to be able to locate and use the search box with ease. Having optimized your search box, have you also ensured that your site-search technology can provide relevant results when your shoppers actually use your search box?
EasyAsk technology can.