Category search and filter are the toughest ecommerce features to design and implement well for mobile.
They’re also arguably the most helpful. Smartphone viewports weren’t designed with ecommerce catalogs in mind. Faced with multiple pages of category or search results, usable filter and sort tools are an online shopper’s best friend.
What are the the smart ways to design sort and filter for smartphones?
Sort and filter placement and styling
Keep ‘em separated
Sort and filter are two separate utilities. Resist the temptation to combine them to save space.
Harrod’s sort feature is hidden behind filter, and it’s not obvious. Shoppers may confuse grid toggle (top left) for sort feature, or assume Harrod’s doesn’t have one (an important feature for a retailer selling luxury goods, where sort by price is desired).
Bluefly is another example.
Fathead’s combined sort and filter are at least labeled as such, and the configuration box fairly straightforward. However, for customers that only want to take one action, such as sort by price, presenting what appears to be a stepped process be confusing.
Place sort and filter proximal to list results
Sort and filter call-to-action should also appear as close to list results as possible. Fathead’s promo graphic (above) visually cuts the “white space” and interrupts eye flow. Some shoppers won’t make the connection.
Similarly, Under Armour’s filter and sort live above a hero header. By the time product results appear, filter and sort have slipped out of view and out of context.
Use intuitive icons
Be careful with creative icons, like OfficeDepot’s funnel icon (below, left) which it recently replaced with a text-labeled button (right).
Even with labels, online shoppers don’t necessarily understand what sort and filter mean. Backcountry provides visual context with icons combined with clear labels.
Pin or float filter and sort
“Pinned” and “floating” elements remain visible as the user scrolls – the former sticks to the top or bottom of a screen, the latter hovers somewhere in the middle.
Art.com’s floating filter can be accessed any time, revealing a left-hand slide-out menu.
Crutchfield pins both filter and sort to the top of results.
Ensure your pinned elements are not too thick, as in landscape mode they can crop the visible window considerably.
Consider testing tooltips
Filters are an important guided selling tool for Blue Nile. The tooltip draws attention to the feature, which may positively affect conversion rate.
However, the element is also interruptive and requires the customer to close the tip. It’s likely that many will tap View Filters to close the tip, without intention to use the filters, and unexpectedly launch the filter UI.
Sort and filter usability
Avoid using native UI
Many mobile commerce sites use a device’s native UI, which is not always a good experience. For example, iOS’ current menu behaves like the Price Is Right’s showcase showdown wheel, difficult to control and fading all but one menu item from view. The menu also takes over most of a smartphone’s viewport.
Dropdowns should be avoided on mobile whenever possible, especially when they only contain one or two options!
Contrast this with 1-800-Mattress’ simple sort drop-down.
Expand and collapse is a better way to handle filters than native UI. Kate Spade’s menus are clean and menu options are fat-finger friendly.
1-800-Contacts’ expand and collapse menu makes it easy to view longer menus at a glance, and are far more easy to control than drop-downs.
Optimize long lists
LampsPlus has a large number of Finish facets, and makes efficient use of space with a 2-column design and alphabetized list items.
Support multiple selections without page refresh
Filter and sort tools should not reload or disappear after the first selection is made (though many frustrate mobile users by behaving this way).
Allowing the customer to scan all items at a glance and easily make a selection trumps dropdowns. Remember, with the sort tool, only one selection is required, you don’t need to support multiple selections.
It’s important that Cancel and Apply buttons are styled appropriately with this approach, as results will not be refined until the customer takes action indicating they’re done filtering. Bebe’s gray Cancel and golden Apply buttons are well done, though the Reset button (can you spot it?) could be placed closer to these controls for clarity.
Show number of products behind each option
Showing the number of results behind each filter is helpful, especially when multiple selections are applied (counts should dynamically update as filters are applied).
This prevents the dreaded “no matches found” experience that can happen when multiple filters are applied.
Though Abercrombie supports removing filters to broaden scope, it’s unclear which filter is the one that is causing the failure.
Disable unavailable options
Pandora grays out options that are unavailable given a certain selection. For example, Pandora doesn’t sell glass charms. When charms are selected, the glass option deactivates itself.
Consider sliders where appropriate
Blue Nile uses a combination of buttons and sliders, depending on which best applies to each facet type.
Sliders are preferred to pre-defined ranges when a custom range better serves the customer.
Provide visual feedback
LampsPlus makes it easy to remove selections before applying filters to results.
Backcountry displays breadcrumb-like, easy-to-remove filters from product results.
Optimizing sort and filter on mobile devices can help boost conversion rates by helping customers more effectively hone in on the products they want. Make sure they’re styled as prominent calls to action, are easy to configure, and easy to adjust / remove after they’re applied.
Need help with your mobile commerce design or testing strategy? Drop me a line.
Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.