Product Page Design
For ecommerce sites, product pages must convince shoppers to purchase a product without being able to feel, handle or see the product in person. A well-designed product page overcomes these obstacles with informative content, high-quality pictures and enticing videos.
Before We Start
Product page design has three primary aspects: the layout, visuals and a product information. The layout determines what order the features of the page will appear in. Pictures and videos of the product help shoppers see what it is. Finally, the product information provides technical details about the product as well as reviews and description.
Stick to Established Product Page Layouts. Place the most important, at-a-glance information first.
Product page design follows a fairly standard layout. Marketers have found that this layout is effective, and shoppers have learned to navigate it easily. Deviating from this tried-and-true layout almost always results in lower sales and lower customer satisfaction.
The layout of any web page can be divided into two sections: above the fold and below the fold. Above the fold, there should be:
- One featured photo of the product, accompanied with alternate images
- Ratings that show the average rating and number of ratings
- A brief product description
- Shipping information (a link may suffice)
- An obvious “add to cart” or “buy now” button
Below the fold is the place to put:
- product specifications and details
- more detailed product descriptions
- actual reviews from other customers
- related products
In addition to following this layout, it is wise to let customers write reviews and rate products. This information should include schema.org markup, which lets search engines display ratings of your products in their result pages. Images that you use should:
Be Professionally Shot
Product images are one of the few ways that ecommerce stores can show shoppers a product, since the product cannot be picked up and actually handled. Therefore, only images of the highest quality should be used. Images should be done professionally, and they should focus on the product. The background should be uncluttered and the product should be in focus, so customers see clearly what they are buying.
Product images should provide a consistent view from one product to the next. This will let customers easily scan thumbnails and compare different products. At the very least, the images of products should be from the same point of view and have identical backgrounds.
Include Alternative and Detailed Views
Alternative views provide a chance to show customers detailed views that the uniform featured photos do not. These alternative images should include different angles, showing the front, side and back of the product. In some cases, a close-up image of a specific detail is useful. Alternative images may also show the product being used or in its normal environment.
Shoppers especially like images that they can enlarge. The best way to make images enlargeable is either by using a lightbox gallery overlay or rollover hover zoom. Both of these avoid opening zoomed-in views in another browser window, which negatively affects the user experience. The minimum image size is generally 1024 x 768 pixels, as this ensures users can zoom in to see details clearly.
Sidebars are primarily used for sub-navigation or extra content. On blogs, sidebars often contain recent posts, recent comments and advertisements. On complex sites, they are useful for helping users navigate deep into the site. Simple sites may not need sidebars.
Product videos have been shown to increase sites’ conversion rates. In one case study, Zappos say an increase between six and 30 percent in sales when they placed demo videos on their product pages. A good product video gives a brief overview of the item, highlighting its features and mentioning its benefits, before showing the product in use. For complex products, an additional video that functions as an instruction manual can be useful.
The content of a product page should focus on the products features and explain its benefits. It should expand beyond the facts of what the product is and explain how it might be used. As with all web content, this content should avoid technical jargon but avoid being general. The tone used should reflect the brand of the product and your ecommerce store. After the product description, there should be a bulleted list with the materials, dimensions and technical specifications of the product
- Learn more about ecommerce marketing
- Learn about measuring product pages performances with Google Analytics
- Learn about selling your products with Google AdWords