Key Takeaways
- When users can’t identify size options in the size filter they try to interpret the sizes on their own
- Many Apparel sites fail to identify size filter options, causing users to misinterpret them or even to skip size filtering entirely
- Separating size filter options by clearly grouped size types and providing a clear header allows users to quickly find the size options they want to select
In Baymard’s large-scale UX testing of Product Lists & Filtering and Apparel sites, allowing users to narrow the product list to only their sizes before they began browsing was observed to directly enable them to find suitable items in their size.
During testing, some sites offered not just 1 but several different sizing categories (e.g., “Juniors”, “Regular”, or “Plus”, etc.) and additional size options (e.g., “S, M, L”, etc.; “Waist”; “Length”, etc.) for a given product type.
Indeed, some apparel item types, such as jeans, often require a variety of size options.
However, if the display of size filter options makes it difficult for users to understand what the sizing options actually are, some will forgo size filtering entirely — leading to more difficulty finding the right product — or even leave the site.
This article will discuss our latest Premium research findings on how to display size filter options for Apparel product listings:
-
Why users have difficulty identifying the different size options in size filters
-
How organizing the size filter options helps users quickly select their size
-
7 examples of sizing typically found at apparel sites
-
How translating size categories allows users to see their preferred size in relation to the default size
It’s Unclear What Sizes the Filter Options Represent
Users browsing apparel products want to quickly select their size in the “Size” filter so that they can focus on items in their size in the product listings.
However, when “Size” filter options make it difficult to identify what size types or additional size options the size selectors refer to, they place an undue burden on users, who are forced to figure this out on their own, often causing them to misinterpret, overlook, or even doubt the size filter options.
For example, during testing, participants faced with “Size” filter interfaces with a jumble of numeric options tried to interpret the sizes on their own, mentally sorting the size-selector values into sizing groups that they recognized.
Several of these participants were unable to interpret the numeric sizes or else misinterpreted them and therefore picked the wrong size.
Moreover, even when they correctly identified their size in the “Size” filter, the presence of unfamiliar size options made participants doubt their size selection.
In fact, some participants felt compelled to understand all of the size options offered in “Size” filters with several size types, even when they could identify their own size; without this sense of mastery over the “Size” filter their confidence to proceed with size selection was eroded.
Consequently, as observed during testing, some users who see their size will nonetheless abstain from filtering by size if they cannot understand all of the size options.
For others who correctly select their size, the presence of additional size options that they can’t identify will nevertheless introduce anxiety to their “Size” filtering process.
In short, the challenges participants during testing faced when considering jumbled size filter options would be as if a physical store selling jeans tossed jeans of various sizes on a table, and forced shoppers to rummage through to find their size.
Clearly Group and Label Size Filter Options
Therefore, in order to ensure that users don’t misinterpret or doubt “Size” filter options while interacting with “Size” filter interfaces, separate and group “Size” filter options by size types — for example, “Waist” sizes should be grouped together, “Inseam” sizes should be grouped together, “Juniors” sizes should be grouped, and so on.
In addition to grouping related “Size” filter options together, it’s key to also provide a clear header — this lets users know, for example, that the numeric “Size” filter options they see are for “Waist” size or “Inseam”.
Providing headers aids users’ ability to quickly scan the “Size” filter types in order to find the options they want to select.
7 Examples of Apparel Sizing
Depending on the apparel item, there can be a variety of size options included in the “Size” filter; below, we’ll provide examples of common US and European apparel sizes that have been appropriately grouped and labeled.
1) Alphabetic Sizes
Alphabetic sizes (XXS, XS, S, M, L, XL, XXL, etc.) are common for both men’s and women’s apparel product types such as pajamas, tops, sweaters, and coats.
2) Men’s and Women’s Size Types
Size types relate to the demographic the apparel is designed for, and are often expressed as a qualifier added to “Regular” sizes: for example, “Tall” + “XL”, “Petite” + “4”, etc.
Additionally, men’s and women’s size types differ considerably:
-
Men’s Size Types: Regular, Husky, Tall, Big & Tall
-
Women’s Size Types: Regular, Juniors, Petite, Tall, Plus Sizes, Maternity
3) Women’s Regular Numeric Sizes
Numeric sizes (0, 2, 4, 6, 8, 10, 12, 14, 16, 18…22) are mainly employed for women’s apparel and are often used interchangeably with alpha sizes.
4) Women’s Juniors Numeric Sizes
“Juniors” (0, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21) is another size type for women’s apparel.
It can be confused with women’s “Regular” numeric sizes, as both use numerals for the size, with the difference being that women’s “Regular” numeric sizes use odd numbers (with the exception of 0).
5) Women’s Regular Waist and Inseam/Length
Women’s jeans typically use “Inseam” body measurements, which refer to the measurement from the crotch to the pant hem.
-
Waist: 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, etc.
-
Inseam: 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, etc.
6) Men’s Regular Waist and Length
Men’s jeans (and sometimes pants) typically use “Length” measurements.
For jeans, “Length” refers to the measurement from the waistband to the hem.
-
Waist: 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 38…60
-
Length: 29, 30, 31, 32, 33, 34, 36, 38, 40
7) European Sizes
European sizing (much like US sizing) is a complicated topic.
In Europe, both alpha and numeric sizes are commonly used for both men’s and women’s apparel; however, these do not correspond to similar US sizing.
Moreover, each European country often also has its own country-specific sizing.
Below are some common sizes often observed on European sites.
-
Women’s and Men’s Conventional or Alpha Sizes: XXS, XS, S, M, L, XL, XXL
-
Women’s European Numeric Sizes: 34, 36, 38, 40, 42…50
-
Men’s European Numeric Sizes: 46, 48, 50, 52, 54…66
Consider Translating Size Categories
Finally, given that alpha sizes and women’s “Regular” numeric sizes are commonly used for the same wide range of apparel items, consider translating these 2 size categories in “Size” filters that only show 1 of them.
In this way, users more familiar with, for example, alpha than “Regular” numeric sizes (or vice versa) will be able to easily see how their preferred size translates in relation to the main size shown.
Help Users Rapidly Find Their Size in the Size Filter
As our research has shown, narrowing down e-commerce product lists can be a trying task for users.
By clearly grouping and labeling size filter options, sites can ensure that users shopping for apparel products can quickly find their size and feel confident that they’ve selected the right size in the size filter.
Yet many sites don’t enable users to easily identify sizes in the size filter — forcing some to abandon the size-selection process if they’re unsure about the site’s sizing.
Getting access: our current Apparel 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 desktop site, mobile site, or app performs and compares, then learn more about getting Baymard to conduct an Apparel UX Audit of your site or app.