In our large-scale usability testing of product pages, we observe that product images are very effective at showing scale, highlighting features, and getting users excited about products — while text in product descriptions and specs gives users a comprehensive overview of all the product details.
However, both images and text have their drawbacks.
Images are limited by the fact that they must communicate all of their information visually. Yet investigating images is a very popular product-exploration strategy for users — during testing 56% of users investigated product images as their first action when arriving at the product details page (PDP), even when it was an inefficient strategy when compared to simply reading the product description.
On the other hand, text can be intimidating to read and many users don’t have the inclination to do so — during testing many users were observed to simply skip or skim quickly over product descriptions, even when a question they had would have been answered by the description.
Consequently, some of these users will abandon a perfectly suitable product — simply because they never find the information they’re looking for in product images or in the description or specs.
Instead, combining images and text, by adding descriptive text or graphics to product images, can be an effective way to communicate a great deal of information to users quickly and efficiently.
However, our large-scale Product Details Page usability testing reveals that 52% of sites don’t use descriptive text or graphics for their top-selling products — which represents a missed opportunity.
In this article, we’ll discuss the test findings from our Product Details Page usability study related to using descriptive text or graphics with product images, including:
- The limitations inherent in trying to communicate product features through either images or text
- How product images with descriptive text or graphics can “fill the gap” between images and text
The Strengths and Weaknesses of Product Images versus Text
Product images on the product details page are crucial to users’ ability to evaluate the suitability of a particular product — 56% of users’ first actions during testing, upon arriving on the product details page, was to explore the images.
Indeed, images can be extremely effective at conveying key product features and helping users evaluate a product — especially if the product under consideration is visually driven (e.g., apparel).
However, there are limitations to what can be conveyed visually through product images — the biggest being the challenge in highlighting product details that aren’t obvious from images alone.
This is especially true when it’s nonvisual or abstract information, such as weather resistance, weight, or scent. Still, during testing, subjects tried to obtain this very information visually from product images.
Additionally, sometimes product images can be ambiguous. This can often be a problem when images are heavily cropped to highlight a key feature of a product (e.g., the burners above) — users may lose a sense of where the feature is on the product or what its purpose is. Consequently, they will have trouble determining what a particular image is showing.
While great at describing product details in-depth, they often are overlooked by users quickly scanning a product page, as they can be difficult to find. Additionally, reading long product descriptions or scanning spec sheets requires an investment of time a user may be unwilling to provide (especially at early, exploratory phases of product browsing).
To Help Highlight Key Features, Combine Product Images with Descriptive Text or Graphics
While product images and text descriptions can be great in their own way, and should likely be included on nearly all PDPs, there is often a communication “gap” created that images or text alone can’t fill.
However, testing revealed that product images with descriptive text or graphics are well-performing additions that effectively communicate key product features that some users would otherwise miss. Users respond well to images with descriptive text or graphics, as they are able to discover features quickly, which then entices them into exploring the product further.
On the other hand, not including descriptive text or graphics for top-selling products represents a missed opportunity to sell a product to users.
Given the expense of taking high-quality product images, it is a waste of resources if users aren’t able to tell what is being highlighted for them in a product image without some textual description.
Furthermore, it can’t be assumed that users will bring expert-level knowledge with them and will immediately understand the feature being highlighted in a particular product image without accompanying text. Features that are obvious to users who’ve purchased a particular type of product before will often be unclear to users who haven’t.
These users may abandon simply because they didn’t see or understand all of the product’s features.
Additionally, creatively combining product images with descriptive text and graphics can save sites from having to shoot multiple images of product features, cutting down on the overall expense of creating the product page images.
The process can even be partly automated by adding descriptive text or graphics to existing product images — for example, ensuring all laptop bags include text stating what size laptop fits in the bag, rather than reshooting multiple different images that show different-sized laptops fitting into different bags. This is especially important for e-commerce sites with a large product catalogue, which may not have the ability or resources to shoot multiple images of a product.
A word of caution on the technical implementation and its compliance with the mobile platform. If text is embedded in an image file itself, and that same image is used on both desktop and mobile platforms, the text will often be illegible when scaled down on the mobile device. There are multiple approaches to solving this issue:
One is to not technically embed the text within the image file itself, but rather show it as a caption below the image (depending on the mobile product page layout, potentially only in the “enlarged” image view).
Another is changing how images with embedded text are created in the organization, and ensuring that the mobile view is considered when creating the image with the embedded text (e.g., by using large title-sized text callouts, or by using different images for desktop and mobile).
Entice Users to Explore Products in Detail
When testing with users, it’s often the case that they are moving very quickly when browsing products — especially on mobile.
Product images with descriptive text or graphics, however, are observed to often slow users down as they consider the feature highlighted. Often the response is positive, as users learn of a feature they hadn’t known about or considered for this particular product.
Images with descriptive text or graphics are also great for accidental discovery of product features — which for some users will be a decisive factor in their decision to purchase a product.
And yet 52% of sites don’t provide product images with descriptive text or graphics for even their top-selling products.
This article presents the research findings from just 1 of the 850+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” product page user experience.