Article overview

UX: 7 Product Image Categories

· By · 11 comments ·

Showing this dress in-use tells a completely different story than simply showing it on a hanger. Image credit: Lands' End

Images sell. But besides the traditional white-background product image shot from three different angles, which product image categories can you include in your product gallery?

A dress on a hanger will look vastly different from one on a mannequin, that again will look vastly different on a real human model, that again will look vastly different when worn in the street as opposed to a studio. The level of information range from descriptive to telling a vibrant story about owning the product.

Online shopping is typically inferior to shopping in the physical world because the online medium by its very nature deprive the customer of a whole set of sensory experiences and product interactions. You can’t touch and feel the product, you can’t smell it or pick it up and turn it around.

In this article we will look at seven different categories of product images that can help bridge this gap between the physical world and the digital shopping experience. At the end of the article you will find a brief run-down of the key takeaways.

1. Compatibility Images

If you ask somebody if their TV accepts “YPbPr analog component video input” most people will simply stare at you bewildered. However, if you show them a picture like this:

An image displaying all 11 plugs on this Game Capture device can help the user see whether the product is going to work with his gaming device. Image credit: AverMedia

Quite a few people will likely nod in recognition, and the ones who don’t will at least have a chance at figuring it out by looking at the back of their TV to see if it’s compatible. These types of compatibility images are extremely important to include in your image collage for all products that require manual setup and configuration. The image serves as a visual guidance, reducing anxiety by answering the simple question most non-technical folks worry about: “will it work for me?” Even the ones who might know what YPbPr is will still benefit from the visual reassurance that they are indeed buying the right product.

2. Lifestyle Images

When you associate a product with other products the target customer finds appealing, you sell more than just the product – you sell a lifestyle.

By showing the product with other appealing products you can implicitly associate their use and values. Image credit: Libratone

Libratone present their speaker in the context of designer furniture, making the purchase decision less about technical specs and more about lifestyle. The high price point of the speaker is implicitly justified by its association with costly designer furniture.

This technique is used extensively in print advertising, but not quite as often used online at the merchant level (only at the manufacturer level). This is likely due to the cost associated with shooting these types of images. However, if your product catalog is of a manageable size lifestyle images can be a good way of differentiating your online shopping experience.

An additional benefit is that lifestyle images often also give the customer an idea of how the product might look in a use-context or how it may be used.

3. Customer Images

Shooting original product images can be prohibitively expensive depending on the type and amount of products on your site. However, one way to get free use-context images is by allowing your costumers to upload their own images – and maybe even reward them for doing so.

Customer images can be difficult to gather but have little direct production cost, provides social proof and often display a use-context. Image credit: Krykie via Amazon

Customer images have the additional benefit of providing social proof (showing that other people have actually bought this product), and provides the customer with an idea of how the product really looks when not perfectly lit in a studio setup. Most people instinctively know when they see a “sales image” and immediately put up their parades – customer images can help lower those parades.

There is, however, a couple of things to beware of. First off, you need to verify the images to make sure customers are uploading correct images of the correct product. Secondly, unless you reward customers for submitting their images, you won’t receive many without either significant mass or a strong community.

4. Textural Images

One of the downsides of e-commerce is that no matter how hard you work on you product pages the customer will never be able to have the real product in his hand, as you normally can when going to a physical store. Therefore the customer can never feel the fine texture of the silk cloth, the sturdiness of the titanium lock, or the precise assembly quality of the camera. For some product categories (apparel comes to mind) these tactile experiences is a major part of the overall shopping experience and a decisive purchasing factor.

A closeup image can provide the customer with clues on the texture and finish of the product – qualities that are otherwise hard to communicate online. Image credit: Hugo Boss

To close some of the gap between e-commerce and actually holding the product in your hand, textural images can be used. Textural images are extreme closeups that take the customer in so close that you can clearly see the texture and assembly quality. In practice this is often provided by either a zoom functionality for a high-resolution product image, or it is a separate image in the gallery providing a close-up of a part of the product.

Following the VAKT learning style model (designed by Niel Fleming) most people have one of three preferred sensory input: visual, auditory or kinesthetic/tactile. People who prefer tactile sensory inputs will especially want to feel the texture of the cashmere cardigan they’re about to buy and textural images are the closest thing you get to feeling texture through a screen.

5. Size & Proportion Images

It can often be difficult for the customer to determine the physical size of an object based solely on an image. Size & proportion images employ various techniques to help the customer intuitively judge the physical size of the product.

The same coin in every product image helps the customer quickly grasp the size of each product. Image credit: supermagnete.de

A good example of size & proportion images can be found on this German magnet store where they place a €1 coin in all their product images, making it very easy for the customer to grasp the size of the product. However, when showing proportions like this it’s a good idea to choose a culture-agnostic object that all your customers will have an instinctive knowledge of. For example, the €1 coin only works as long as the magnet store caters solely to the European market where everyone instinctively know how large a €1 coin is.

The hand clearly indicate just how small the iPod Shuffle is. Image credit: Apple

A very common way to communicate size (and portability) is by having a hand hold the product. The thinking goes: if the product fits in the palm of your hand, then it fits in your pocket, and if it fits in your pocket then it’s portable.

When dealing with storage products, showing actual objects stored in it can help give a visual representation of the volume the storage product can hold. Image credit: TimBuk2

Another example of size & proportion images is seen on bag manufacturer TimBuk2’s website. When browsing for a new bag it might be difficult for the customer to imagine exactly what will fit into a bag that measures 18*10*6 inches. However, in the above image the bag is shown in a proportional context that serves as good guidance: “if a bike helmet and a pair of sneakers fit into it then my DSLR camera will too.”

6. Usage Inspiration Images

As the name suggests, usage inspiration images show the product in new usage situations to inspire the customer on how she can use the product herself.

The portability of the PAL radio is underscored in this image, highlighting a key feature of the product. Image credit: Tivoli Audio

A good example of usage inspiration images is seen above with the radio shown on a beach – this radio clearly doesn’t have to sit at home, you can bring it out into the world. This also highlights a unique aspect of the product, namely the mobility of the radio. Not only can you bring it to the beach, but moving it around in your home or bringing it to the porch is presumed easy as pie when looking at this image.

The Kindle is light and portable which Amazon communicate by showing the product in many different environments. Image credit: Amazon

Amazon explicitly show multiple environments in which the Kindle can be used to underscore its portability. The product’s lightness is also suggested by how the two women hold the device with ease in just a single hand.

Showing an entire outfit and not just the specific piece of apparel can help the customer see the potential use of the product. Image credit: H&M

Usage inspiration images can also serve as a powerful cross-selling technique. For example in the above image the pair of jeans are shown as part of a whole outfit, showing the customer a sweater that goes well with the jeans. It shows the potential of the jeans while also implicitly suggesting that you buy the sweater.

Customer images will often be usage inspiration images too, showing new and creative uses of the product. For example a popcorn machine that is used to roast coffee, or pipe cleaners used as kids craft supplies.

Finally, usage inspiration images are always shown in a context, making them less sterile and more human than the traditional white-background images. Professional usage inspiration images will often also serve as lifestyle images.

7. Animate Images

Images with other humans or living creatures in them tend to attract more attention and evoke stronger emotions than images of inanimate objects only. This can be an effective way of grabbing the customer’s attention although it also runs the risk of distracting them from the product itself.

Without the cat this image would be just as descriptive of the cat food, but the customer wouldn't have the same emotional connection to it. Image credit: BaxterBoo.com

According to the biophilia hypothesis humans have an affinity for all living things which help explain this attention bias. We can probably all relate to the difference between a product image of some cat food in a bowl and then the same image but with a cat eating it. Even though adding the cat to the picture tells us nothing new about the product or its features, we as humans will undoubtedly have a stronger emotional connection with that image (for better or worse) because there’s a living creature in it.

Humans and other living creatures in the image can also show an emotional response to the product, a reaction the customer can identify with and mirror – something you’d rarely do with an image consisting purely of inanimate objects. In that sense animate images can highlight the benefit of the product, not just its features.

Summary

Now, you should by no means ignore the traditional white-background product image – they are very informative and have the highest signal-to-noise ratio possible. You can, however, create a richer and more engaging shopping experience by supplementing your product gallery with one or more of these seven categories of product images:

  1. Compatibility – a closeup showing “compatibility features” (e.g. cables or sockets) provide visual guidance to the customer as to whether the product will work for his use.
  2. Lifestyle – when showing the product alongside other products the target customer likes, you sell a story about the product, a lifestyle.
  3. Customer – user submitted images can be a cost-effective way of providing social proof and in-context views of the product.
  4. Textural – an extreme close-up image will give the customer a sense of the texture and assembly quality, and thus close some of the tactile gap inherent to online shopping.
  5. Size & Proportion – showing the product in a proportional context makes it much easier for the customer to judge its physical size.
  6. Usage Inspiration – showing the product in new usage situations will inspire the customer on how she can use the product herself.
  7. Animate – having humans or other living creatures in your product images will attract more attention from and evoke stronger emotions in the customer (for better or worse).

These seven product image categories ultimately allow the customer to experience the product more fully, bridging the gap between the digital and physical world.

Boss March 6, 2012 Reply to this comment

VAKT leaning style” – should that say “learning style”?

Jamie, Baymard Institute March 6, 2012 Reply to this comment

Absolutely. It’s been corrected.

Thanks for the heads up.

Hector Hurtado March 8, 2012 Reply to this comment

Really interesting article, thank you. It will help me reignite my case to my clients.

My favorite (within industry and context) are lifestyle, usage, and animate.

Christian, Baymard Institute March 8, 2012 Reply to this comment

Hi Hector, I’m glad you found it useful. Thanks for the kind words.

Perth Web Designer - Dale March 9, 2012 Reply to this comment

Fantastic article. I love the way you’ve broken each type of image downs so clearly. We found inspirational or what we call aspirational images work well in lead generation sites, like bathroom and kitchen renovations. If you show people luxury kitchens and bathroom photos the leads are higher as opposed to everyday bathroom or kitchen renovations. The psychology might be that they might be able to get my small pokey bathroom looking like that luxury one on their site. The consumer is aspiring to the more luxury bathroom/kitchen even though the budget for such a renovation out of their reach. Much enjoyed.

Christian, Baymard Institute March 10, 2012 Reply to this comment

Hi Dale,
Great example – thanks for sharing.

Edward Lewis March 12, 2012 Reply to this comment

Thanks for the information.. it’s a really useful guide.

Do you have any thoughts on what size the images are that are used? Or, if portrait, landscape or square images are best? On one of our sites we have opted for square images as they fit into the design of the site very easily, however as they all need to be cropped we are looking into alternatives.

Taking images for a full range of pictures for an ecommerce site is a very large task! I think a lot of people don’t realise how much work is involved!

Robert Woloschanowski March 16, 2012 Reply to this comment

Inspiring analysis. Thanks for sharing.

You could even simplify your system into:
1. Complete view (back/front, 360)
2. Detail views with relevant aspects, textures etc.
3. Context views to see usage and size/proportion

We are running an online shop, offering flash sales, where products are only available for a limited amount of time. Quite challenging to generate all that material in time.

Nocola H. March 20, 2012 Reply to this comment

Great stuff! Thank you for sharing!

MK June 6, 2012 Reply to this comment

I know this may seems like a lot to ask, but why not show how a piece of clothing looks on different sizes of people. I have to imagine that a big part of return rates has to do with items not fitting as imagined. I’d love to see a couple of variations. How the dress would look on someone short/tall. Skinny, average weight, overweight.

Translator May 28, 2013 Reply to this comment

I don’t know if i could get my answer here, but I have looked all over the net and I am at a loss… How do you call an image on a product package, which resembles the product inside the package, but is not necessarily a picture of this product? I found “indicative image”, but only on one internet site and I am not sure it is the right term…

Post a comment!

Close overlay