Size is one of the most common variations for users to select before purchasing a wide variety of different product types, from apparel to beauty to hardware; all of the sites in our UX benchmark of the top-60 e-commerce sites have different size options for at least some of their products.
During our large-scale UX testing, we observed that, when presented as a drop-down menu, users during testing were prone to overlook the size selector entirely.
Additionally, when they did activate the menu, they were often surprised or disappointed by the sizes available.
Despite the issues demonstrated by drop-down size selectors, 28% of desktop benchmark sites that sell many products with size variations continue to use them.
In practice, some users who overlook the size selector risk triggering an avoidable error message.
Other users must check to see if their size is available for each variation under consideration — a potentially tedious task that often leads to users simply giving up.
In this article we’ll discuss the test findings from our mobile and desktop UX research related to the display of size selectors on product pages. In particular, we’ll cover:
When size options are located within a drop-down menu, they are essentially hidden by default until users interact with them.
During Baymard’s large-scale usability testing across desktop and mobile, we repeatedly observed users spending considerable time and effort exploring a product, only to be disappointed when they opened the size drop-down selector to discover it was out of stock in their preferred size — and that their time had been wasted.
In effect, users are less able to find, review, and understand their choices, increasing the likelihood of wasted effort and error.
What’s more, while the majority of users during both desktop and mobile testing eventually found size variations when presented within a drop-down menu, a significant subgroup overlooked the size drop-down menu altogether — even when placed near or within the “Buy” section, where it should have been easily visible.
In most cases, these users will trigger an avoidable error message, which presents a speed bump in their buying process. After receiving the error message, they typically then notice the size drop-down and make a selection, recovering relatively quickly.
However, some sites have a default preselected size for products — for example, a 39 x 27 inch poster size selected by default — which enables users to add a product to the cart without reviewing and selecting the size option at all on the product page.
While some users may catch themselves before they complete the purchase, there’s a risk that some won’t notice this fact — completing checkout and purchasing a product that was not in their preferred size.
Naturally, this experience can have long-lasting effects, and result in users negatively perceiving a site for some time to come, if not permanently.
(Of course, in practice, this kind of purchasing mistake is more likely for product types where users aren’t necessarily aware of or thinking about sizes when they arrive on the product page — for example, users may not immediately realize that different sizes are available for products like posters or backpacks, but are generally aware they will have to select a size for products like footwear and apparel.)
On mobile, this increased need for interaction becomes even more tedious, especially when products come in multiple color or style variations in addition to multiple sizes.
Due to the size of the mobile viewport, product information is squeezed into a narrower and longer-scrolling format, forcing users to scroll back-and-forth between the color selector and size selector in order to determine the availability of each combination.
Meanwhile, on desktop, the more expansive viewport typically allows even abundant color, size, and other variations to be visible within a single screen, making the process for selecting a combination of product options less labor intensive.
When there are more than a handful of color variations, some users are likely to give up on finding their preferred color and size combination, deeming it too time-consuming.
Instead of using a drop-down with the size options hidden by default, exposing the size options by using button-like selectors helps to ensure that these crucial product variations are easily seen by users.
With each button representing a size, users are better able to see at a glance all of the available options, and the amount of effort and interaction required to learn this basic information is greatly diminished.
As one user noted, “I think the least amount of clicks I have to do, the better”.
Of course, once exposed, the selectors should be designed so that it’s clear which size is currently selected.
During testing, we observed some designs were much too subtle in indicating which size had been selected.
Selectors that are too inconspicuous, and selection indications that are too subdued, will slow users down, as they have to first determine if the system has recognized their input before they can move on to adding it to their cart.
Additionally, on mobile, size buttons that are not adequately sized and spaced can also lead to frustrating hit area issues, making it more difficult for users to accurately target the correct size. As with other mobile elements, ensuring size selectors are appropriately designed for touch interaction is vital.
Products that come in a wide variety of sizes present a special challenge when providing individual buttons for each size variation, as they can easily take up a large proportion of the viewport — especially on mobile.
On desktop, the more expansive screen real estate can typically accommodate a large array of size selectors, assuming they’re not overly large.
When there are a wide variety of size options, consider grouping and nesting sizes by type (e.g., “Regular” versus “Plus” sizes, “Standard” versus “Long” inseam), which allows individual sizes within each type to be available directly on the page without the need to activate and scroll through a drop-down.
This implementation is particularly vital to limit the amount of scrolling on narrow mobile screens.
Note however that a “nested size selectors” design was not tested, and thus sites should proceed cautiously if implementing.
Additionally, a horizontal swipeable list can be used on mobile to further reduce the screen real estate taken up by the size selector, taking advantage of users’ familiarity with this design pattern for other mobile features.
For products that come in different sizes, previewing which ones are in stock is an essential prerequisite for making the decision to purchase.
Without the clarity of modern “button” size selectors, users may overlook their ideal color and size combination, abandoning their purchase without realizing the possibilities hidden within variations drop-downs.
On the other hand, the effortless information provided by size “buttons” presents a clear usability improvement over presenting size options within drop-down menus — which helps to account for size “buttons’” increasing popularity: 71% of current desktop benchmark sites appropriately use size “buttons”, up from 63% in 2017.
It’s therefore crucial to meet users’ expectations with regards to how size selectors will be presented on the product page — or risk users leaving, despite there being a perfect size available in the variation they desire.
(Tip: see 239 examples of product pages showing how many of our benchmark sites use size “buttons”.)
This article presents the research findings from just 1 of the 850+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” product page user experience.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 firstname.lastname@example.org