Optimizing Category Sort and Filter on Mobile Devices

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).

dont-combine-sort

Bluefly is another example.

bluefly-hidden-sort

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.

fathead-filter

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.

Underarmour-sort-filter

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).

Office-depot-filter-icons

Even with labels, online shoppers don’t necessarily understand what sort and filter mean. Backcountry provides visual context with icons combined with clear labels.

backcountry-sort-filter-icons

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.

art-com-pinned-filter

Crutchfield pins both filter and sort to the top of results.

crutchfield-pinned-filter-sort

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.

bluenile-filter-tooltip

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.

klwines-sort-by

Dropdowns should be avoided on mobile whenever possible, especially when they only contain one or two options!

dropdown-folly

Contrast this with 1-800-Mattress’ simple sort drop-down.

1800mattress-dropdown

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.

Kate-spade-expand-collapse

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.

1800contacts-expand-collapse

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.

lampsplus-filter alpha

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.

bebe-multi-filter-select

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).

keurig-filter

This prevents the dreaded “no matches found” experience that can happen when multiple filters are applied.

no-filter-matches-found

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.

pandora-gray-out

Consider sliders where appropriate

Blue Nile uses a combination of buttons and sliders, depending on which best applies to each facet type.

bluenile-custom-filters

bluenile-sliders

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.

lampsplus-filter

Backcountry displays breadcrumb-like, easy-to-remove filters from product results.

Backcountry-color-filter

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.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *