Apparel E-Commerce: Visually Group and Clearly Label Size Filter Options

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

“And they also have their sizes in ‘Juniors’ or just…I don’t know…So let’s just go pick a random size so that we can check out the product listing.” A participant at Francesca’s was unclear about the mix of “Juniors” and “Waist” sizes in the “Size” filter, constrained to select a “random size” (“30”) instead so she could move ahead with browsing for jeans.

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.

“And I’ll do this size here. Their sizes can be a little confusing…I mean, I don’t know what ‘2XS’ is. I’ve never had to use that.” This participant at Nike trying to navigate the multitude of size options in the “Size” filter became stuck trying to figure out how to interpret some of the size tiles.

“I’m also going to click on size because I’ve been doing that. Oh, this is fun [he said sarcastically]! Lots of different types of sizes! I have to figure it out. I also have to figure out is ‘Waist’ first or is ‘Length’ first? I think ‘Waist’ is first, but…I have to interpret what this means, so this is not easier.” A participant was taken aback by the “Size” filter selectors at Express because he did not know which of the combined measurements referred to “Waist” and which to “Length”.

“They have the ‘Plus Bottoms’. ‘18S’, ‘18M’, ‘18L’. Hmm, what is the difference between that? How do I know if it’s not a ‘Small’ or ‘Large’? So I’m trying to figure out if there is a key or something to figure out what is a ‘Small’, ‘Medium’, and ‘Large’. OK, let’s see, well, I’m just going to put ‘18’.” This participant looking at the “Plus Bottoms” size options at Levi’s was unable to interpret the alpha value in the combined “Size” tiles — which referred to inseam measurements of “Small”, “Medium”, and “Long”.

“Sizing looks a little bit different for me…I would wear ‘27’ waists usually, or like a ‘28’. It gives me that option, but I’m also not sure what the ‘0’, ‘5’, ‘7’, ‘9’ is. My thought process right now is I’ll go through, look for a pair of jeans that I like and then from there see the sizing and see what sizes are offered”, reasoned this participant at Francesca’s who, despite having recognized her jeans “Waist” size, decided to skip size selection entirely because she was confused by the “Juniors” sizes (“0, 5, 7, 11, 13” at the beginning of the filter options and “1” & “3” at the end) also mixed in the “Size” filter interface.

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

A participant at Express shopping for tops was able to rapidly identify both her alpha and “Regular” numeric sizes in the “Size” filter.

The alphabetic and numeric size options for “Men’s Jackets & Coats” can be identified separately at Urban Outfitters.

“OK these come in long [lengths] and it’s so easy to find! So that is very exciting to me…this is awesome! Look how easy this is to find!” This participant, concerned about finding the right jeans length because she was tall, was delighted to find “Length” options in the “Size” filter at Levi’s.

“I feel like this is like the best in terms of filtering, just because it specifies what the “Waist” size is and what the “Length” size is”, praised another participant at Levi’s who was able to easily select his jeans size.

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

Alphabetic sizes are translated to “Regular” numeric sizes for leggings at Nike.

At Macy’s, “Regular” numeric sizes for “Women’s Casual Dresses” are translated to alphabetic sizes.

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

“They have a bunch of options, so I think I can narrow it down, so I could do a ‘29’ [‘Waist’] ‘29’ [‘Length’], something like that, or ‘29’ [‘Waist’] ‘30’ [‘Length’], see what they have ‘cause that’s my size.” Another participant at Levi’s easily selected his measurements from among the grouped and labeled options 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.

Authored by Iva Olah on March 26, 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