Product Images and Zoom Features
Great product images are a major key to success for any e-commerce store. A website has to do its best to replace a customer’s ability to see and touch the physical items like they would at the store.
Many manufacturers will provide high-quality images, suitable for us in a product catalog. These can be easily resized in suitable image editing software, such as Adobe Photoshop, to provide multiple sizes for regular and zoom images. However, your site may benefit from professional and unique photographs of the items you carry.
Consider the website Mad Cat Toys, which sells collectible and retro toys suitable for collectors as well as children. The site has won several prestigious design awards, and one of the reasons for its appeal is the uniform look of the product photography. The products are photographed on a white background with a subtle shadow that gives the item dimension. If this site were to use stock images from various manufactures, the effect would be much more hodge-podge than it has now.
Even if you use stock images, though, there are several ways you can use product photography to entice customers to place an order.
1. Show Large, Detailed Images
Most site designs don’t allow for large, detailed images, even on the product detail pages.
However, larger images give customers the ability to see texture and fine details they might miss otherwise. They keep customers from having to guess about certain details of the product. There are several great ways to display larger images to customers. The oldest, simplest way is to open a larger image in a popup window. However, this doesn’t have the flair of modern websites, and has usability problems with pop-up blockers.
The lightbox method is popular now too, especially for sites already running jQuery or Prototype libraries. A lightbox opens in a div element on the same page, usually dimming out the contents of the actual page behind the image. One library I particular like is called ColorBox, a jQuery plug-in. If you don’t know what a lightbox is, take a look at the examples on the ColorBox website. Chances are, you’ve seen a lightbox in use on many sites.
Another method is to use a rollover zoom. If I recall correctly, I first saw this on the Rue La La website, one of my favorite daily distractions (and why you can’t usually reach me on the phone at 11:15am!) I usually use the MagicZoomPlus script to set this up, and if you visit their site you can see the many different ways this can be implemented. The concept is that the zoomed image opens in a div element that lies on top of other content of the page, but is small enough so that it only shows a bit of the zoomed image at any given time. As you move your mouse over the regularly-sized image, the zoomed image moves around inside its box.
2. Alternate Product Images
Multiple images are also useful. Consider the following ways that multiple product images help the buying decision:
- Show the product from different angles
- Show details of the product, such as the contents of a boxed item or the label on designer clothing (you’ll often see this on Ebay)
- Show an item of clothing or footwear on a model
- Display the item in use, such as a piece of sports equipment being used in a game
Multiple images are most commonly seen on the product detail page. The screenshot below is from Zappos, which not only shows several images, but also incorporates a video.
However, Lands End does a terrific job of using mouseovers to show the back of an item of apparel when rolling over the product image. In this screenshot, t7The normal view shows the front of each swimsuit, but when you mouseover a product it changes to show the back of the swimsuit.
In the real world, a picture is worth a thousand words, but on an e-commerce site, a picture could be worth a thousand dollars.
What other creative uses of product photography have you seen? Let me know in the comments below.