Designing for Ecommerce: The Product Page (Part 4)

Have quality product images and media

Users are at this point have found their product, but are now faced with deciding whether or not to purchase it. Without the ability to touch, hold, smell, taste or otherwise handle the product, users are left only with the image to interact with. Your images should:

BE PROFESSIONALLY SHOT

The quality of photographs indicates to users the quality of your photographs. In most cases, it’s preferable to display each product in a light box by itself with no background or tastefully placed on a subtle surface. This uncluttered view makes it easier for users to focus on the product and quickly determine if it’s what they want. Avoid blurriness at all costs.

REMAIN CONSISTENT

When comparing thumbnail versions of products, it’s harder to customers to make “apples to apples” comparisons if all your products are photographed from different angles or show different backgrounds. Furthermore, the jarring effect of seeing the products pointing in all different angles reduces the scanability of the category page.

Note how all the shoes on OldNavy.com are photographed at the same angle.

That’s not to say you can’t explore the “best angle” of a product. Enter the alternate photos…

INCLUDE ALTERNATIVE AND DETAILED VIEWS

Include different angles of the product: front, back, side, a close-up detail of the material, and different color options. Show your products in the context of how they’ll be used: worn by people, placed in their environment, or fully in action. Having alternative views will likely decrease your return rate as you’re showing customers exactly what they are getting.

Threadless uses models that appeal to their target audience. Showing a product on a person or a mannequin is more effective than the item laid out on a flat surface; models can show how the large product is in proportion to the human body.

A detailed photo of the material gives customers the tactile equivalent of holding your product.

BE ENLARGEABLE

Users want to have the ability to zoom in on the product. This can be done by with a rollover hover zoom or a lightbox gallery overlay. Avoid opening items in new browser windows; usability research has shown this is detrimental. In order to have a zoom capability, you need to have large images. The rule of thumb is that your product images should be at least 1024×768 pixels.

PRODUCT VIDEOS

Product videos increase conversions and are a worthy investment for your ecommerce site. Using video demos of items increased sales for Zappos between 6% and 30%. Offer a brief video tour of the item, highlighting the features and benefits of the products. Show the product in use, whether by having a model demonstrate all angles or having a person actually using the item in the situation they would in real life (e.g. a vacuum sucking up pet hair, a bicyclist riding a bike). If the product is more complex, post a product video that is instruction in use.

Stick to established product page layouts. Place the most important, at-a-glace information first.

Frequent online shoppers have a general expectation for what appears on the product page and in what order. By not adhering to the established hierarchy of information, users will get frustrated searching the page for the information they desire.

Above the fold

• Large main product photo and alternate photos
• Ratings, summarized by average value and total number of reviews
• Short product description
• A clearly visible “Add to Cart” button
• Shipping information or a link to find out the options

Below the fold

As the user continues to scroll down the page, more information is revealed including product details / specs, related products, and reviews.

Write unique, informative, and compelling product descriptions

Focus on the features and benefits of your item; describe how the product can be used rather than merely what it is. Avoid technical terminology unless your market is definitely going to understand what you’re talking about. However, also avoid being overly general. If appropriate to your brand, use a casual tone and make use of “you” and “your.” Include extra details like material, dimensions/size, technical specs in a bulleted list or table.

Have a big, bold “Add to Cart” button

Never place your “Add to Cart” button at the bottom of the page below all the product details; it should be clearly placed above the fold. Make it stand out with contrasting colors. Avoid using “Buy Now”, as studies have shown users don’t like to make that sort of commitment. Include an option to select the quantity of items prior to clicking the button. When clicked, don’t bring the person to the shopping cart page but rather offer an immediate response notification with a button to checkout. Assume that your shopper will buy another item.

Allow users to submit reviews and rate your product

Shoppers from all three personas respond to reviews: power shoppers will use them as a deciding factor, recreational users will look for validation about making an impulse buy, and reluctant users want to know that the product is exactly what they want.

Ecommerce reviews are no longer just about a five-star criteria. Large ecommerce sites include specific factors about the product that the reviewer can rate, like comfort and sizing. These detailed reviews can result in fewer returns if the customer knows such information. For instance, if the product “runs small,” they might decide to purchase in a size larger.

When dealing with a lot of user reviews, you need to offer people a way to sort through all your information. The “Was this review helpful?” feature allows you to group reviews together as “Most Helpful.” You can also opt to sort by date or rating.

Sephora is my favorite example of a robust review feature. Reviews are scanned for most common adjectives and placed in a word cloud, which can then be used to filter the reviews. Furthermore, additional filters are added, recognizing that when the audience varies (skin type, skin tone, age), the content of the reviews vary in opinion. Sephora and other large online retailers are also encouraging reviewers to submit customer product images and video testimonials.

Be sure to regularly audit your product reviews. Some sorts of products will result in highly subjective reviews (“My boyfriend loves this perfume on me”), objective opinions of the items (“The stitching was poor quality!”), and opinions about the user experience (“Thanks for shipping a replacement so quickly!”). Carefully monitor for reviews that reflect the usability and performance of your customer service department.

Show related products

This trick to doing this well is to be smart about how you use these. Don’t just slap together items because they are from the same category. If you are a one-stop shop for products, group your related products as items frequently bought together (“Customer who bought this item also bought…”). If you’re selling an iPhone, cross promote an iPhone case. Remote control car? Batteries.

Maybe you’re a store that offers many of the same type of items. While you can include a general “You might also like…”, get creative and highlight items the user might be more likely to buy (“Similar products at lower prices…”)

Include social share buttons

Social buttons are great marketing tools for your product pages. But don’t jump on the bandwagon immediately: do you sell the type of product that people want others to know they bought? Sometimes there’s a reason why people are shopping in the privacy of their homes.

When adding social share buttons, use individual buttons—such as the Facebook Like/Share button, the Tweet button, the Google + button, and the Pin It button instead of an aggregated button like AddThis.