UX Research Articles

Latest · Popular · See all

192 articles based on findings from our e-commerce usability research

Product Thumbnails Should Dynamically Update to Match the Variation Searched For (54% Don’t)

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.

Users Perform Color Searches

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.

L.L. Bean is just one of the 54% of sites that return relevant results when users include a color in the search query (note how all jackets are available in black) – yet make it needlessly difficult for users to understand and use the color search results because the product thumbnails don’t dynamically switch to match the color variation searched for.

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.

1) Dynamically Updating Thumbnails to Match the Color Searched For

At Zappos, a test subject refined her search query from “sleeve mac 15” to “sleeve mac 15 black”, expecting to only get black sleeves. Yet, in the results list, several of the thumbnails displayed weren’t showing a black sleeve. Most of these items did exist in a black version, but the product thumbnail displayed didn’t reflect this – making it unclear why and how the products were relevant as well as difficult to compare the sleeves to one another.

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

On IKEA, a search for “red sofa” returns all the sofas available in red and the thumbnails dynamically change to the appropriate product variation. This enable users to compare the nuances of the variation searched for.

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.

2) Auto-Applying Relevant Filters

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.

On Wayfair the support for color search queries is taken one notch further as they are linked to the color filter. When users search for e.g. “red sofa” Wayfair returns “sofa” results with the color filter “red” auto-applied.

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:

  1. It adds significant transparency to the search logic, helping users understand how the site interpreted their search query. There’s a direct visual connection between the search query and the pre-applied color filtering selection, explicating to the user that e.g. the inclusion of the keyword “red” was interpreted by the site to mean that they wanted to see red products only.
  2. Having the color search query matched to a color filter gives users the ability to easily adapt their color filtering. This is particular beneficial for filters where color shading doesn’t have well-know naming conventions, hence making it difficult for users to search for them by name (compared to clicking a color swatch). Furthermore it can also encourage users to broaden their queries to include other color shadings.

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.

Contextualizing Search Results

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.

Post a comment or Share:

User experience research, delivered twice a month

Join 14,000+ readers and get Baymard’s research articles by RSS feed or e-mail:

Due to spam, you need JavaScript to do that.

(1-click unsubscribe at any time)

Addison May 24, 2016 Reply to this comment

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.

Sanjeev May 25, 2016 Reply to this comment

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.

Nilay June 9, 2016 Reply to this comment

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.

Suzanne June 13, 2016 Reply to this comment

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?

Mahesh June 16, 2016 Reply to this comment

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

Post a comment!

Close overlay