How to Create a Size Filter That 90% of Users Will Engage With

Summary

This video highlights key findings from Bart's large-scale usability testing, focusing on the importance of size filters in enhancing the online shopping experience. It reveals that positioning the size filter near the top of the sidebar and expanding it by default increases user engagement and reduces frustration from browsing unavailable sizes. By encouraging users to filter by size early, the shopping journey is streamlined, with 90% of users selecting size filters first when they are clearly visible. The video offers actionable insights for improving filter interfaces, ultimately enhancing user satisfaction and conversion rates.

Takeaways

• 😀 Size availability is a crucial factor in determining whether users purchase an item or not.
• 😀 Placing the size filter near the top of the sidebar and expanding it by default improves the shopping experience.
• 😀 When the size filter is buried or collapsed, users often end up browsing items that aren't available in their size, leading to frustration.
• 😀 39% of users had to start their product search over after discovering that an item wasn't available in their size.
• 😀 To reduce frustration and increase conversions, the size filter should be visible by default and clearly displayed in the viewport.
• 😀 A visible and accessible size filter encourages users to filter by size early in their product browsing journey.
• 😀 The design of size filters, such as in a grid format, ensures more sizes are visible at a glance, making it easier for users to spot their size.
• 😀 Positioning the size filter at the top and expanding it by default increases user interaction with the filter.
• 😀 Presenting size filters in a grid format ensures compactness and better visibility, improving user experience.
• 😀 Optimizing your filtering interface can significantly reduce site abandonment and frustration, leading to a better overall user experience.

Q & A

Why is size filter visibility crucial in user experience testing?

Size filter visibility is crucial because users often waste time browsing products that are unavailable in their size, leading to frustration and, in some cases, site abandonment. Ensuring size filters are visible and easily accessible helps users make more efficient decisions.

What was the key finding from Bart's large scale usability testing regarding size filters?

The key finding was that when the size filter was buried or collapsed, users ended up browsing products that weren’t available in their size, leading to wasted time and frustration. This behavior significantly increased the chances of site abandonment.

What was the impact of users having to start their product search over during the test?

During testing, 39% of users had to restart their product search after realizing the item they were interested in wasn't available in their size, which led to a negative user experience and frustration.

What is the recommended placement for size filters on a website?

Size filters should be positioned near the top of the sidebar and expanded by default to ensure users can easily see and use them at the start of their browsing journey.

How did users behave when the size filter was clearly visible by default?

Users consistently gravitated toward size filters that were visible by default, taking action to select their size as the first step in their browsing process. This was evident in the example from Levis, where 90% of users selected the size filter first.

Why is presenting size filters as a grid beneficial for users?

Presenting size filters as a grid ensures that more sizes are visible at a glance, allowing users to spot their size quickly within the viewport, which improves the efficiency of their browsing experience.

What role does the viewport play in the placement of size filters?

The viewport plays a significant role because size filters should be clearly visible within it to increase the likelihood that users will notice and interact with them, facilitating a smoother browsing experience.

What was the user's reaction to the Levis example during testing?

In the Levis example, 90% of users immediately selected the size filter as their first action when browsing, demonstrating the effectiveness of making the size filter visible and accessible.

How can the design of size filters influence site abandonment rates?

If size filters are not easily accessible or visible, users may end up browsing products that don't fit their needs, leading to frustration and potentially abandoning the site altogether. Proper placement and visibility can reduce this risk.

What additional information is available for optimizing filtering interfaces?

In addition to the findings mentioned, there is more detailed information available, including over 80 product list and filtering guidelines in the research catalog at bart.com/research, offering further insights into optimizing filtering interfaces.