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.
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.
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.
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.
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.
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.
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.
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.