When Google added a color picker to their image search last week I thought it would be worthwhile sharing a few ideas about the use of color refinements in site search. First – let’s take a look at what Google have done. When you do an image search a drop down menu is available at the top. When you click on it you see a selection of 12 standard colors that you can filter the results by.

Goolge will be doing some analysis of the images to work out which are the main colors in each images. For the few test searches I have done this works well.  Google shows the same 12 colors in the drop down even if there are no results. I think it could be improved slightly if they only showed the colors in the drop down for which there were results. Nevertheless, I imagine this will be a popular feature.

I recommend having a similar feature in your site search if you have results where color is important to your visitors. We normally recommend that you don’t use drop downs for the refinements because the drop downs make it slightly more difficult to use (one extra click) and you have to click on them to see what refinements/facets are available. The trade off is the refinements take up more screen real estate. By putting the refinements on the side and using a grid view you can still get plenty of results above the fold.When displaying a color filtering option – you should only show the colors for which there are results (this is the same for other refinement options as well).

Some problems

Color filtering can get a little tricky if you have products that come in several colors – if you don’t have a photo for every color of every product then the results may look a little strange. For example if you have a shirt that comes in blue and green but you only have an image of the blue shirt – then when you filter the results to show those that come in green – the blue shirt will show in the results. This is strange for the user because they’ve asked to see only the green products yet the image shows a blue shirt. It’s a valid result because the shirt does come in green but you need to tell the user somehow.

One solution is to take an image of every product in every color available and show the appropriate product when a color filter is applied. This can be very expensive and time consuming and if you’re custom making the products (for example sofas) then you may not have every combination available to photograph. Another solution is to show the available colors in the search result. Your Blinds do this in the example below. When you mouse over a color a larger image of the color pops up along with it’s name.

Choosing multiple colors

The example below from Jelly Belly shows an implementation that allows you to select more than one color. In this case blue and pink are selected. Jason Marrone, Ecommerce Marketing Manager at Jelly Belly mentioned in the ecommerce podcast that they have many visitors who are choosing candy to match a color theme for a function. These filtering options definitely help those people. I like this implementation – with the ticks in the colors that are selected.

Automatically pulling color from images

We did some experiments a few years ago where we analyzed the product images on a customer’s site and automatically tagged them with the major colors that appeared in the images. This worked reasonably well – but we didn’t have a technique for excluding background colors – which meant it didn’t work perfectly. I’m sure there are techniques for removing background colours – such as ignoring any colors that are on the edge of the image – or something more sophisticated. In any case we haven’t had much demand for this. If you don’t have your products tagged with their colors then let us know if you’d be interested in having a service like this. It will help us work out whether this is something we should be putting some more effort into.