If Providing Sidebar Filtering, Position the “Size” Filter near the Top and Expand It by Default

Key Takeaways

  • When users don’t open the “Size” filter in the product list, they can waste time needlessly evaluating items that turn out to be out of stock
  • 39% of participants discovered on product pages that their choice items were not available in their size — forcing them to start a new search
  • For apparel products, placing the “Size” filter at or near the top of the filtering sidebar and opening it by default can significantly prompt users — 90% in testing — to first filter by size before browsing

In Baymard’s large-scale UX testing of Apparel & Accessories, size availability was shown to be a crucial factor in determining whether users purchase an item or not — if a clothing item doesn’t fit, users will likely not purchase it.

Indeed, as observed during testing, 39% of participants, after spending undue time and effort exploring products in the product list, found out on the product page that their size was in fact not available for their product of choice — forcing them to start their search over again.

By optimizing the placement and presentation of the size filter in the filtering sidebar, sites can significantly encourage users to first filter by size before browsing — mitigating the issue of users exploring products that aren’t available in their size.

However, testing showed that few sites helped users take action to select their size — thereby causing these participants to waste undue time and effort that would have been better spent finding alternative clothing items available in their size.​‌‌‌‍‌‌‌‌‌‌‌‌‌‍‌‌‌‌‌‌‌‌‌‍‌‌‌‌‍‌‌‌‌‌‌‌‎

This article will discuss our latest Premium research findings on how to display the size filter in the filtering sidebar for Apparel & Accessories products:

  • How users risk wasting time on products that aren’t available in their size

  • How placing the size filter near the top and expanding it encourages users to filter by size

  • Why presenting size filter buttons as a grid ensures their maximum visibility

How Users Risk Wasting Time on Products That Aren’t Available in Their Size

As observed during testing, despite the fact that “Size” is a critical product attribute for apparel, most participants didn’t filter by size, eager to get to the more exciting task of browsing and evaluating clothing items instead.

However, this leads to issues when users find a product they like in the product list and proceed to explore it in more detail on the product details page — only to discover that their top choice is out of stock in their size.

As a result, users have to abandon their favorite item and start their search anew.

​​Indeed, testing revealed that many users, once they arrive at product pages, will first linger on product images, reviews, and other product information in detail, only checking for size availability as a final step.

This waste of time and effort was compounded for participants whose modus operandi was to open several tabs at once in order to cross-compare the product pages of promising items with the goal of finding their favorite one.

In fact, it was not uncommon for participants to spend upwards of 15 minutes closely comparing clothing items in this manner only to discover that some of their selected items were not even available in their size.

Users are therefore forced to spend a longer time finding items of their choice when they needlessly evaluate items that don’t even fit them.

Furthermore, being forced to let go of items they had their heart set on also caused participants considerable frustration — as one participant vented when her anticipation about getting a pair of jeans was dashed, “I hate when that happens! When I see something I really like, and there’s none left in my size”.

As observed during testing, participant frustration was cumulative, with sizing issues the major source of such friction.

At their tipping point, such repeated incidents of frustration resulted in site abandonment — with the time and effort wasted evaluating items that are not available in their size causing users to lose faith in the site itself.

Here in Francesca’s “Tops” category the “Size” filter option was not visible within the viewport because it was pushed down by the “Color” filter.

During testing, some sites attempted to make “Size” filters more visible by expanding them by default in the filtering sidebar — but they were pushed far down below the viewport.

In theory a “Size” filter that is in the second, third, or even fourth or fifth position in the filter list could feasibly be visible within the viewport.

However, if the other filter options positioned above it have a fluctuating number of associated filter values — for example, a “Color” filter will often show more colors for “Dresses” than for “Jeans” — in practice this means that the “Size” filter can be pushed further down the viewport.

“Size” filters that aren’t among the first options in the filter list therefore can’t always be counted on to remain visible above the fold.

How Placing the Size Filter near the Top and Expanding It Encourages Users to Filter by Size

”I would filter it by ‘Size’. I love that they have the ‘Length’ available right away, without having to go to a different step!” This other participant’s first action before browsing at Levi’s was also to select her size in the filters. Participants consistently gravitated to size filters that were both visible by default as well as clearly visible in the viewport.

Therefore, to ensure that users in product lists don’t waste time exploring items not in their size, position the “Size” filter at or near the top of the sidebar and expand it by default.

This presentation prompted 90% of participants to first filter by size before they began browsing, on the one test site that did this (Levi’s).

In practice, promoting the “Size” filter allows users to easily discover it when they gather their bearings upon arrival on the product list, in order that they filter by their size.

Indeed, the sudden jump from selecting a navigation category to arriving on the product listing can be bewildering for users, who sometimes don’t necessarily know what they need, and sites can help by nudging them to take actions that will result in a better experience for the majority.

Choosing to expand the “Size” filter by default, and to place it near the top of the filter list in the sidebar, does mean that other filters are necessarily made less prominent.

However, our testing revealed that the “Size” filter is particular in that it’s key for users to apply it to avoid wasting time exploring products that aren’t available — yet the vast majority of users won’t seek to apply the “Size” filter before starting with product exploration.

On the other hand, participants keen to browse products by price, color, or subcategory, for example, were observed to generally start by applying the relevant filter in the product list.

Thus, if “Price”, “Color”, “Subcategory”, or other important filters are pushed down, users most interested in those product attributes are still likely to hunt for them in the filtering sidebar.

At Cole Haan, the “Category” filter only displays the current scope, allowing the “Size” filter maximum visibility even though it is the second filtering option.

Note that the “Size” filter doesn’t necessarily have to be the first filter type in the filtering sidebar.

In particular, “Size” can be placed beneath a “Category” filter type, as long as the space the “Category” filter takes still allows the “Size” filter to be immediately visible to users — for example, by only displaying the current scope or collapsing it by default.

Similarly, 1 or 2 other filter types can be placed above “Size” as long as they’re collapsed (e.g., see the “Pickup In-Store” type in the Levi’s example above).

Finally, site search should ensure users arrive at appropriate search results when they search for a specific category of apparel — for example, a search for “Jeans” should direct users to the “Jeans” category, where users will find appropriate contextual product filters such as “Size”.

Why Presenting Size Filter Buttons as a Grid Ensures Their Maximum Visibility

The “Size” filter at Levi’s maximizes the horizontal space of the filtering sidebar by presenting the “Size” buttons in a grid — as opposed to a drop-down, for example.

Although positioned at the top of the filtering sidebar and expanded, the “Size” filter at Land’s End is given slightly less prominence due to the vertical alignment of the “Size” selector buttons.

Finally, to ensure the maximum visibility of “Size” filters, consider using “Size” filter buttons and presenting them as a grid.

Because a grid of buttons takes up more visual space than vertically aligned buttons, it has more chance of attracting a user’s attention.

Moreover, the compact nature of a grid ensures that more sizes are visible at a glance within the viewport, thus increasing the odds that users spot their size when they arrive on the product list.

Help Apparel Users Filter for Their Size

This participant shopping for jeans at Nordstrom never opened the “Size” filter in the left sidebar when in the product list — ultimately discovering, after spending 8 minutes browsing for jeans, that her preferred pair was sold out in her size.

By placing the “Size” filter at or near the top of the sidebar and expanding it by default, sites can dramatically encourage users to first filter for their size, thus ensuring that items they explore are in stock.

However, many apparel and accessories sites don’t make their “Size” filter prominent in the sidebar — either collapsing the “Size” filter when it is at the top of the filter list, or burying it so that it is below the viewport.

This risks that users overlook this critical product attribute, increasing the likelihood of discovering on the product details page that a product they like is not available in their size.

Getting access: our current Apparel & Accessories research study is ongoing and new Apparel guidelines are published every month in Baymard Premium. The full study is expected to be completed in Fall 2024.

If you want to know how your apparel or accessories desktop site, mobile site, or app performs and compares, then learn more about getting Baymard to conduct an Apparel & Accessories UX Audit of your site or app.

Authored by Iva Olah on June 4, 2024

If you have any comments on this article you can leave them on LinkedIn

User Experience Research, Delivered Weekly

Join 37,000+ UX professionals and get a new UX article every week.

A screenshot of the UX article newsletter