Jaclyne Clarke
Aug 3, 2015 · 5 min read

We’re all familiar with at least a few conventions & patterns across the web. Icons like the envelope representing email, the shopping cart representing a checkout, and social icons representing the ability to share, are all examples of recognizable web elements. Familiarity makes web users feel at ease and in control. The search box is yet another example of an instantly recognizable web element. When we as web users want to search a website, we look for the white box near the top of the webpage, and are also likely trying to spot a magnifying glass and a submit button. Because of conventions like these, and paired with patterns in human behavior, web users have a tendency to quickly scan a website to understand what is being offered and what is available to them.

1. Style — make it visible, keep it simple.

Your search box should be easy to spot on a quick glance. Following the notion of affordance, it should “look like it will accept textual input, and have an associated button that clearly indicates its function as a search submission”. The most familiar style is a white, rectangular input field with a submit button to the right. Highlighting the box with a colored border or styling the submit button with a contrasting color will draw even more attention.

GOOD: Best Buy makes the best of their deep blue and bright yellow brand to make their search box pop. The contrast in color guides the eye straight to the search box, encouraging customers to use their search.

LESS GOOD: Banana Republic provides a very small search box which is not immediately visible. It definitely doesn’t scream out “use me!” like Best Buy.

2. Size — give it prominence.

Make your search box wide enough to accommodate the majority of queries. Bigger text boxes encourage customers to make use of your search functionality, leading them directly to relevant products. A wide search box also allows the customer to see their entire search phrase so they can more easily spot and correct typos.

GOOD: Amazon’s search box is very big, almost as if to say “use me!” It also makes use of contrasting colors, and prominent placement to encourage their customers to use their intelligent search.

LESS GOOD: Victoria’s Secret provides a very small search box in the top right corner of their homepage which may result in hiding part of a customer’s query.

3. Location — place it consistently & visibly.

Since your search box is a tool that helps customers navigate your site, it should be placed in a prominent spot, and consistently on every page. The top of your sites is by far the most commonly used and clearly visible location. Top right and top center are the most visible, as a site’s logo is often prominently placed in the top left.

GOOD: Backcountry.com has prominently placed their search box on every page of their website.

LESS GOOD: Forever 21's search box is placed in the top-left corner of the page. In addition to this less-common placement, it is camouflaged with its surroundings (black on black). Because of this, the search box is not immediately visible.

4. Space — give it room to breathe.

Don’t crowd your search box with other elements or graphics. Whitespace is a powerful lack-of-stuff that acts as breathing room for the eyes so your search box doesn’t end up camouflaged or mistaken as a part of something else. According to Chaperro, Shaikh and Baker, white space may not measurably influence performance but does influence user satisfaction and experience.

GOOD: Asos uses white-space and a prominent placement to make its search box stand out.

LESS GOOD: Tesco’s search box doesn’t pop. It’s hidden amongst the elements surrounding it, making it more difficult to spot immediately.

5. Submit button — label it clearly.

The text on the submit button should be an intuitive action word like “search”, “go” or a use the magnifying glass icon to represent its purpose. Also, allow the Enter key on the keyboard to submit the search, as keyboard navigation is very common, but don’t rely on it alone.

GOOD: Macy’s makes their search box pop with their bright red submit button. It also makes use of familiar iconography, white-space and a prominent location to encourage customers to make good use of it.

LESS GOOD: The Gap doesn’t provide a submit button and instead displays an “x” (to delete your input). This is counter-intuitive and relies on the customer to know they must press Enter on their keyboard to submit their search.

6. Placeholder text — to give inspiration

Helping your customers create an expressive search query will get them closer to finding what they want. Providing direction with placeholder text helps them understand the kinds of search terms they can use to find what they’re looking for i.e. product type, color, size, SKU number, brand etc. If your store offers a wide range of products, it would be a perfect tip to let customers know what you carry. Zappos does this with their placeholder text, “Shoes, Clothing, Bags, etc.” And as an important note, it’s very important to make sure your placeholder text disappears when you click on the search box.

GOOD: Toys ‘R Us sets the mood for their customers shopping experience by adding fun placeholder text.

LESS GOOD: French Connection has some rather uninspiring placeholder text, while they could use it inform customers that they have a new line of homeware.

Conclusion

Your search bar itself is the beginning of the search journey, and an important element in your conversion funnel. Whether you’re taking creative freedom or want a traditional search bar, use these guidelines as the underlying force behind the implementation.


Read more

This post is part one of of three part series about optimizing search for your e-commerce store, read the introduction “A Three Part Series: The Essential Guide to Ecommerce Search”.

In “Part Two: 6 Ways to Optimize Your Autocomplete Suggestions”, we outline the essential design patterns and features of your autocomplete overlay. A common search tool, autocomplete suggestions are nothing new, but you’d be surprised by how the small details are the difference between a good user experience and utter confusion.

Optimizing the Ecommerce Shopping Experience

Tips for e-commerce merchants on how to create the best shopping experience for your customers and increase your sales while you’re at it.

Jaclyne Clarke

Written by

Co-founder & Designer @GetFindify

Optimizing the Ecommerce Shopping Experience

Tips for e-commerce merchants on how to create the best shopping experience for your customers and increase your sales while you’re at it.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade