Designing a website product page is probably the hardest part of website design. We have to keep it simple, leave plenty of whitespace, include enough information to influence the buying decision, but not overwhelm the visitor with information. It’s a difficult thing to juggle, and one that takes considerable practice to get right.
There are certain things that must be on a product page, the name, price, image, description, and buy now button. There are also nice to have’s, including quantity options, multiple images, extended product descriptions and social proof.
The product name is an important part of the website design. It needs to be individual and SEO friendly. So rather than saying, “computer mouse,” say, “wireless 8-button computer mouse.” It makes it easier to find, and to refine.
The price is obviously a deciding factor in any buying decision. The web audience is predominantly made up of working folks like us. That means the price should be displayed prominently on the page. Ideally it would be just to the left of a large image of the product and just above the buy button.
An image is vital. As visitors can’t touch or inspect the product, they need to see it as clearly as possible. A good quality image is essential in providing reassurance that it is what the visitor is looking for.
The description works with the image to provide reassurance that the product is what it say it is. It should be brief, but complete, and contain everything a prospective purchaser needs to make the buying decision.
The buy now button is the most important part of that website design. It’s the conversion, and the place the site owner needs to work best. Proper placement is key. It should ideally be to the left of a clear image and slightly below the price. Exhaustive usability studies have shown this is the most effective placement of the button.
Looking at some successful ecommerce sites shows you how effective placement of page elements works in real life.
The nice to have’s should be included in the website design wherever possible, but not if it compromises the user experience. For the relatively little space, and code, needed to make a quantity button happen, it should be there.
Multiple images provide further reassurance that the product is indeed what the visitor is looking for. Integrating an interactive image, or providing several images from different angles is a very effective way of converting.
An extended product description is useful on technology products or complicated ones. These can be integrated using a tab for further information so it doesn’t spoil the page, or provided as a link. The more information the better, but not on the product page itself.
Social proof is a relative newcomer to ecommerce, but one that’s proving hard to beat. A buyers review or feedback comment is a great way to further reassure buyers that the product is worth the money. Hearing it from real people makes more difference than you could possibly imagine.