The Ecommerce Guide to Category Sort and Filter

Sort and filter are interactive guided selling tools for customers to customize their category and search results. When designed and implemented well, they support both shoppers with specific intent and in discovery mode.

Sort vs filter

Sort applies to all products in a category or search list. Results are simply re-ranked according to the sort attribute, such as relevance, price low-high or high-low, date added or average customer rating.

Filters reduce the number of results, narrowing by selected attributes.

Despite the clear difference between sort and filter, many ecommerce sites erroneously mix them together. For example, Burton mixes sort options such as price and name ascending/descending with category attributes like fit and warmth (the two images below represent one single menu, scrolled).

Similarly, Boden’s “Our favorites” is a curated selection, more appropriately presented as a filter option.

The rule of thumb is if the selection ultimately reduces the number of returned results (e.g. Our Favorites) or contains sub-attributes (e.g. Fit, Warmth), they are filters, and should not be combined with sort options.

Filters vs Facets

Filters narrow down a large set of results by sub-categories, while facets narrow further by product attributes.

An example of this is Overstock’s Bedding and Bath filtered (Category) and faceted (Narrow Your Results) navigation menus.

Within a refined set of results (e.g. duvet covers), one can refine further by bed size, color, brand, price and so on, as desired. It’s less useful for a customer to narrow Bedding and Bath products before selecting a sub-category filter, hence these sub-options are better offered as facets.

Sort and Filter Placement

The conventional placement for sort tools above a product grid, with filters presented in a left-hand column.

When it comes to usability, it’s safest to stick with conventional placement. However, every page design has its own context. Additional graphic elements, like hero headers, can visually compete with sort and filters, or “break” the experience.

AlliedInc’s featured product header detracts from both filter and sort tools, making the dark horizontal bar that contains them is harder to notice. (Features and hero zones also contribute to category list page abandonment in user tests.)

47St Photo’s best seller feature pushes actual category results down the page. Category filters are no longer proximal to product results, requiring users to scroll unnecessarily to access them (this is exacerbated on smaller screen sizes such as scaled-down desktop windows and mobile devices).

Mobile-first design is picking up speed to where some desktop sites are breaking convention and replicating sort and filter in a space-saving, collapsed fashion.

For example, Kenneth Cole’s sort and filter links are subtle, and may be easily overlooked.

Using color is a simple way to increase engagement with simplified, horizontal sort and filter tools.

Sort Usability

Sort tools typically are presented as drop-down menus, sometimes with a default option selected.

While you have freedom to get creative with sort options (so long as they add value to customers), it’s important sort options are intuitive.

iHerb’s “lightest” and “heaviest” sunscreen sort options are unclear, does it mean shipping weight, light-to-heavy sunscreen protection, or light-to-heavy texture of the product?

I’ve spotted a handful of sites using “Position” as the default filter. It’s unclear what position refers to, or why a customer would find it useful.

Likewise, “Default” as a label doesn’t convey any context to the customer.Ice.com uses some interesting sort tools including Random and Most Viewed. Consider whether these are helpful to customers beyond the staple sort options.

Fortunately, it’s easy to validate which sort tools are most effective without A/B testing – use your Web analytics to understand which are the most popular ways to sort results. In fact, doing this at a category and customer-segment level can provide very useful insights you can apply to site-wide merchandising, personalization and even email campaigns.

In general, it’s a good idea to be consistent with sort tools across categories (though filters and facets can be more category-specific). However, specific categories may warrant their own sort tools. KL Wines sells only wine, but an online shop that sells wine and wine accessories could bake sort-by-vintage into only the appropriate categories.

Filtered Navigation Usability

Organizing filter menus

Ensure the basic, useful filter options are available. Columbia Sportswear shows useful filters such as shop to stay warm, dry, or cool and shop by activity, but is missing useful filters such as color, price and size.

Notice how Columbia chunks its menus, visually separating them from each other, and allowing multiple selection on faceted options.

When working with menus with more than eight links, consider alphabetizing your links, or chunking them into tighter groups that are easier to scan. For example, Evo could chunk the following categories into Ski Equipment, Accessories and Apparel groups.

Menu behavior

Use visual nesting: expand and collapse

When presenting a longer list of filters and facets, expand and collapse is useful. Depending on your understanding of what’s important to customers category-by-category, and the length of each category’s menu, you can choose to either present all filter options in collapsed mode or expand one or more sections by default.

JTV presents a long list of collapsed facets. With long menus, it’s important that options are presented in an intuitive order, ranked by relative usefulness, popularity (frequency of selection) or alphabetization.

The downside to this is commonly used filters require additional interaction and thinking, which is why it’s a great idea to select and expand the important attribute categories.

REI chooses to expand sub-category filters, and collapse facet refinements.

Showing one expanded section also visually demonstrates how the menu works.

Truncated menus

Expand and collapse is preferred over using inline scrolling panes.

User testing research by Baymard Institute identifies?5 critical interaction issues with inline scroll boxes :

Lack of overview. Users can’t see all options at once, and essentially must memorize options that scroll out of view.

Scroll hijacking. On some devices, such as mobile devices or desktops with scroll wheels enabled, interacting with scrolling elements can activate uncontrollable scrolling, or scrolling of the whole page.

Invisible content and scrollbars. Currently, iOS, Android, and Mac OSX trackpads hide non-active scrollbars by default, making it impossible for these users to identify your inline scroll areas at all.

Overly sensitive scrollbars. Many users click and drag the scrollbar instead of using a scrollwheel. When the scroll area is small, users may unwittingly jump past filter options if the scrollbar is too sensitive, and scrolls too fast.

Accidental activation of scroll areas. Clicking anywhere inside the scroll area can accidentally apply filters the customer didn’t intend to.

Other sites opt to handle long lists of filter options by truncating them with “More” links. Again, users can’t see all options at a glance, and handling the menu requires additional clicking or tapping.

However, in Baymard’s user tests,?truncation outperformed displaying all filter values , expanded (which pushes additional filter options further down the page and out of view).

Baymard recommends showing at least six filter values before truncating, and truncating lists with greater than ten options. Styling More links with different colors and ellipses makes them stand out, and increase interaction. If they’re too subtle, menu-scanners may conclude that what they see is all they get.

Consider placing +/- to the right of your menu

Menu styling matters. Placing expand/collapse icons (+/-) to the left of links may appear as bullet markers rather than interactive controls. Right-hand placement is the better approach.

AlliedElectronics’ leftie expand/collapse icons are not easily recognized as “collapse” tools. (They’re also tiny and are not clearly minus signs).

Nasty Gal’s menu uses bullets to indicate sub-categories, which defeats the purpose of indentation (visual clutter).

Use Responsive Filter Menus

It’s best to only show the subcategory filters that are relevant to the last-selected category. For example, J Crew’s jewelry category left-hand menu maintains the full list of top-level categories.

Subcategories like bracelets, earrings and rings are presented only after (and if) the customer selects “View All Jewelry” at the bottom of the first page. After the jump, sub-categories are subtly presented horizontally above the grid, which may not be noticed by customers.

Anthropologie shows clear breadcrumbs across the top, removes all other top-level category links from the sidebar, and clearly differentiates facet menus with clear expand and collapse controls. Easy to scan, easy to use.

Allow multiple selections without page load

Many sites only support applying one filter at a time, refreshing the page after each selection. Avoid this if you can.

Bebe’s filter configurator includes clear cancel, apply and reset tools.

Provide visual feedback that filter has been applied

When a filter has been applied, make it clear. If you’re using scrolling panes (which of course, you shouldn’t) or truncated lists, promote any selected items to the top of their respective menus.

Show number of results in brackets

Filters and facets are often removed because they return too few useful results, and the more facets that are selected, the tighter the set returned.

Including the number of products behind each filter and facet helps customers anticipate how many results each option will return. These counts should update as facets are selected (for example, after color is selected, other facets like brand should adjust their numbers.

Optimizing sort and filter tools can pay dividends, especially on a category-by-category basis. While this chapter focuses on desktop, a future chapter of Ecommerce Illustrated will go deep into best practice for mobile devices.

This article was originally published on EcommerceIllustrated. To find more in this series on LinkedIn, follow #ecomillustrated.