Effective Product Pages

• Details
• Published on Tuesday, 17 January 2012 11:49
• Hits: 181

If you are running an e-commerce store, one of the most important pages to reachout to your customers is the product detail page. This page can recreate the experience to the users as if they are in a "bricks & mortar" store. They provide every last little drop of information on the product, building the brand and product.

Product pages have so much potential and are key in any conversion to sale. It is this page that must convince a person to buy your particular product. Many websites show only the most basic amount of information required to get a sale, and they think this is good enough. It isn’t. In a world where your nearest competitor is only a click away, you need to make sure you convince your customers that buying from you is the right choice.

There are some simple things to keep in mind, then there are some more complex and possibly interesting things to add to your product pages to interact and engage with your customers.

Product Name

Simple yet sometimes overlooked. Your product name should consisly describe your product and be prominant to the user browsing your page. A title like "Grey Trousers" may not be descriptive enough, perhaps a better product name would be "Long Grey Survivor Stretch Trousers". Each product name should also be unique (if possible) so that if users are searching through a list of your products they can easily identify each and every product.

Price

Although everybody knows to display the price, most websites display a small price that is not easy to see. The key to the most successful product page design is to show the price in a prominent location, near the "Add to cart" button so that when the user views the page initially, their eye gaze flows naturally through the product name, towards the price, and then "Add to cart" button.

Image 1 IKEA clearly showing the price of their products

Add to Cart Button

The add to cart or Buy button is the key to getting the user into the steps of completing their sale. Your button should be placed high on the page, preferably above the fold, be easily distinguishable from other elements on the page. Its colour, size and text will rest largely with the styles of your site. It might also be informative to keep note that some colours might have different meanings in various countries. It helps to research.

Image 2 Rushfaster has bold prominant price and button

Product Images

Images help the user see what the product looks and helps them decide whether the product is what they want to purchase. When viewing a product page, a user will want to verify that the product on the page is what they are looking for. Most users are visual and the cliche "A picture tells a thousand words" stands true. No matter how descriptive the product name is, most users will use product images to verify that the product is what they’re actually wanting to purchase.

Some handy tips for displaying product images are:

• Images should be sized correctly and be clearly in focus. The use of zoom features of lightbox effects help to increase the image size without compromising on the page real estate.
• Multiple images should be provided with different angles to help the user see the product at different angles, similar to if you were browsing a bricks & mortar store. It is even more important if there are multiple colours.
• The product image should show the image in the description/title. It may not be best practice to show collection images or an image that does not match what is described.

Image 3 Newegg showing useage of multiple images.

Product Description

The guts of your page, detailing the information of the product you are showing. The description should be precise and can be written well to persuade the customer into buying the product, but needs to be informative. Writing your own copy for each product can be time consuming but worth it in the end, as it gives you the edge over the other online stores that just copy and paste the manufacturers information.

Image 4 Lego's consise yet informative description.

Quantity Options

Although simple, this element can be easily missed and is rather important for most users when purchasing an item. Imaging wanting to buy a can of soup and having to press the "Add to Cart" button 10 times.... yeah you get the drift. Such a small element doesn't take up much screen real estate and adds value to the users experience.

Image 5 Dan Murphy's encourages users to select the quantity they require...

Product Options

Specifications of a product can differ and may warrant the use of options/variations. Things like t-shirts or shoes, which may come in various colors, styles and sizes, can benefit from having the ability to modify their options. The primary benefit of showing products in such a way is to reduce the number of overall product pages in your website, thus making searching through long lists of products much simpler. Having options also reduces the frustration felt by a customer when clicking through to products that happen to be the same, but a different size or color that they want, for example.

Image 6 Bear Grylls site shows multiple colour options along with sizes.

Other nice to haves....

Manufactures name

The manufacturers name can increase brand awareness of your products and can also give the user a variation when searching for products. Many people can be brand loyal, so showing the brand of the product can increase conversions and the trustworthiness of your site.

Sizing and Dimensions

Sizing and dimensions are not for every product. For example, if you were buying coffee beans, it is not necessary to know the dimensions of the bag, whereas with furniture, whitegoods or luggage you might well want to know so you can make an informed descision.

Stock Availability

Displaying the stock availability can play on the users sense of urgency if a product is almost out of stock but can also allow the user to make an informed descision about the product and purchase it before it goes out of stock. If stock levels are high there would be no point in showing this information as it would not be useful to the user.

Customer Reviews

Reviews help in two ways. It could empower users as it gives them the option to provide unbiased feedback on your products, plus it also helps prospective purchasers with completely relevant information. The only problem could be the area can become stagnant when users do not add reviews or there is little traffic to help fill the reivew sections.

Similar Products

Similar products can add value to your product page as it can be worded correctly not to distract from the main objective of the page. Headings can be used effectively to show "Other customers have purchased..." or "Related Items". As much as you may wish to show these high in the page in order to generate extra revenue they have to appear much like the customer reviews; below any other product information.

Cost Savings

You should include the saving the customer will be making, both as a monetary value and as a percentage off the retail price, if your offering a saving. If the saving a customer is making is worth it, make sure they know about it.

In conclusion

Product pages should generally include most of the items listed above to enhance the users experience. Online stores have a major disadvantage, the customer has no tangiable product to touch or to try a product. You have to ensure you provide the customers with the most successful user experience with all the information they need and be competitivly priced.