Choose patterns by need
Place decision facts beside the choice. Sizing suits apparel; tables suit technical differences; a simple gift-card page needs neither.
Product selection, images and information
Provide facts about fit, use, price and limitations before purchase.
Observe the task
Ask shoppers to explain their variant choice and fit. Later measure confirmed purchases per eligible product visitor, with return reasons as follow-up.
Concepts and examples
Product images, thumbnails and zoom ↗
Thumbnails show what additional images contain. Make them accessible on mobile too so shoppers can discover the other views.
Colors, sizes and variant selection ↗
Visible size buttons make available and sold-out sizes easier to discover than a closed dropdown.
Stock, sold-out items and backorders ↗
Temporarily unavailable products need a path forward. Backorders can help when the business can actually deliver later and explains expectations.
Size guides and measurements beside selection ↗
A size label alone gives little basis for judging fit. Provide relevant measurements and explain how to take them.
Unit and pack prices in product lists ↗
When pack sizes differ, show both the total price and a comparable unit price.
Product comparison for technical purchases ↗
A specification table can help technical purchases. Use visible selection controls and a clear summary of selected products.
Product information in visible sections ↗
Core information should be visible or in clearly labeled vertical sections. Avoid hiding important details in horizontal tabs.
Product descriptions: uses and limitations ↗
Organize information around the questions shoppers need to answer. Specific facts help more than long, generic promises.
Returns and policies beside product selection ↗
Provide a short, understandable route to return and delivery policies while the shopper evaluates the product.
Product ratings: counts and data sources ↗
When genuine ratings exist, show both average and count. No reviews means unknown experience, not a zero-star score.
Variant images follow the selected color ↗
The main image and variant name should reflect the same selection. A color change must not leave the old image visible.
Color and size names as text, not just symbols ↗
Provide readable color and size names. A swatch supplements the text rather than replacing it.
Unavailable sizes: explain status and alternatives ↗
Keep unavailable sizes visible and explain why they cannot be selected. Backorders need separate wording.
Product images that explain size and scale ↗
Supplement images with dimensions and a known reference when size affects choice. An attractive crop does not establish scale.
Mobile image zoom with clear closing and focus ↗
Let shoppers inspect a larger image without losing selection. Provide visible closing controls and keyboard access.
From-prices and variant price ranges ↗
Explain from-prices and update to the selected variant price. Do not present an irrelevant cheap variant as the purchase price.
Product video supplements facts and images ↗
Use video to show movement or use. Essential information must also exist as text and still images.
Specifications with units and unknown values ↗
Show numbers with units and explain unknown information. Zero is not the same as missing data.
Comparison: show differences while retaining price ↗
Let shoppers hide identical attributes while keeping product names, prices and unknown-value explanations.
Sticky mobile purchase controls retain variant and price ↗
A sticky purchase control must share product-selection state without covering information or focus.
Check this too
Wrong sizes, unknown details shown as facts, mismatched expectations and product-related support/returns.
Create a concrete measurement plan ↗