Ever tried buying a shirt online and got confused whether you selected blue in size M or size M in blue?
How Apps Solve It
Flipkart displays product variants as color swatches first, then shows available sizes only after you select a color—preventing users from selecting unavailable combinations. Myntra takes a different approach with a matrix view showing all size-color combinations upfront, with unavailable options grayed out. Amazon uses dropdown menus for each variant attribute, dynamically updating other dropdowns based on your selection. Ajio combines visual pills for sizes with circular color swatches, highlighting selected options with distinct borders and maintaining selection state even when users scroll.
The Design Pattern
This pattern is called Progressive Disclosure in Variant Selection. It's the practice of revealing product options in a logical sequence to prevent invalid selections and reduce cognitive load. When apps get this wrong, users end up selecting combinations that don't exist, face surprise out-of-stock messages at checkout, or worse—abandon their carts due to confusion about what they actually selected.
Why It Matters
Indian users often shop on smaller screens with intermittent connectivity, making clear variant selection crucial. Designers debate whether to show all options upfront (transparency) or guide users step-by-step (simplicity)—each approach impacts conversion rates differently based on product complexity.
Key Terms
- Variant Attributes: Properties like size, color, or storage that define product options
- Selection State: Visual feedback showing which variant combination is currently active
- Invalid Combinations: Variant selections that don't exist in inventory
- Progressive Disclosure: Revealing information gradually based on user choices
- Variant Matrix: Grid showing all possible combinations at once
Practice on ProMode
Compare how Flipkart's sequential selection differs from Myntra's matrix approach for clothing. Practice explaining the trade-offs on ProMode with AI voice calls.