Sizing on a Product Page

Always Persist a Selected, Available Size Across Colour Variations

Issue
When users select a size and then switch to a different color of the same product, many sites reset the size selection, even when the size is still available in the new color. This forces users to reselect the same size repeatedly, adding unnecessary steps and increasing the risk of errors (e.g., forgetting to reselect the size before attempting to add to cart).

Caption

Advice
Once a user has selected a size that’s available in multiple colors:

• Persist the size selection across colour changes whenever the size remains available.

• Only clear the selection if the size is unavailable in the new color—and clearly indicate why.

Use messaging like “Size M no longer available in Blue” if deselection is necessary.

Core UX Issue: Repetitive Interaction Breaks Flow
Resetting the size selection breaks the user’s workflow, especially for shoppers who want to explore colour options after identifying their size. When users must repeat steps, it increases friction and introduces errors, especially on mobile.

“I was just trying to see what it looked like in another colour, but now it’s making me pick my size again, I already did that!”  Test Participant #16

Implementation Guidance

• Track the user’s size selection in session state.

• When the colour changes, check availability of the selected size.

• Automatically re-apply the size if available, or notify the user if not.

• Avoid silent deselection—this often leads to confusion at checkout.

Example
Lululemon maintains size selections when users browse other colours, making it easier to compare options without reselecting the same configuration.

Core UX Solution
Respect the user’s prior input. Persisting a selected size across colours streamlines the browsing process and helps users reach a confident decision more efficiently.

Once a Size or Colour Has Been Selected, Always Indicate Unavailable Variations

Issue

When users select a size or colour for a product, it’s often unclear which other variations (e.g., colour/size combinations) are no longer available. This forces users to manually test each option or click into unavailable variants, increasing frustration and abandonment risk.

During testing, users frequently misinterpreted what was in stock, especially when a previously selected size did not update available colours, or vice versa. In some cases, unavailable options weren’t clearly marked, or worse, still appeared selectable, leading to error messages only after an “Add to Cart” attempt.

Caption

Caption

Advice
Always reflect selection logic in real-time. When a size or color is selected:

• Dynamically update and visually disable any unavailable combinations.

• Use clear visual cues (e.g., greying out, cross-outs, tooltips with “Not available in selected size”).

• Never allow users to select or add-to-cart an unavailable combination.

Core UX Issue: Avoiding Selection Dead Ends
Failing to indicate unavailability upfront leads users into dead ends, wasting time on trial-and-error selection and leading to unnecessary error messages. This breaks trust and reduces perceived reliability of the site.

“I clicked the colour, and it looked like I could get it in Medium, but after clicking Add to Cart it just told me it’s unavailable—that’s annoying.” — Test Participant #4

Implementation Guidance

• Use two-way synchronisation between variation selectors.

• A colour choice should update available sizes and vice versa.

• Apply real-time validation to keep the interface responsive. Provide a clear reason when something isn’t available (e.g., “Out of stock in selected size”).

Example

Core UX Solution
Dynamically indicate availability constraints based on user selections and prevent invalid combinations from being chosen. This helps users navigate products more efficiently and builds confidence in the purchase process.

Display Clear, Non-Intrusive Error Messages Near the Size Selector When No Size is Chosen

Issue

• Error messages outside the user's field of focus are easily missed, making issues harder to resolve.

• When error messages lack visual contrast, they blend into the page and frequently go unnoticed.
  

On the REI website error messages are located outside the user’s field of focus causing confusion. 

Advice

• Ensure error messages are displayed inside the user’s field of focus, directly adjacent to the size selector component.

• Use high-contrast styling such as red text on a white background with bold borders to ensure they're noticeable without being visually disruptive.

Research Findings

On e-commerce platforms, selecting a size is often a required step before adding a product to the cart. Yet, usability testing has shown that many users encounter avoidable friction when this step is overlooked. This is not because users are unwilling to comply, but because they are unaware they’ve missed it. When users attempt to proceed without selecting a size and are not immediately shown a clear and proximate error message, confusion arises. This miscommunication results in disrupted shopping sessions, repeated failed attempts, and ultimately, lost sales. This guideline outlines how strategically positioned and clearly styled inline error messages can significantly improve the user experience.

Core UX Issue: Unclear or Poorly Positioned Error Messages Obstruct the Path to Purchase

Usability testing identified many instances where users attempted to add items to their cart without selecting a size and missed the related error message.

 Okay, that was weird, I don't know why it didn't add before. - Test Participant 8

The font used in the error message on Columbia’s website is very small, it blends in with other red text items on the page and can be easily missed.

Hmm, It's not letting me add eight and a half. (scrolls up & down page).It looks like the site, it's having some issues. So I'm just going to refresh the site and help it. - Test Participant #3

On the Hush Puppies website error messages were often overlooked due small font and insufficient visual prominence.

The placement of error messages is a key usability issue. During usability testing, multiple error messages were located far outside the users’ field of focus or  featured low-contrast messages that were overlooked. Without visually prominent, and appropriately placed feedback, users are left guessing why they can’t proceed.

Core UX Solution: Display Inline, High-Visibility Error Messages Adjacent to the Size Selector

To address this issue, error messages should be displayed inline and positioned directly adjacent to the size selector component. Nike is a strong example of successful implementation, error messages are shown both above and below the size selector, framed in a red box with high-contrast text. During testing, this approach was immediately understood by users, who quickly corrected their action and continued with checkout.

Caption

Testing consistently showed that individual size “buttons”—such as clearly defined, clickable boxes labeled with sizes, outperform dropdowns and generic lists. Participants reported they could more easily assess which sizes were available or out of stock, and interaction was more fluid.

Caption