Have you bought anything online only to realize on delivery that it was much smaller (or larger) than you expected?

This is what today’s article about, courtesy of Baymard Institute.

Baymard Institue conducts original large-scale research studies on all aspects of the e-commerce user experience – from form fields to the entire mobile experience. The research results are published as articles, reports, and benchmark databases.

When users shop at brick and mortar stores, it’s easy for them to judge the scale of products they’re interested in. This immediate and intuitive grasp of a product’s physical size is easily lost when viewing images of a product on the web — in fact, it often requires active effort from the site to establish a sense of size and scale in its product images.

Baymard’s latest large-scale Product Page usability study revealed that users consistently seek out this information. The research study revealed that 42% of users will attempt to gauge the overall scale and size of a product from its product images.

When it’s difficult to judge scale from product images, users have to work needlessly hard to determine product sizes, and were repeatedly observed to instead simply draw inaccurate conclusions about the size of the depicted item. During testing, such misinterpretations of product sizes frequently led users to wrongly discard perfectly relevant products and even resulted in site abandonments.

Their Product Page UX benchmark shows that 28% of largest e-commerce sites do not provide any “In Scale” images among their product images, and that’s only looking at their best-selling products.

Users Try To Establish a Product’s Size from Its Images

The product images are among the most utilized product page content, and absolutely vital to online shopping. Product Page usability study showed that 56% of the test subjects’ first actions upon arriving at a new product page was to begin exploring the product images, before reading titles, descriptions, or scrolling down the page to get a more comprehensive overview.

In addition to the normal “Cut Out” product image type, one of the most important types are “In Scale” images.

❌ “I guess I’m not sure how big it is…if it was in context, it would be helpful,” a subject complained at Home Depot. Notice how the lack of an image that displays the product in context or next to other products will make it very difficult for users to easily get an impression of the product’s size.

✅ “Lowe’s shows it in the yard…just looks to be bigger,” the same subject said when viewing a similar grill at Lowe’s. This is a good example of an “In Scale” product image, where the product is presented in relevant surroundings, giving users a better sense of the size of the grill.

The crucial and immediate grasp of a product’s size is much more difficult to get when viewing images of products on the web. When only traditional “Cut Out” images — just showing the product on a white background — are offered, users have a very difficult time getting an accurate impression of the product’s overall size.

❌ “This one looks larger but that’s also because…the photos give no proportion or scale.” The fact that a “Pro Series” mixer at KitchenAid only had “Cut Out” images left most subjects feeling like they didn’t have a good sense of its size. Others said “In terms of the images, I like when you have it in a kitchen so that you get it for scale…so that you can see the size of it. With this one I have no concept of what size it is.”

✅ “Here you have things they put out specifically to give you a sense of its proportion…I think it’s quite clever with the cupcakes cause I know on average what size cupcakes are so this mixer seems quite small to me.” Unlike the “Pro Series” mixer, this “Classic Series” mixer at KitchenAid provided “In Scale” images that helped the test subjects get a sense of the product’s relative size, to the point where they could imagine it within their own kitchen, as illustrated by this subject, who added, “You can see it’s able to fit in my kitchen better.”

During testing, the difference between providing only “Cut Out” images, and providing “In Scale” images in addition to “Cut Out” images, became very clear when subjects were directly comparing two similar products, trying to decide which one to buy. Providing “In Scale” images has the side benefit of inducing users to begin imagining the product in their own space.

More Examples

AllPosters

✅ AllPosters offers an augmented reality “in room” visualization tool that allowed the test subjects to select different sizes of posters and see the resulting poster size in a virtual room. This gave them a much better idea of how big different-sized posters were compared to only providing users with the poster measurements in inches.

Bose

❌ “I can’t immediately tell from this picture but the fact that it says it ‘fits in the palm of your hand’ means it is quite small.” This subject initially couldn’t find any “In Scale” images due to other usability issues with the image gallery UI carousel, and had to rely on the product description instead.

✅ “That’s helpful, showing scale,” another subject said, who did find the “In Scale” image and immediately grasped how big the speaker was by seeing the product held in a hand.

Amazon

Even when you have hundreds of thousands of products, and it’s difficult to provide in-scale images for each of them, providing computer-generated images that illustrate scale based on the product dimensions in the spec sheet, as shown in the prior AllPosters in-room visualization tool example, or in the Amazon example below, can be a cost-effective way for mass merchants to auto-generate “In Scale” images for thousands of products in their catalog.

✅ Amazon provides users with a sense of scale by using graphics as stand-ins for real human models. While not as rich as a real model, it is a good alternative, allowing Amazon to provide fully automated “In Scale” images for literally million of products.

Conclusion

As always, “Don’t make me think” is important. Any time a prospective customer stops to think about something or is in any way confused, you lose a significant percentage of them. Make their life easier and they’ll make yours easier in return.

Product Page UX: All Products Need at Least One ‘In Scale’ Image (28% Get It Wrong) – Articles – Baymard Institute

PS. To put things in scale, here’s me with my buddies. From left to right: LeBron James, me, Michael Jordan 😃