Optimizing Site Search Results Pages

Last chapter, we delved deep into the topic of site search tuning — optimizing for search relevance on the back end. This chapter explores how to optimize the front end of your site search results pages.

Most category page design best practices previously covered in Ecommerce Illustrated also apply to search results pages, including sort tools, filtered navigation and hover effects. But search results pages have several nuances that should be considered in your design.

Search results behavior

Avoid Google Site Search

Google’s Site Search tool serves Google-y search results, a poor experience for online shopping.

google-product-search

Sites that combine product results with non-product content like knowledge bases, tutorials, documentation and user forums often employ federated search, which segments content by type. It’s important that product catalog results are styled differently and returned in a grid or list format that contains images and pricing.

iphone-6-sprint

Sprint (above) fails to deliver user-friendly results under the Shop tab. T-Mobile (below) handles both product and non-product results well.

tmobile-federated-1

tmobile-federated-2

Support sort by ‘Relevance’ and make it the default

Chapter 15 of Ecommerce Illustrated recommends optimizing default sort at the category level as a merchandising tactic. But on search pages, default search should always be relevance.

Avoid setting “Select One” or “Please Select” as the default sort option. Typically, when “pick something” is the default, relevance is not even an option.

pier-1-relevance

Always assume search users want most relevant results first.

This search for “ferret tunnel” serves a hamster wheel in first position by default, and the sort options don’t indicate a relevance override.

ferret-tunnel

Display search query and number of results

Reinforce relevance by repeating the search query, and indicate the number of matches. This provides context for product results. Customers don’t always have perfect recall for what they just searched, and if the number of results returned is too many or too few, they can more easily refine or broaden their query.

This also helps reassure customers when search returns semantic matches, like Macys’ “candle holders” for the search “candle stick.” Repeating the query reassures the searcher that neither she nor your engine made an error.

macys-candle-stick

Ideally, this contextual feedback is displayed in the white space directly above-left to product results. J Crew’s page-span search box is visually separated from product results, and may fall prey to banner blindness.

jcrew-search-bar

LampsPlus alerts customers when an exact match cannot be found, and near-matches are served. But because it appears in a box above filter buttons, it’s also prone to banner blindness. Ideally, the notification would appear proximal to product results.

lampsplus-arc-lamp

Lenovo repeats the search query — above a bold banner. Search suggestions are more likely to be noticed, but should be paired with “Showing results for {query}.”

lenovo-yoga

Clearly indicate when queries have been autocorrected

Again, the best placement is directly above product results.

hamster-to-master

Don’t jump to a single product page

Some retailers tune their site search to jump directly to a product page when there’s only one result (or for other merchandising reasons).

direct-to-product-page

The problem with this tactic is searchers expect to see a search results page, and don’t intuitively understand the direct jump means it’s the only result. Many won’t believe the product they land on is the only result (especially for a search term like “puffer jacket” on a site like LL Bean). When you interrupt the customer this way, this can erode trust in your site’s functionality.

Optimize filter and facet stack-rank

Filters and facets are critical product list refinement tools, and certain filters and facets are more relevant and useful to a given query’s context than others.

For example, a search for “tight lies” (a line of Adams Golf clubs) returns an array of filters and facets across different sites.

tight-lies-filters

Which are the most useful? Which should be shown first or appear expanded with other options collapsed by default? This logic can vary category-by-category (product type) or search-to-search (e.g. queries that represent a specific brand’s product line).

Ideally, refinement options for “tight lies” reflect what a good salesperson would ask or suggest. First, guide them to the most appropriate category class, in this case, brand. The next most important filters may be gender, dexterity and shaft material. Price and star rating (which can also be Sort options) are less important filters to start with when queries are broad.

If your ecommerce platform or site search tool supports it, consider optimizing the presentation of filters and facets on a category or keyword basis. Alternatively, merchandising tools like BloomReach can optimize filter ranking with machine learning, tracking menu engagement and click-through at the query level.

Auto-apply the most relevant category filter

Jumping searchers to the most relevant category bypasses the category selection step, and instantly tightens recall.

Amazon sends searches for “hamster wheel” directly to results within the “Pet Supplies” department, with the option to override and show results from All Departments.

related-hamster-wheel

Show the most relevant thumbnail image

Customers using modifiers like color, pattern, finish, character or other visual attribute for which a product would have its own thumbnail image expect to see results that visually match their intent.

A search for “orange sneakers” on Target grossly misses the mark.

target-orange-shoes

Nordstrom gets it right, pulling orange thumbnails for the same query.

nordstrom-orange-sneakers

Mitigating ‘no results found’

Autocorrect as the customer types

Autocomplete and autosuggest can thwart an impending misspelling. If your catalog contains many creatively-named brands and products, or if your customers regularly search by SKU or product numbers, enabling autocorrection in your customer’s keyboard is less user-friendly.

Autocorrect search results, or expand recall with boolean “or” operators

If you use boolean “or” to increase recall, it’s a nice gesture to inform your customer of this.

sun-or-glasses

Search tips – only a stop-gap

If a term can’t be autocorrected or served near-matches, offer your searcher tips to improve his query.

no-search-results

Keep in mind that search tips are no substitute for good site search logic, covered in-depth in the previous chapter of Ecommerce Illustrated. Rather than ask customers to vary spelling, use fuzzy matching, and regularly mine your “no results found” search logs to ensure uncommon misspellings that don’t exist in your dictionaries are manually added as soon as possible.

In some cases, it’s better to admit there are no results than offer customers hope that searching again could improve results. If you don’t carry anything remotely close to “monkey sweat,” let ‘em know.

Show category links

An alternative to showing search refinement tips is to be clear the search matched no products, and encourage a new search, or switch to category browse. Golfsmith labels the search box “New Search” for clarity.

mulligan

Show customer service options

Another alternative to search tips is to encourage the customer to connect with customer service.

burton-beanie

LampsPlus triggers live chat strategically when “zero results” occurs.

lampsplus-live-chat

Optimizing autosuggest

Support keyboard navigation

When customers are typing in your search box, they’re not grasping a mouse. Ensure that you support tabbing through autosuggestion options with up and down arrows.

Visually separate category and product suggestions

Help customers scan their options by visually separating suggestion types.

best-buy-le

Best Buy’s menu is random (above), while Williams-Sonoma’s is organized and easy to digest (below).

willsonoma

Highlight keyword matches

Provide instant reasurrance that autosuggestions are relevant by highlighting matching terms in bold type or with a different color.

Foot Locker highlights in red, which is more difficult to read than black text. This effectively makes the differences between suggested qeuries easier to scan, reducing cognitive load (the brain can focus on what’s right-of-red).

karmaloop-spizike

Show the number of results per option

Help your customer hone in on the best set of results by exposing the number of results for each suggestion.

Searchers who want to see everything you have in “snake print” will appreciate that choosing the broad term “snake” will return more complete results than “snake print.” Those that want focused results can choose a more specific term from the suggested list, while avoiding variants that serve meager results (e.g. “snake shoes” vs “snakeskin shoes”).

asos-autosuggest-snake

Keep menu length usable

Longer lists aren’t better — remember the paradox of choice!

Control menu length by applying relevance rules, such as display only terms with >X product results, up to a maximum of ten suggestions.

Be careful truncating product results

It’s trendy to bake product results into autosuggest flyout menus, but these truncated sets of product results can easily be mistaken for everything you’ve got.

oriental-plushie

Always include a “View More” button to indicate there’s more behind the link.

view-more-resultsss

Even better, include the number of product results in the button text.

barstool

These are the basic design patterns that all ecommerce site search results pages should adopt. If you want to take site search results optimization to the next level, the next chapter of Ecommerce Illustrated explores “searchandising” – advanced tactics for merchandising search pages.

Need help with your site search optimization strategy? Drop me a line.

Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *