In last month’s newsletter, we explained how to identify the most useful refinements for your site search, depending on your customers’ needs and the product mix. Figuring out which refinements to offer is the starting point, but there’s more work to be done: This month, we’ll tell you how to display these refinements so that your site visitors can make best use of them, and have a better search (and shopping) experience.
Place frequently used refinements at the top of the list. Make sure that the refinements most likely to be used can be easily accessed by visitors. Less frequently used refinements can be placed farther down on the list, or perhaps made visible only when the user has clicked on a certain category – in which case, they can select refinements that are part of a subcategory.
If you discover over time that visitors are not making use of certain refinements, then you can decide if you want to stop displaying them. This should be an ongoing evaluation process: You should continually look for ways to improve usability (and thereby conversions) by simplifying the site search process. Don’t feel compelled to display all possible refinements, which is confusing to users.
Show the number of results next to refinement options. Next to specific refinements, display the number of results that are available when that refinement is clicked on, so that visitors have a sense of how many results they’ll see. You can view this feature at work on the site for Lighting by Gregory, an SLI customer.
Show color refinements as a palette instead of text. Since colors are visual, site visitors will respond more quickly to a display of actual colors, rather than the names of the colors in text form. A color palette also takes up less space within search, so it helps reduce visual clutter.
For products available in several colors, consider retooling search results so that if a specific color refinement is selected, the product is displayed in that color. For instance, the main photo for a shirt available in red, green and blue may show the red shirt. If visitors select the blue color refinement, the image should change to the blue shirt.
When it comes to deciding how and where to display refinements, take the same approach that you would do with other aspects of your site design: Look at usage data, talk to your customers, and test options to see which refinements and placements work better. If you need advice on choosing and displaying refinements, contact your SLI Systems customer success manager.
Test placement of refinements. Depending on your audience and your site design, users may make more use of refinements depending on where they are placed – most commonly, they appear at the top of the page or in the left navigation pane. Try to avoid placing refinements at the bottom of the page, since visitors need to scroll down to view them. Test different positions to see which ones your visitors prefer.
Allow visitors to navigate between refinements on the same level. If a visitor clicks on a refinement but then decides they want to see a different refinement, don’t require them to click “back” to get to the original search results page first. They should be able to simply click a different refinement option from that page and easily see a new batch of results.
Don’t show refinement options that have no results. For instance, if there are no red products for a particular search, then there should be no link shown to restrict the results to red products.
Avoid drop-down boxes for refinements. Drop-down boxes make it harder for people to see the available refinement options, and they’ll be less likely to use them. If refinements are shown as a list of links, then they can select the refinement with a single click. However, if you have many refinements, or many options within a refinement, then showing them as links can take up too much screen real estate. In this case, drop-down boxes may be the best option.
Show a breadcrumb trail. A breadcrumb trail will show the search term and any refinements that have been made. It helps visitors understand where they’ve been on the site and how they arrived at the page they’re on. It also makes it easy to remove refinements, and helps them go back to a broader range of results if they choose. Breadcrumbs take up very little space, and are a standard navigational element.
