- Users considering supplements rely on the main image gallery for ingredients information
- However, our large-scale testing reveals that this visual information is often lacking or insufficient on Vitamins & Supplements sites
- As a result, users discard otherwise suitable supplements because they can’t find a visual representation of the ingredients information
During Baymard’s large-scale testing of Vitamins & Supplements sites, ingredients information was, not surprisingly, key to participants’ purchasing decisions.
Yet on many of the test sites, this information was missing or difficult to access — leading some participants to abandon suitable products.
While it’s important to have ingredients information in many places on the supplement details page, a key area was revealed to be the main image gallery.
Indeed, many participants expected to find a visual representation of supplement ingredients here — similar to how in a physical store customers can simply turn the bottle around to view the “Supplement Facts” label.
- Why the main image gallery is a key location for ingredients information
- How main image gallery images often fail to support users’ information needs
- How a “Supplement Facts Label” image efficiently meets users’ needs
- 1 implementation detail to follow to ensure “Supplement Facts Label” images are found by users
Why the Main Image Gallery Is a Key Location for Ingredients Information
During testing, difficulty finding specific ingredient information was observed to have a cumulatively negative downstream impact on users’ ultimate product-finding efficiency.
Some users who can’t locate critical supplement ingredient information (i.e., names and amounts) within the first few moments of arriving on the product page will end up mistakenly dismissing perfectly suitable supplements in favor of moving on in their product search.
During testing, we observed that most participants started their preliminary product evaluation (i.e., deciding if the supplement warranted deeper investigation or quick dismissal) by quickly clicking through the supplement image gallery.
While most sites we included in our testing sessions provided participants with multiple images of the supplement’s packaging from different angles, some Vitamins & Supplements sites actually failed to provide participants with additional packaging images beyond the front-facing packaging.
As a result, users are left without critical information they need to make a purchase decision.
Even when ingredient information is available further down the page — for example, in the product description section — some users will fail to scroll all the way down and thus conclude that ingredients information is missing for the product under consideration.
Indeed, during testing participants who happened on ingredient information further down the supplement details page were observed to remark negatively when sites didn’t include a complete “set” of packaging images.
In the end, testing revealed that, for users on Vitamins & Supplements sites, an image of the supplement label is crucial to their purchase decision (similar to how an “In Scale” image is crucial for general e-commerce users).
How Main Gallery Images Often Fail to Support Users’ Information Needs
During testing, some sites attempted to support users’ desire to see ingredients information by including images of the back of supplement bottles.
However, while some users will be able to use the “Back of the Bottle” images to meet their needs, testing also showed that these images frequently fail to provide the visual information users are looking for — or make it unnecessarily difficult to read that information.
For example, Vitamins & Supplements sites can overlook when manufacturers include packaging images that are a suboptimal quality, or the zoom window may be too small to view the entire label area at once (as shown in the iHerb example above).
Furthermore, during testing, participants encountered numerous “unwrapped”-style supplement packaging images (i.e., the label graphic appears in its entirety).
However, while the label’s surface area was visible in a single image, participants often had difficulty extracting ingredient information due to insufficient zoom or other image-quality issues.
Another common image issue observed during testing was when the “Supplement Facts Label” image was presented at a 90-degree angle to a user’s viewport — causing the user to have to either twist their necks to the side, so they could read the text as normal, or expend additional mental effort to read the ingredient information text while the label remained sideways.
During testing, improperly formatted “Supplement Facts Label” packaging images were observed to bring some users to a full stop, as they struggled with the decision with whether to engage with the poor-quality image or move on.
How a “Supplement Facts Label” Image Efficiently Meets Users’ Needs
Therefore, always provide users with a stand-alone “Supplement Facts Label” image — essentially, an image dedicated solely to listing the supplement ingredients and ingredient amounts.
During testing, participants were observed to efficiently use stand-alone “Supplement Facts Label” images to access the included information with minimal friction.
Testing also showed that participants were much less likely to run into readability issues with stand-alone “Supplement Facts Label” images, compared to images of the back of supplement bottles.
Consequently, when provided with a “Supplement Facts Label” image users are able to more quickly access supplement ingredient information and subsequently move on to other supplement considerations (or dismiss the product as fundamentally unsuitable).
Implementation Detail: Ensure Thumbnails are Sufficiently Sized
Finally, even if a stand-alone “Supplement Facts Label” image is included in the image gallery, users must be able to identify this image type by its thumbnail representation to select it from the gallery when looking for ingredient information.
During testing, participants were observed to not click on “Supplement Facts Label” thumbnails — despite looking for a clear depiction of the ingredients information — if the thumbnails in the image gallery were too small.
Overly small thumbnails provide poor-to-no information scent — users simply don’t see what they’d be getting if they clicked on the thumbnail.
And not clicking on a thumbnail because it’s too small is, for the end user, just as bad as not having the thumbnail in the first place.
Therefore, to ensure users recognize that “Supplement Facts Label” images are available, the thumbnail for this image (as well as the thumbnails for the other images) must be sufficiently sized to make it obvious at a glance what they represent.
Help Users Quickly Access the Ingredient Information They’re Looking For
When users are shopping online for supplements, it’s important to keep in mind that they’re often comparing multiple supplements from different sites.
Thus, users tend to move quickly on the supplement details page — if they don’t find the information they’re looking for in a reasonable amount of time, they’re likely to simply leave the page and remove the supplement from consideration.
Therefore, to give users the visual information they need, always include a dedicated “Supplement Facts Label” image in the main image gallery.
Testing showed that such images were optimized for reading the typically small text size of ingredients information.
Moreover, providing this information visually mirrors the in-store experience (to an extent), where users are accustomed to physically picking up a supplement bottle and turning it to read the ingredients information.
Despite this basic user need, many sites in testing failed to provide a “Supplement Facts Label” image — leaving their users without necessary information and increasing the risk of abandonments.
Getting access: all 490+ Vitamins & Supplements UX guidelines are available today via Baymard Premium access. (If you already have an account open the Vitamins & Supplements study.) If you want to know how your Vitamins & Supplements website performs and compares, then learn more about getting Baymard to conduct a UX Audit of your Vitamins & Supplements site.