Include Size Measurement Images for Every Product

Findings

Studies and testing from Baymard Institute have shown that users appreciate seeing the physical attributes of a product laid out in a clear, understandable manner. When dimensions are visually connected to specific parts of a product, shoppers feel more confident in their purchases. This leads to fewer returns, higher customer satisfaction, and a more user-friendly shopping experience that encourages repeat business.

Tips for desktop

Create a "cut out" style image with text overlay

Enhance product images by overlaying measurement lines and text directly on relevant parts. This approach eliminates ambiguity and helps shoppers easily understand dimensions.

• Direct labeling – Place measurements on the exact product parts they refer to.
• Clear connection – Ensure each dimension is visibly linked to the corresponding section (e.g., width, depth, height).
• Improved visualization – Helps shoppers quickly assess if the product fits their space.

On an Amazon product page for a treadmill, the "Dimensions" image is included in the main image gallery, clearly linking each measurement to its corresponding part of the treadmill.

Use the diagram approach for complex items

For complex measurements, simple labeled diagrams improve understanding, especially for unconventional shapes or unfamiliar terms. Users prioritize clarity over realism and accept various dimension formats if units are included.

• Use simple diagrams – Clearly labeled visuals help users understand measurements.
• Clarify unfamiliar terms – Terms like “apron” for table overhangs should be explicitly labeled.
• Prioritize clarity over realism – Users need measurements that directly connect to product features.
• Always include units of measure – Ensures consistency and reduces confusion in dimension interpretation

LuxuryLife effectively uses the Product Media element in PageFly to display dimension images through simple, labeled diagrams that prioritize clear measurements and show exactly what they’ve measured within each piece of the furniture

Add human scale references

Include silhouettes of people or common objects next to your products to provide instant scale understanding. This helps customers quickly gauge size without processing specific measurements.

Wayfair helps customers understand product size by showing them next to people. Their 'Dimensions' images also include 'In Scale' details to give a clearer sense of scale. Source: Baymard

Tips for mobile

Optimize text size for mobile viewing

Users can miss vital content when carousels auto-rotate because they may not have enough time to see and understand the information presented in each slide. Based on our research, you should use static hero images with clear call-to-action buttons for the best results on mobile instead of autoplay carousel.

• Create readable text size: Avoid small fonts that require zooming, ensuring clear readability.
• Embed text in images: As recommended, include text in "Dimensions" images but optimize its size for mobile viewing.

Archiology, a PageFly users, made sure all the details are easy to read on mobile, not too big or too tiny. It prevents frustration from users who would struggle to read tiny text or be overwhelmed by overly large text.

Ensure critical measurements are sufficiently prominent

To improve clarity and reduce cognitive load, especially on mobile devices, prioritize the most crucial measurements that influence purchasing decisions. Here are the key recommendations:

• Focus on key measurements: Highlight dimensions that impact purchase decisions.
• Reduce cognitive load: Show the most important details first, especially on mobile.
• Use simple terms: Avoid technical jargon.
• Offer more details on demand: Use expandable sections if needed.

IWISS Tools (a PageFly user) optimizes their mobile view by highlighting key details like weight and thickness on the product image, and they enable users to expand the image to see dimensions clearly

PageFly lets you enable a double-tap feature so customers can expand the product images on their mobile, making their shopping easier and preventing confusion about product details

結論

By implementing clear visual aids like “Dimensions” images, you can provide the clarity needed for customers to confidently make purchasing decisions. PageFly's features, like image expansion on double-tap and seamless integration of high-quality images and diagrams, make it simple to implement these dimension-clarifying strategies. The result? Enhanced user experience, reduced cart abandonment, and increased customer satisfaction - all critical factors in the competitive world of e-commerce.