Design 1, 2, 3: Say Cheese! Product Photography

Before online shopping was completely ubiquitous, one of the most common sentiments passed around among eTailers was 'Make the product feel as real to the user as possible. Give them an experience that is as close as possible to seeing and touching the real thing.' This idea very much still holds true today, but when was the last time you gave it any thought? It's kind of eCommerce 101 and in this fast pace world of social media, ad targeting and whatnot, who has time to think about user experience.

To speak in metaphors, you know your home has a floor and you walk on it everyday, but do you ever take the time to press your face against the wood and look at what's really going on down there? Do you see the cracks, the patterns, the dust?

Okay, I am not the best metaphor creator, moving on. My point is you are selling a product online. Your sole goal is to make a visitor buy it. How do you do that? Let's get back to the basics. You have to give the visitor the same experience as if they were it buying it in a store. You have to showcase your product in a way online that lets a user basically feel like they're already holding your product in their hands. Do it right and that visitor will be holding your product soon enough.

One of the best ways to capture the product's essence is with great product photography. In this month's Design 1, 2, 3, you'll get some tips on improving your product photography, and you'll see how some online eTailers are doing well and poorly.

Guidelines for Product Photography Good product photography is actually quite simple if you follow some rules.

Hire a professional. I don't care what you sell, if you're trying to make a business out of it, the least you can do is hire a professional photographer -- even if it's an just-out-of-college-only-done-this-twice-before person. You may save money upfront by not hiring a photographer, but I can guarantee you will lose money in the long run. Professional photos also add credibility to your business, it relays a message to the visitor that you are taking this seriously. Not to mention if the photos come out beautiful -- well-lit, large, full of detail and texture, it can evoke a positive emotional response from the visitor, always a good thing.

Shoot only the product. It's tempting to dress up the photo with a fancy backdrop or flowers or a pretty woman holding a rose (I kid you not, you'll see this in the examples further down the page.) Don't. This isn't the time to get artistic with the photo. You are trying to convey information to the visitor - the size, shape, color of this product.One caveat to this. If the item is very small, it could be helpful to show the product in perspective. For example, if it's a candy, show it next to a quarter, so a visitor has an idea of its true size.

Shoot multiple angles. If the product is small enough to hold in your hands, you should probably shoot it from the the five major angles -- front, back, top, bottom and side. Of course, some products don't need all that - for example a bottle of cleaning spray could get away with just the front and back sides. If the product is large, and shooting from multiple angles would be difficult, consider this first: How much is the product? If it's an expensive item, suck it up and get the shots. More photography will help reassure a user who is about to spend a lot of money that it is exactly what they want.

And a few more tips that focus on the product image on the website.

Position on the page. The standard layout for product photography is one large photo (anywhere from 200x200 to 500x500) with multiple thumbnails (of different angles/colors) below it. Generally this area is laid out to the left most of the page as possible. Meaning, sometimes, it's more like in the middle of the page, but that's really just because there's a left side bar. We'll look at a deviation of this (and the problem of it) in the examples below.

Zoom in. You'll almost always want to let a user zoom into the image. A few good rules when it comes to zoom - don't ever have a zoom link/hover where the image isn't enlarged. Nothing is more frustrating to a user than to click an image and have a pop-up open with the exact same image size in it. The zoom should be at least double the size, if not larger depending on file size, page load time and server speed.This brings up another issue - how do you zoom? I am not a fan of the pop-up, as many browsers have a default pop-up blocker. The shadowbox or light box is a nice replacement for the pop-up that simply opens up the larger image while dimming out the rest of the page. You can view an example of it here The rollover zoom I've never liked because it usually displays to the right of the image, which also usually happens to be the product information such as price and add to cart button. And the rollover zoom can happen by accident when a user moves the mouse of the image and that can be annoying.

Show all the colors. If you're selling an item in red, blue and black, I want to see the product in red, blue and black. As I recently found out, someone bought me bedsheets and asked what color I wanted, blue, white, gold or red. The designer in me almost replied, Can I see some swatches? Instead, I politely said blue would be fine. Fine if they weren't robin's egg blue which looks a lot like mental patient hospital blue. Always show your product colors -- if you can't do the object, at the very least large swatches.

Do you have any additional photography tips? Add them in the comments!

Product Image Examples Let's take a look at how some current eTailers are using product photography. And we can discuss what's working and what's not.

West Elm This is a nice product shot. I can tell the item is wooden with hard angles; I can count the number of slats if so desired; I see the angle of the seat; I get a sense of the color. That's a lot of information in a single photo.

They also include a lifestyle shot of the product (right). A lifestyle shot shows the item in use and gives the visitor the sense of possibility with the product. These types of images make an emotional appeal to the visitor which can be great for that shopping persona.

The zoom is a light box.

The drawback to these product images? They don't ever show the futon in the flat position. This is pertinent product information that should not be missing. And this is a technical error, but once you click on the lifestyle thumbnails, the user cannot return to the frame image without refreshing the page.

Walmart Walmart gets it completely right here. A well-lit straightforward product shot in each of the four colors available. They show the futon in various positions (flat and with the side arms up) within the lifestyle shots. They even go one better than having just multiple angles, they actually have a 360° video view.

They do both a mouse over zoom (which I stated earlier that I'm not a big fan of because it covers the buying information) and a light box zoom. My only real qualm is that loading the zoom in the various colors takes a while (as you can see from the image above.)

Ikea The Swedes do it a little differently. They get points for showing the product in all the colors and at the different angles/positions. However, put the product thumbnails at the top of the page, which users might miss on the first go-around. Below the product image are the thumbnails for colors and more models. The more models thumbnails may be taking up space where the actual-product-i'm-interested on's thumbnails could have gone.

Additionally they have no zoom. Considering a visitor can't actually make a purchase on the site, and will have to see the product in person no matter what, Ikea can get away with not including a zoom. They don't abuse this luxury, and still choose to include clear, well-detailed product images.

Target Target has a nice straightforward product shot. They also show it in a flat position. The zoom is a light box.

A few quirks on the Target page that may confuse some users. The product photo is centered on the page and the thumbnails are to the top right of the image. This is unusual placement for thumbnails and may get overlooked. Secondly, upon clicking the flat thumbnail, it skips the main image size and opens directly into the enlarged, zoom light box. I found this action unexpected. I hadn't committed to wanting to see it zoomed in.

Also, Target is the only main brand store that in the light box cannot move between images/thumbnails. The only option to see the other images is to close the light box and click on the other thumbnail.

Amazon This Amazon example is quite terrible, and I'm really only including it because I think it's funny. AND because everyone thinks Amazon is the holy grail of eCommerce.

The image is too small and there are no additional angles. There's not an image to show the product in black. And the only other image is a user submitted image that has absolutely nothing to do with the product. Neon pink sunset? Hilarious. How did this get past Amazon staff as something relevant? Moving on.

More Examples

From ivgStores, we learn to never make the zoom image the same size as the regular product image.

The Futon Shop adds a nice touch to its product images on the category page. When a user hovers over it, the image switches to the flat position. I like this because the way a futon looks folded and flat are crucial, decision-making pieces of information. The Futon Shops gives you this information in a very effective way.

Futon Creations has great product images in different colors, at various angles, and lifestyle shots. Personally, I think they went a little too far with the lifestyles shots to include a pretty woman holding a rose while seated on the futon. What do you think?

Thanks for checking in on this month’s Design 1, 2, 3. If you learned something new or were just pleasantly amused, pass it along. And if you have a suggestion for a Design 1, 2, 3 — either a site or a subject, leave it in the comments! See you next month.