How to Design a Successful Ecommerce Search Field Interface

The use of the ecommerce search engine can sometimes feel like magic. You visit the website, find the search field on the homepage, type in a word or phrase, tap the search button and voilà, your product appears right before your eyes on the results page. It can make a customer’s shopping journey quick and easy, if it functions correctly.

Research shows that many ecommerce websites’ search engines are unable to return specific results for products because not all users use the same terms when looking for a product or it can differ from the product name on the site. Another issue search engines run into are misspellings. If a user misspells a product’s name, it may bring the dreaded ‘no results found’ message.

In the end it’s simple: if users cannot find what they are looking for, they cannot buy it. Not only does this lead to a loss in sales from that specific session, it can also mean the loss of a loyal customer and their lifetime value.

Throughout research and user testing, it is said that not only does the search engine itself need fixing, but the search field interface design was proven to be just as significant for users to find the product they are looking for. Let’s discuss the importance of designing a successful ecommerce search field interface.

The search field is often overlooked if it appears ordinary and is positioned in an unusual way on the page. However, when the search field is noticeable, users are encouraged to search for products without the help of going through the category pages. It can be highly valuable for industries that rely on the search engine to promote their search field with a clear design and position, specifically on the homepage.

There are several design elements that can be utilized for the search field in order to encourage users to successfully use the search engine. However, the three design elements that have the greatest value and impact are position, style and size.

The position of a search field must be simple and straight forward. The standard ‘go to’ is to place search fields in the top right corner or center of the header, as this is where users will expect to see it.

Industry West is an example that displays a search field placed on the top right corner while Bliss positions the search field in the center.

Utilizing less space can catch a user’s attention. For sites that only have a few items in the navigation, the search field can be aligned with the categories. This allows the search results page to appear directly below the search field rather than seeing a line of categories separating the two.

Calvin Klein aligns the categories and the search field together.

The style of a search field must be prominent and simple. A couple of core user interface elements that put together a search field are the search field’s background color, border color and shape. Elements also include input and placeholder typeface, color and size as a call to action (CTA) button with either text or a magnifying-glass icon.

Utilizing color for the search field background, border or CTA button provides more of a contrast and the field will therefore naturally become more prominent. It is one of the most effective ways to emphasize a search.

Target and GE Appliances are examples that display a contrast between the site header, search field and search button.

The final element that has an impact on the search field engine is size. Designing a search field that is too short is one of the few common mistakes amongst designers. It is considered bad usability when only a portion of the text is visible in a shorter search field. This makes it difficult and inconvenient for users who try to edit their search queries.

Amazon and Etsy are examples that show a wider search field.

A growing search box is another design element to consider for longer search queries. This utilizes less screen space while offering the user sufficient visual cues to instantly use the search field engine.

Nike is an example that uses a growing search box.

The use of the search engine is vital and often one of the most frequently used design elements on ecommerce sites because it is generally the preferred product finding strategy. The design of the search field is just as important as the functionality. Adding minor changes such as the correct search field size or slight contrast between site header and search field background can significantly improve not only the search usability, but also the overall user experience. If your ecommerce search isn’t giving your users the results they desire, let us know, we would be happy to help.

Amena Tyebji

Amena was born and raised in Houston, Texas. She moved to NYC to follow her passion for art and design. Outside of work, she’s usually exploring new bakeries around the city, visiting museums or walking across the Brooklyn Bridge.