Guideline 83-91
On most websites—especially on transactional (ecommerce) ones—people who perform a search convert better. Sometimes a lot.
Why?
First, there are people who know what they want and don’t want to browse, just search. Second, some people are search inclined.
A simple and effective search function allows two basic advantages to the user:
- Users can control their own destiny, getting straight to where they want to go.
- It allows an “escape” from getting lost or hitting dead ends in the navigation.
Search is a big deal: If people can’t find what they’re looking for, they will leave your site.
Note that “good” search is not enough. In our usability tests, we found that the best search designs are highly functional, and offer both efficient search, navigation, discoverability, and inspiration.
9 guidelines for ecommerce search:
- The search bar should be prominently located either in the center of the site, or top right of the page, and large enough for a moderately long search string.
- Label the search bar with the word “Search” or similar.
- The search bar should be sticky so users can search no matter where they are down the page.
- The search bar should have autocomplete capabilities; fix spelling mistakes.
- Search should optimize itself to share the most relevant information and similar/popular searches as users type in the search bar.
- Allow users the ability to press the enter key to search (instead of being required to click the “search” button only).
- Allow for filtering/categories when using the search bar to narrow down/simplify the search.
- Include product images in the site search window.
- Search should be localized, providing results in the local terminology.
Guideline #83. The search bar should be prominently located either in the center of the site, or top right of the page, and large enough for a moderately long search string.
Place the search bar where people will find it. There’s no reason to reinvent the wheel here.
In a study by ThanxMedia, it was found that site search is a part of the shopping experience in over 40% of online purchases.
Yet, in a site search benchmark study of 50 top ecommerce sites by Baymard Institute—including NewEgg, Gap, and Target—half of the sites evaluated did not have a search functionality that was easy to find.
A closer look reveals the search functionality just blends into the rest of the design and isn’t intuitive to find. For example, Gap.com rated low when users were asked to “find the search bar.”
This may be for aesthetic reasons; however, de-emphasizing the visibility of your search bar adds friction to the buying process for visitors who already know what they want.
Enhancing the visibility of your search bar can bring major gains. When Black Forest Decor changed their search bar in 2008, they saw a 34% increase in their conversion rate. They made the search bar bigger, moved it to the center of the page, changed the CTA from “Go” to “Find,” and added color to the search box. Read the entire case study here.
Search box on the top (it makes it easy to find the items).
How to do it RIGHT
Home Depot
The search bar is front and center, where people expect to find it.
The functionality of the site was strong. The info I was seeking was easily located.
User quote on Home Depot
Petsmart
This search bar is off to the right, also where people expect to find it.
I liked how easy it was to find a product. The search feature was very helpful.
User quote on Petsmart
How NOT to do it
Go Electronic
This site hides the search bar in the top navigation menu, where no one expects it to be.
Guideline #84. Label the search bar with the word “Search” or similar.
This guideline is especially helpful for novice Internet users. Use a straightforward phrase to indicate the search bar’s purpose. It can also make the search bar double as a CTA, but, generally, it explains the function to users. You can tell customers they can search by categories, within the entire store, specific departments, and so on.
An important note, or sub-guideline, is not to make users delete text within the search box. Use JavaScript to make the default text disappear as users click to enter their own terms.
How to do it RIGHT
Vitacost
“Search for…” makes it clear that users are supposed to finish the sentence.
Guideline #85. The search bar should be sticky so users can search no matter where they are down the page.
This guideline deals with accessibility. Allowing for an omnipresent search bar will save users time, especially if they’ve scrolled far down a page and the search bar is all the way at the top. Instead of losing their train of thought going back up to the top of the page, users can instantly type in the search phrase.
Smashing Magazine conducted a study to find out whether sticky navigation bars were really better (see also Guideline #60). They found that Sticky menus were 22% quicker to navigate. If a user spent five minutes on a website, sticky navigation saved them an average of 36 seconds. Keep in mind that these 36 seconds wouldn’t have been spent enjoying site content, but having to navigate the website.
What’s more, the study found that all participants preferred sticky navigation. Most times, they didn’t even know what the difference between the two sites was; they just knew they preferred the site that had a sticky navigation bar.
How to do it RIGHT
Bodybuilding.com
Imagine seeing this Myoplex promotion and wondering which Myoplex products Bodybuilding.com carries.
How NOT to do it
Sony
Imagine scrolling down this seemingly endless homepage and wondering about all the watches Sony makes. Scrolling back up to search “watches” is a time commitment.
Guideline #86. The search bar should have autocomplete capabilities; fix spelling mistakes.
One study found that 73% of visitors will abandon a site within 2 minutes if they can’t find what they’re looking for.
Additionally, 25% of shoppers who conduct a search will refine their query. This is for a number of reasons, including misspellings, inaccurate search results, and regional differences in product names.
In Avinash Kaushik’s must read “Kick Butt With Internal Site Search Analytics,” he talks about how refinements can be an indicator of search result quality, especially if you compare refinements against the percentage of exits and time on site after a search is performed.
In one line, he couldn’t be clearer as to why you must pay attention to these metrics: “They came, they search on your site, they puke at your search results, they leave [your site] from the search results page.”
It seems that auto-complete itself is pretty standard, actually. Another survey by SLI that interviewed 160 ecommerce companies found that 62.5% of sites use standard text auto-complete.
By using auto-complete, you can guide users toward searches that provide the best results and reduce the number of refinements (and clicks) needed to get them to the product they want.
How to do it RIGHT
Swanson Vitamins
I liked how the search bar had an auto-fill option with commonly searched items.
User quote on Swanson Vitamins
Home Depot
Home Depot wants to finish your search for you. This super-functional search bar shows users products that might be better than what they were originally searching for.
I really liked the search feature it was really helpful to see the suggestions. That helped me immensely to complete the search for the specific items.
User quote on Home Depot
How NOT to do it
Go Electronic
This site, which offers a wide variety of electronics, would especially benefit from adding autocomplete capabilities into its search bar.
Guideline #87. Search should optimize itself to share most relevant information and similar/popular searches as users type in the search bar.
Going beyond showing images in the search bar, what if the site search engine was able to learn and improve search relevancy by tracking visitors’ search queries and click-throughs?
Specialty toy manufacturer Kid Robot noticed visitors were 3–4 times more likely to click on a search recommendation when the search result pages started learning from queries, refinements, and clicks.
This improvement in the overall search experience resulted in a jump from 1% to 4% usage in visitors using site search, with 87% of searchers finding what they wanted within the first five results. Within a few months of deployment, they experienced a 4X lift in conversions, and online orders increased by 13%.
I really liked the search feature it was really helpful to see the suggestions. That helped me immensely to complete the search for the specific items.
I would eliminate false positives from the search results.
How to do it RIGHT
Home Depot
There are so many things being done right in this search bar.
Auto-complete, sharing all the categories this product is under, showing popular, relevant product thumbnails, including review ratings, and numbers.
I really liked the search feature it was really helpful to see the suggestions. That helped me immensely to complete the search for the specific items.
User quote on Home Depot
Guideline #88. Allow users the ability to press the enter key to search (instead of being required to click the “search” button only).
This is pretty straight forward. Why make a user perform a mouse function when they can simply press enter?
The muscle memory for a quick press of the enter button is there anyway, might as well take advantage of it.
Guideline #89. Allow for filtering/categories when using search bar to narrow down/simplify search.
There’s two ways to do this. Either by a separate filter next to the search field, or (even better) by inline, auto-populated results that display {search term} in {department or segment}. The latter option allows for a cleaner interface, but either option avoids an irrelevant search result and makes sure that users are more likely to find what they’re looking for.
I would enable product search narrowing by multiple categories at once, a la ebay, so that the process would be a bit faster.
I would make the menu bar simple with the categories Women, Men, Kids, Girls, Beauty, etc. Then when the cursor is over those headings then sub headings would pop up such as tops, bottoms, dresses, swimwear, etc.
I wish there had been a helpful search filter!
I would add my suggestion for the filter search, making it so that you can choose your search options first, then apply them.
Make it able to use multiple filters for searching for items we are interested in.
How to do it RIGHT
REI
Users can see that REI sells sandals in the women, men, and kids categories, as well as some of the popular brands they have.
I absolutely loved the variety of filters and the fact that it was so easy to navigate to a product using a variety of ways (e.g., search engine, camping & hiking tab, men’s tab). In addition, I was impressed with the clarity of the “compare products” page. It was very easy for me to scroll through the specifications to determine where the differences were at.
User quote on REI
Bodybuilding.com
The drop-down menu next to the search box allows users to refine their search under one category.
It was easy to navigate, good filters and categories, well defined menu items.
User quote on Bodybuilding.com
Guideline #90. Include product images in site search window.
Graphics + Autocomplete = Merchandizing—where there is high purchase intent.
It’s because of graphics in search that Mod Cloth was able to increase orders from tablet traffic by 5%, average order value by 3%, and per value visit by 8%.
Even cooler, combined with autocomplete, search suggestions start populating after typing three letters; you can find what you want even faster.
In another case study, LED HUT increased site search conversions by 200%. Even better, site searchers spent double the amount of the average visitor.
Actually seeing products before choosing which to click on can immensely speed up the browsing process. Instead of selecting one product to view, seeing it’s nowhere near what you wanted, returning to the product list, and repeating the process all over again, you start the process already knowing the product is (visually) what you want.
The good news is that including images in the search bar’s autocomplete is a pretty straight forward process if you’re familiar with jQuery. Here’s a tutorial.
One disclaimer: Adding images to your autosuggest is only as good as the results you recommend. Good images for crappy suggestions will not get you very far.
How to do it RIGHT
Home Depot
Users wondering whether Home Depot sells lamps immediately have an idea of what they store has to offer.
I really liked the search feature it was really helpful to see the suggestions. That helped me immensely to complete the search for the specific items.
User quote on Home Depot
Lowe’s
I thought this site was very user friendly and easy to navigate. I was able to find what I was looking for pretty easily. I also liked how easy it was to compare items.
User quote on Lowe’s
Guideline #91. Search should be localized, providing results in the local terminology.
Flipkart’s VP of products said “Localization will be a large theme in ecommerce in the next one to two years.” They came to this realization when they noticed that over 50% of their sales were coming from “tier-II and tier-III cities,” and over half of their customers were opting to speak in Hindi, one of several spoken languages in India, and a language that has many dialects within itself.
Now, make no mistake, serving up regionalized results based on a user’s location can be really hard. Because most of the heavy lifting is done on the server side, it’s going to require you to work with your database programmers.
Regardless of how you handle it, the end result is about making sure the results make sense for your visitor based on where they are in the world.
How to do it RIGHT
H&M
The left screenshot is the search results for “Pants” for U.S. shoppers. The right screenshot has search results for “Pants” for UK shoppers. The results are tailored to the “pants” that people most often buy in each region.
