Buyers with a serious intent to buy, come to an eCommerce store with a specific need in mind.
They already know what they want.
And do you know where they begin hunt from?
The Search Bar.
70% of eCommerce websites have search option that requires users to type in the exact phrase they use to refer their product. Also if the user writes 'in' instead of inches or '&' instead of 'and', 60% of ecommerce site search bars will come back with no results or errors. This means abbreviations or symbols are not are not supported by majority of the stores.
In this guide we will explore the best practices of the search bar that you can take away for your web store.
An effective eCommerce site search :
- Eliminates friction.
- Increases engagement.
- Helps shoppers get to accurate results fast.
- Trigger more purchases.
- Makes shopper come back to site again.
Shoppers who use the search bar on the site are 68% more likely to convert than those who don't.
I'll show you 15 ways to make your eCommerce site search, a dominant factor in bringing more sales.
#1 Make your search bar noticeable to catch user's eye
Generally an eCommerce store's home page has too many options laid out for the visitor.
There's way too much content that you want to show to the user.
Amidst the clutter, you don't want your search box to get lost.
How to make your search bar attention seeking?
- Have the search bar placed in the header, next to the logo. This is where the visitor will give his most attention to.
- Have the search bar in a contrasting color so that it completely stands out.
- Make the search bar long enough to accommodate larger search queries
- Give users a clue about what the Search bar is expecting. In the text box, write: "Enter keyword or Item" or "What are you looking for?" or "What can we help you find?"
- The call to action button should be large and not merge with the background.
Lets look at few examples :
Officedepot.com places a large search at the top of the page, it also guides user through in line text to type in keywords and even item number.
On Flipkart.com the search bar is visible white and search button is a prominent yellow to grab attention.
#2 Use Auto-complete in Your Search Box
As a user typing in a query, you are expecting suggestions from search box.
With Google's advanced auto complete feature, people are accustomed to auto completing search queries. Auto-complete suggestions guide users to key in more accurate queries, help them avoid typos and make them familiar with the terms on the site.
Hereâ€™s how it further helps the user:
- It increases the quality of the search results
- It promises relevance of the results
- It gives them a peek into what products the site is dealing in
- It is seen as sign of reassurance - The site understands what the user is looking for
- It encourages them to get more specific in their search as they see the suggestions
Auto-completion in search is not just fast but it is also intuitive.
It delivers accuracy and increases chances of conversion.
Hereâ€™s an example below from Amazon.com which auto-completes usersâ€™ input.
The site auto-completes user's query with a list of relevant options.
#3 Use Images With Product Names and Descriptions
The purpose of images in search is to navigate the user through the umpteen listings on the store, fast.
Image thumbnails appearing in search options are quick to grab attention. They lead the user to exactly what he wants through visual cues. Images make search suggestions useful and guide the user better through the buying process.
Look at this example below from HipVan.com:
HipVan.com has a well laid-out auto-complete drop down with full product names and image thumbnails.
#4 Use hover to show important information
Users hope to get to the end result with least clicks.
When users hover over search choices in drop-down, they expect information to further aid choice.
The example from Home Depot in this matter is quite impressive.
The search results are sensitive to hovering.
The product range on the side changes by simply hovering over the listings on the left.
The image thumbnails change as the user hovers over different products.
This elaborate search with hover ensures that user would click on exactly what heâ€™s looking for.
#5 Avoid Scrollbars & Keep the Result List Manageable
Shoppers struggle to make decisions when presented with too many choices. Eliminating choices can lower the anxiety among shoppers.
For an ecommerce site it means too many choices in the small area of search results leads to confusion and a bad shopping experience.
As the user is entering specific keywords in search box, he expects a manageable option list.Tip: Keep your Auto-Complete list of suggestions close to 10. Keep the list manageable and avoid scrolling. If your list is longer, you could say â€œSee more resultsâ€. Bad Example: Luxola.com confuses the shopper with a massive list of search results. It has an extensive list of search results under categories and products.
Isnâ€™t information overload leading to redundancy and confusion?
#6 Include Labels in Search Suggestion box
When a shopper types in a request in the search bar, their input may not be specific.
Or it may stand to mean different things.
Consider an example:
If a shopper enters â€˜clothingâ€™ in the search bar, it could mean clothing for men, girls, babies etc.
But with â€˜clothingâ€™ as an input the shopper hasnâ€™t specified that.
This is where labels come in.
- Labels fit the search query into an available category to give users extra cues on searching.
- Labels instruct users on how to interact with autocomplete suggestions.
Lets look at few examples:
See the search results below from Flipkart.
The search query â€˜clothingâ€™ returns results from different categories. All the categories are shown as labels.
Also look at another example from Bascousa.com.
The search suggestion drop down neatly divides the results into:
- Popular Suggestions
Labelling helps user get more information without confusion. It also allows the site to share more information with the user.
#7 Make the search results aware of what category the user is in
You can show up relevant results if you make you search aware about the category the user is browsing in.
Go to Amazon and enters â€œMen tshirtsâ€ in the search bar.
It falls in the Clothing and Accessories category.
Now go back on the search bar and enter â€œâ€˜Steve Jobsâ€™â€.
It could mean books, mobile and laptop covers/cases or t shirts related to Steve Jobs.
As the user is already in the men's clothing section, the search results are specific to t shirts related toâ€œSteve Jobsâ€.
Hereâ€™s a snapshot below:
The results turning up are not from mobile section or book section. But they pertain to the category the user is in.
#8 Donâ€™t expect users to know the exact jargon you use to refer your product
On an ecommerce site, there is of course no sales guy standing at the door listening to queries.
With a sales guy, one could have expected a bit of back and forth to understand shopperâ€™s exact need.
Shoppers online do not have the liberty of being heard.
They only make educated guesses about exact item names, listed on your site.
70% of all eCommerce site expect users to enter the exact jargon by which they have listed the item.
â€œBlow dryerâ€ and â€œhair dryerâ€ means exactly the same thing and should return same set of results.
Tagging blow dryer with the term â€˜hair dryerâ€™ would help user get to the right result.
This would also lead to lesser chances of landing on â€˜no resultsâ€™ page.
Look at this example from bigbasket.com.
One can type in okra and still get to ladies finger, which is how the site lists the item.
This is because ladies finger is tagged with term â€˜okraâ€™.
#9 Refrain from showing a no-results page
Never let your search box come back with â€œNo results."
This is a total turn off for the visitor.
Here are some ways to get around â€œNo resultsâ€ problem.
- Get around this with a message that reads â€œdid you mean this?â€ or display Popular searches instead.
- You could show results from your site which somewhat match in spellings to user's input.
- Display popular searches to show closest possible results that match user queries.
Here's an interesting example from Amazon.com.
If the user types â€˜Champuâ€™, the site automatically shows results for 'Campus'.
This is because:
It has offerings to match the query 'Campus'.
#10 Use Google Keywords to understand Search from user standpoint
Google Keyword Tool is a great place to pick your buyersâ€™ mind.
It has loads of data over what people turn to Google for and what exact keywords do they key in.
And Google does not stop here:
- Average monthly searches
- Related keywords users are searching
The keyword tool tells you where they advertisers are spending money on.
It is not wise to not account for these keywords on the site search.
Look at this example on â€œBlow Dryerâ€ from Google Keywords tool:
This means that users are not just typing in blow dryer but also:
Professional blow dryers, best professional hair dryer, hair blow dryer etc.
They would come on your site and do the same.
#11 Set up Google Analytics to pick your buyerâ€™s mind
The purpose of analytics is to understand:
What is preventing conversions ?
What is driving engagement?
From the search bar perspective, it gives you exact information about what the user is typing in.
When I say â€˜exactâ€™, I donâ€™t mean â€˜blue handbagsâ€™ but â€˜blue Dolce & Gabbana replica handbagsâ€.
This is specific to the last word and comes from horseâ€™s mouth (your buyer)!
Hereâ€™s what Google Analytics helps you answer:
- What exact adwords you should target to convert high?
- What are the most common queries of visitors?
- What do the visitors do after the search results appear?
- What are the new searches being made on the store?
- Are the searches following any trends?
- Which queries have high conversion rate?
- What are the common spelling mistakes being made on the website?
- What are the negative keywords users are searching for but your sites doesnâ€™t have them?
You will know what the customer is looking for by tracking all of the search queries that customers type in when searching and clicking your Adword. If many visitors come over to your store by clicking on a certain ad word and quickly bounce back, you can mark it as a negative keyword.
Negative keywords prevent Adwords ads from showing up when a customer types in a query that contains a specific keyword. As a result, we save money with our ad spend because we will never pay for ads for customers that donâ€™t stand a chance of buying from us.Steve Chou, from MyWifeQuitHerJob.com
#12 Make Search suggestions large enough to leave room for price and reviews
Ideally a Search bar should let you get to the product you want in least number of clicks.
If you can get more information about the product in search suggestion drop-down, you'd be sure of what to click.
Look at this example below from FootLocker:
The search drop down gives a preview of:
- Product Pictures and names
- Product Price with current discounts
- Ratings of the product
This helps consumer make up his mind on where he should click.
#13 Make the search bar compliant with singulars and plurals
It does not take a lot to know that a user may enter a plural in search instead of a singular for a product.
The site may however refer to the product as singular.
Instead of towel, the user may search for towels or vice versa.
In the example below from bascousa.com, if you type screw head, it reverts with relevant results.
However when you type in â€˜screw headsâ€™, it comes back with no results found!With plural:
#14 Use bread crumbs on search result page
Breadcrumb trails help users identify their exact location on the site.
Breadcrumbs allow users to navigate with ease.
They can either go back to the previous page or browse more items in same category with one click.
It makes navigation through the site seamless. One click to move back up or switch sub-categories.
Users do not have to head back to the home page or the search bar and start all over again.
A user types in dining tables and begins browsing.
The breadcrumbs are-
Home > Furniture > Kitchen & Dining > Dining Tables, Chairs and Sets
While browsing for Dining Tables, one can go to Kitchen and Dining section for related items.
Also breadcrumbs let you go to sibling sub-categories too.
A user browsing in Dresses subcategory, can select â€˜Women Clothingâ€™ from breadcrumb. She can browse sibling sections like office wear, tights, pants etc.
#15 Make search bar compliant with special characters like (& - ,â€)
Searches with symbols and abbreviations are not supported by 60% of e-commerce websites.
Dolce & Gabbana should lead to the same page as Dolce and Gabbana
Also eCommerce sites do not see the double quotation mark â€œ as in. or inch.
Homedepot.com goes not return the same results if you type in 50"-60" TV as 50-60 inch. â€‹
In the first snapshot TVs was searched for on the bar. And from the sidebar 50-60 in. was selected under Screen Resolution.
In the screen shot2, 50â€-60â€tv was typed in. And it returned different results from the previous screen shot.In the screen shot2, 50â€-60â€tv was typed in. And it returned different results from the previous screen shot.
There could be nothing worse than a user not being able to find a specific product because search was lame.
You donâ€™t want that, do you?
Now that youâ€™ve just gone through this extensive list of 15 best practices for eCommerce site search:
Itâ€™s your turn to implement.
Keep me posted about the challenges you face, right here!