As we discussed last week, the purpose of refinements is to allow shoppers to find what they are looking for more quickly. By indicating specific characteristics to narrow down the number of options shown in a category, visitors don’t have to scroll through pages of products to find the right one.
There are some simple ways you can deliver an exceptional shopping experience through your refinements.
Consider a Color Palette
Color palettes provide a visually appealing way to show color options for a particular product. Plus, it takes the guess work out of identifying colors with names like vermilion (a reddish orange) or verdigris (a yellowish green). Color palettes are often displayed on the left column with other refinements.
Show Products in the Right Color
Display products in the color shoppers requested. For example, if the default image for a shirt is red, but it is also offered in blue, show the blue shirt when shoppers refine the category to blue.
If your product is available in several colors, let visitors see the color options from the navigation page. One effective way of doing this is to allow visitors to hover over the color palettes directly under the picture of the product. The color of the product changes, while other products on the page remain unchanged.
Use Images
The human brain processes images faster than text. Consider using images to signal certain refinements, such as apparel type (dresses, shirts, pants), brands, ratings, colors and shapes. Of course, images won’t work for some refinements, so use your judgment. Make sure the images you use are clear and simple, so your customers won’t be left guessing.
Use Easy-to-understand Navigational Images
If you use navigational images to identify subcategories, make sure they are easy to understand. You want to make sure shoppers don’t accidentally confuse the subcategory images for the product selection.
Provide the following visual cues:
- Show products as well as subcategories
- Include the number of results for each subcategory
- Label the subcategory images clearly
- Distinguish between the layout of your products and subcategories
Offer Multiple Ways to Unselect Refinements
Let visitors easily change and remove refinements. Customers may want to navigate to the top or up one or several levels within a category. Use a Show All link or a breadcrumb trail to enable a quick link back to a category page or higher navigation levels. Breadcrumb trails help visitors see exactly where they are on the site and what refinements have been used.
Another best practice is to use an X or checkmark beside the selected refinements. This allows visitors to easily remove a refinement selection without deleting all the selected refinements and gives shoppers the flexibility they need to find the item they’re looking for. A Clear All option offers a quick “back-to-the-top” navigation alternative.
For more tips on how to improve your site navigation, download our Big Book of Navigation Tips.
