Product Page Design
For eCommerce sites, product pages must convince shoppers to purchase a product without feeling, handling, or seeing the product in person. A well-designed product page overcomes these obstacles with informative content, high-quality pictures, and enticing videos.
Before We Start
The product page design has three primary aspects: the layout, visuals, and 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 and reviews and descriptions.
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 this layout 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 allows search engines to display ratings of your products on their result pages. Images that you use should:
Be Professionally Shot
Product images are a few ways that eCommerce stores can show shoppers a product since the product cannot be picked up and 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.
Remain Consistent
Product images should provide a consistent view from one product to the next. This will let customers quickly 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 product’s front, side, and back. In some cases, a close-up image of specific detail is useful. Alternative images may also show the product being used or in its normal environment.
Be Enlargeable
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 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, ensuring users can zoom in to see details.
Retina Compatible
Sidebars are primarily used for sub-navigation or extra content. Sidebars often contain recent posts, recent comments, and advertisements on blogs. On complex sites, they are useful for helping users navigate deep into the site. Simple sites may not need sidebars.
Product Videos
Product videos have been shown to increase sites’ conversion rates. In one case study, Zappos said 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. An additional video that functions as an instruction manual for complex products can be useful.
The content of a product page should focus on the product’s features and explain its benefits. It should expand beyond the facts of the product and explain how it might be used. As with all web content, this content should avoid technical jargon and be 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
