On e-commerce sites that sell visually-driven products like apparel, home decoration, and to some extend consumer electronics – we find that up to 12% of all users’ search queries include a color keyword.
While our search usability study and benchmark reveals that 78% of e-commerce sites have a search engine capable of returning relevant products for a color search, it also shows that how “color” search results are presented to users is critical. And here more than half of e-commerce sites (54% to be precise) display their “color” search results in a way that severely impede their users’ ability to both find and decide on a product – with site abandonments as a direct result.
More specifically, our testing showed that dynamically switching each list items’ product thumbnail to reflect the color variation searched for is absolutely vital to the usability and performance of color searches. In other words, for search results of your product listing thumbnails shouldn’t be static – as they currently are at 54% of major e-commerce sites.
In this article we’ll dive into how users perform color searches, and outline two presentational methods that the tests revealed to be optimal for search UX performance.
When testing how users locate products on e-commerce sites – during our large-scale studies on Search, Category Navigation, and Product Lists & Filtering – the majority of subjects at one point or another while browsing an apparel and other visually-driven vertical wanted to see only the products available in a specific color or color combination.
While some subjects applied a color filter, others simply included the name of the color as part of their search query. Indeed, when performing search audits for leading e-commerce sites within visually-driven product verticals we see that searches including a color constitute 5-12% of all search queries, which align well with the behavior observed in our qualitative studies.
A color search falls within the search type ‘Feature Queries’, and is particularly important to fully support in visually-driven industries (see full article on the 12 Query Types in e-commerce). Yet, even though our search usability benchmark reveals that 78% of search engines support Feature Queries and yield relevant products for the color, we also find that how “color” search results are presented to users plays a crucial role in how successful users are in their overall ability to actually locate and decide upon a product they want to purchase.
When a user explicitly denotes a product variation in their search query, they often expect to literally see that variation if it has meaningful aesthetic implications on the product (such as color, patterns, material, etc). Many users are therefore left bewildered by why and how certain search results are relevant to their query if the same default thumbnail is used even though a specific product variation was included in the search query because the returned products look irrelevant to the user.
To fully support Feature Queries for product variations, you should therefore dynamically change the product thumbnails to match the user’s query. For example, the thumbnail should switch to the leather variation when the user searches for “leather jacket”, and a search for “red sofas” should display all the red variations rather than the default product thumbnail of those sofas. This makes it immediately obvious to the user that the product variation they are interested in is indeed available, and it saves the user a trip to the product page to confirm this.
Note: our findings on having dynamic thumbnails for color search results applies only when product variations are implemented as a combined single list item. If product variations are instead treated as separate products in the product list, any non-matching variations should instead be excluded from the results. (When product variations should be a single combined or multiple separate list items is a complex topic with many nuances, covered in our Product List & Filtering study, which we’ll save for a future article).
An equally important aspect of dynamic list item thumbnails is that it enables the user to compare the aesthetic of all the search results. When thumbnails don’t dynamically switch to the product variation searched for, the user is unable to compare the shown products as they do not look alike, or resemble the color attribute that the user has shown an explicit interest in. For example, it’s not enough to know that a sofa is available in a red variation since there are numerous shades of red.
Therefore, in order to meaningfully compare a list of products, the user must be able to see those products in the variation they are interested in and have searched for. When dynamic thumbnails aren’t provided users are forced into extensive pogo-sticking – where they have to open each and every search result just to see the product variation of interest.
Implementation-wise a slightly better performing variation of just displaying dynamically updating thumbnails is to also link the color search queries to the site’s color filter. So in case the search engine detects a direct correlation between a search query including a color keyword and the site’s available color filters, it auto-applies that as a filter to the search results.
The product thumbnails should of course still switch to match the variation search for / filtered by, but by explicitly applying the product variation as a filter helps users in two additional ways:
Note though, that expanding color search support with this auto-applied filtering technique is only recommended on sites where the product tagging is close to 100% accurate at any given time, as relevant products otherwise may be excluded by the auto-applied filter. If color filter tagging accuracy is slightly incomplete or not frequently updated, we recommend sticking to “just” dynamically matching the thumbnails to the variation searched for.
The overall concept of dynamically adapting the search result thumbnails is another form of Contextual Search Query Snippets – another search usability aspect we’ve found critical to users’ ability to understand how the returned products relate to their search query (and when not implemented can force users into extensive pogo-sticking, causing them to abandon the site in the product selection process).
If prioritizing the two, then dynamic thumbnails is the most important for sites with visually-driven products, whereas sites with mainly spec-driven products will often see a larger ROI from implementing Contextual Search Snippets. Ideally site have both, in particular sites selling consumer electronics (which often are both visually- and spec-driven) and mass-merchants that typically sell both types of products.
This article presents the research findings from just 1 of the 850+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” on-site e-commerce search experience.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
This is a great article.
I was actually on L.L. Bean’s site yesterday and trying to figure out how or why they chose the default thumbnails. I wasn’t searching a particular color at the time but it makes complete sense that if I wanted red only, I should see red thumbnails in my results.
The only issue is the fact that they might have multiple reds or blues and you wouldn’t want them to dismiss your product because they didn’t click through to see the other red/blue. In this case, I think I would show the same product again but with the other red/blue next to it. Now that could get a little frustrating because it would take up too much space if the user just doesn’t like the style.
There are so many factors that go into this. I did test Amazon and noticed that if I do a color search for “girls rain jacket red” I will only get one item back with one red thumbnail even when there are two different color reds. I find that interesting. I would like to know how this issue could/should be solved.
NLP and machine learning integrations for catalogs will help solve this problem. A natural language search algorithm will be able to map to any preference of the user to come up with relevant results. A demo of this type of product discovery and shopping assistant UX can be seen here- http://thelightapp.com/cognitive_commerce/
Try typing in red shoes under 1k or laptops in blue under some price range— prices are in INR as its a demo for an Indian site.
The fact that awareness and importance of search within the store are growing, search experience is set to evolve for good. Disclosure, I am one of the founders of Klevu search. We at Klevu provide variant search capability to all our customers, including SME retailers. Variant search can be achieved by indexing the catalog across the variants. Each variant is indexed as a separate record to ensure discovery to be specific.
I agree that when a customer is searching by color they should see that product in that color. However, this seems like a big project for a company that already has a lot of product on their site. I’m interested in knowing how big the team that takes the pictures and edits is, and how long it takes to update to a more dynamic catalog page. Anyone have an idea?
Hello Christian Holst,
you did a great article, Its a wonderful idea to change the thumbnail of your products based on the users search result as it will reduce time taken for purchase and provides better view of their products.
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 firstname.lastname@example.org