Over time companies have come to recognize that populating a web site with lots of images significantly improves the user experience. This is especially true for e-commerce sites, where people shopping online always like to see a picture of what they’re going to buy. For many sites it’s even more compelling when shoppers can view items in all the different color options available. Well, guess what? Adding the ability to refine results by color to your site search can also have a positive impact.

Let’s look at our customer Jelly Belly. If you search their site for a particular flavor or mix of flavors of jelly beans, you will see an option to refine by one or more colors – so you see only results in the particular color(s) you like (as shown below).

Jason Marrone, ecommerce marketing manager for Jelly Belly, mentioned in the recent Ecommerce Podcast interview that they have many visitors who are choosing candy to match a color theme for functions like bridal or baby showers, and graduation, birthday and other types of parties. As such, they appreciate being able to refine the results by particular colors – such as seeing jelly beans in the school colors of the recent high school graduate.

Google recently added a color refinement option to its image search, allowing you to search for particular images (e.g. “rose bush”) in a particular color, like pink. (When Google adds a new feature, it’s generally a good idea others can borrow – although you should still test and measure with your visitors to make sure.)

Refining search results by color can get a little tricky if you have products that come in several colors – especially if you don’t have a photo for every color of every product. Of course one solution is to take an image of every product in every color available and show the appropriate product when a color refinement is applied. This can be very expensive, time consuming and often just not practical. A common solution is to take one photo of each product and show swatches of the color or material that the product can come in.

As you can see in the example below, Dover Saddlery, another SLI customer, approaches this in a useful way, by showing available colors for each item below each site search result. When you mouse over a color a larger image of the color pops up along with its name. If you click on the result, you’re then able to see the item in the different colors available.

We’re starting to do more work with customers in this area and would be happy to give you some guidance on how best to incorporate color refinements into your site search. It could be another way to increase conversions and improve the user experience on your site. If you would like more information, feel free to contact us, or take a look at our new video with some quick tips on adding color refinements to site search.

2 thoughts to “Add Some Color to Your Web Site – and the Site Search

  • searchtools_avi

    I agree with you on the value of color, it’s very positive for people who want those colors and less-negative for people who don’t, as they can skim rather than click and come back.

    But one of my pet peeves shows up: the broken extended character, presumably a curly quote in the product name, which turns into something like this  –  – A with a circumflex. I’ve found this very common in HTML created by Microsoft Office products, and it’s a shame. I think you must have fixed it since then, but it’s one more little problem.

    Thinking it through, any normalization you do in the inverted index should skip that, but how can it tell that it’s not an actual word, RiderÂs? Even if you get it right there, adding it to the document store would have to fix it as well. Or maybe just flag it and bug the content owners?

  • shaunr

    Yes – we have some work arounds we do for when the encoding is not quite right like this. We were in the process of fixing this when the screenshot was taken.

Comments are closed.