When displayed in an efficient manner, refinements can improve usability – and conversions – of your online storefront.
In my last article on site search refinements, I explained how to determine which alterations best suit the needs of online shoppers. Here are some tips on how to organize and display these refinements to give visitors the best possible searching 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 found by visitors. Place infrequently used refinements farther down on the list, or make them visible only when the user has clicked on a certain category. Don’t feel compelled to display all possible refinements, which may be 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 can tell how many results they’ll see.
Present color refinements as a palette instead of text
Since colors are visual, customers will respond more easily 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, helping reduce clutter.
Test placement of refinements
Depending on your customers and site design, people may make more use of refinements depending on where they are placed. Most often, they appear at the top of the page or in the left navigation pane – but you should test different placements to see what works best on your site. It’s best to avoid placing refinements at the bottom of the page so shoppers don’t have to scroll down to view them.
Allow customers to navigate between refinements on the same level
If a visitor clicks on a refinement but then decides she wants to see a different refinement, don’t require her to click “back” to get to the original search results page first. She should be able to simply click a different refinement option from that page and see new results.
Don’t show refinement options that have no results
For instance, if there are no blue products for a particular search, then there should be no link shown to restrict the results to blue products.
Avoid drop-down boxes for refinements
Drop-down boxes make it harder for visitors to see the available refinement options, and they’ll be less likely to use them. If refinements are shown as a list of links, users can select the refinement with a single click. But if you have several refinements, or many options within a refinement, drop-down boxes may be the best option to take up less space.
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.
Shaun Ryan is CEO of SLI Systems.