Quick summary: There are many ways to present product images on an e-commerce website. Choosing the right approach requires considering the nature of your products as well as your customers’ goals and needs.
In part 1 of Product image best practices we looked at ways to ensure that your product images are of suitable quality and enable users to easily see and compare products. Here in part 2 we’ll look at the advantages and disadvantages to various ways of presenting product images.
It should go without saying that the “best” way to display product images on your website depends on several things including the nature of your products and the needs of your customers. For example a website selling clothing might provide a better user experience by displaying images of each product on a model or mannequin in addition to images of that item against a plain background. Some websites benefit greatly by displaying product close-ups while for others there’s little or no need.
With that in mind let’s examine a few approaches to displaying products under different circumstances.
For most e-commerce websites there are two types of pages on which product images are typically displayed:
- Category or search result pages - these pages usually display an overview of products within a particular category, or products that match a search term. Category or search results pages are often the second page a user sees after they click on a category link or enter a search term from the website’s home page.
- Product pages - these pages typically display the full product details along with an option to place the product in a shopping cart.
Of course on many websites product images appear in other places too. But for now let’s concern ourselves with these two since they represent the most heavily used pages within a typical e-commerce website.
Category or search results pages
For category or search results pages it makes sense to:
1. Use images to complement text descriptions. These days it’s fairly common for e-commerce websites to associate thumbnail product images with category or search results pages. Yet some still display only text descriptions. It’s generally more compelling and helpful to also use thumbnail product images, as this makes it easier for users to locate what they’re interested in and compare it to other items on the page.
2. Be sure images are large enough for comparisons. We touched upon this point in part one of this article but bears repeating. When using thumbnail images it’s important to ensure they’re large enough that users can tell the difference between products. There’s no perfect thumbnail size that makes this possible; it depends on how much detail is needed to compare your products. For example if you’re selling sporting goods it’s probably easy for most users to tell a football from a baseball or basketball even at very small sizes:
On the other hand if you’re selling hand-painted espresso cups you’ll likely need larger thumbnails to enable users to easily distinguish one item from the next – or you’ll need to link the thumbnails to larger images as in the example shown below.
3. Display color swatches. If your product is available in multiple colors then it’s often beneficial to display the colors at the category or search page level. Consider this wireframe example:
Here small swatches communicate the available colors for each product. This is helpful because users can:
- Quickly determine if they product they want is available in a color they like.
- Skip over any products that aren’t available in a color they want.
A variation on this approach would be to enable users to trigger additional product images by mousing over the color swatches, as in this example:
Product pages
For product pages it makes sense to:
1. Offer detailed images and multiple views. This suggestion doesn’t apply for every type of product – for example if you’re selling staples it probably doesn’t do much good to show 3 or 4 angles and extreme close-ups. But in many cases enabling users to see items from multiple angles – and close up – can be a powerful way to impart a sense of contact with the product. This in turn can improve conversion rates by giving users a stronger sense for product specifics and details.
Remember, part of the goal is to give users an experience that’s in some ways better than what they’d get by standing at the counter of a bricks-and-mortar store. So improving the user experience by adding multiple views and details is very likely to be a good investment.
2. Enable users to see product variations. If your product is available in multiple colors then ideally users should be able to see the product in each, as this gives them more control and a stronger sense for the product. Car companies caught on to this idea some time ago, and most auto manufacturer’s websites now enable users to switch between every available color when they configure a virtual car:
On some auto manufacturer websites the virtual car image also reflects the addition of extras like roof racks, special wheels, and other options. This is an excellent convention since it gives users immediate feedback and enables them to see a very accurate rendition of the car they’re evaluating.
3. Don’t group products into the same image (unless…) Displaying numerous products in the same image can be either a good or bad practice depending on the situation.
It’s a good practice in cases where the context is critical – for example, an exploded diagram of an automotive transmission with specific parts labeled. Likewise in some cases it’s better to show a product next to other similar products to clearly illustrate the differences. Consider this Chemex coffee pot, sold by Sweet Marias:
Now let’s look at another size of the same model:
When these products are shown separately with each image maximized for size it’s difficult to tell them apart. In this case a single side-by-side image could more effectively communicate the difference in proportions between the two items:
In general though it’s preferable to photograph and display most products separately since placing more than one product in the same image can slow users down and force them to “hunt” for what they want. So take time to consider whether or not multiple-product images make sense for your products. In most cases they don’t.
4. Make it easy for users to switch between views and variations. It’s great to have 3 or 4 (or more) variations of your product image. But if it’s cumbersome for users to switch between these views then you’ll decrease the chances they’ll look. Be sure to make it convenient and quick to switch between images, as in this example from Newegg:
Zappo’s website also makes it quick to switch between various views of the same product:
One variation worth considering is to display a single product image and enable users to see a detail view by pointing their cursor to different areas of the product image. This approach is employed to good effect on the Sears website, as shown here:
An approach to avoid is to require users to open and close a pop-up window for each product view. This quickly becomes cumbersome for users and often causes them to skip looking at product details. One example of this can be seen on the Chelsey Henry website, where clicking a “View larger image” link launches a pop-up that contains only a single product view – and no convenient way to switch to other views of the same item. Users must close each pop-up and open a new one to see different views. This procedure is very likely to discourage users from looking at all the available product images.
5. Show the product in context if doing so adds value. We touched upon this in part one of this article, but in some cases it may be beneficial to show the product in context in addition to (or even instead of) by itself. An example is furniture; it’s often helpful to give users a sense for how a particular piece might fit into a room, and it may also be beneficial to give users a sense for the item’s proportions relative to other everyday objects.
In some cases a “best of both worlds” approach is to show the product both in context and by itself so that users can focus on the product details but still gain a sense for how it might look in the real world. For example IKEA finds balance by showing each piece of furniture by itself and also displaying “in context” images (such as IKEA-laden rooms) for each major category.
6. Consider your audience. Providing many different product views and options isn’t necessarily a “more is better” scenario. It’s important to ensure that your approach works well for your particular users. If you’re selling home theater equipment primarily to twenty-somethings then it’s probably helpful to offer many product views, even images of included cabling and manuals. On the other hand if you’re selling Victrola records to baby boomers (or staples to use a previous example) it’s probably wise to keep things a bit simpler and more streamlined.
As always, user needs and behaviors should play a big role in determining of where and how to best display your product images. As I’ve mentioned before getting feedback from users doesn’t need to be a difficult or lengthy process – and it’s the best way to determine what works best for your customers.
In part 3 of this article we’ll take a quick look at some exceptions to these rules – special cases where it’s necessary to take a different approach to displaying product images. We’ll also review the impact that product images can have on conversion.
Photo credit: Shermeee. Creative Commons licensed.
Related posts: