Designing for E-Commerce: The Product Detail Page

The product detail page is a place for a customer to learn in-depth information about the product. The design of this page should display enough detail for the customer to decide if the product is right for them. One of the main reasons for loss of e-commerce sales on a site is lack of information about the products.
Information Hierarchy
The hierarchy of how product information is presented is an important design consideration; the information should draw customers in, and the information that is most appealing to customers should stand out in size or color. According to the CTO of 3DCart, Jimmy Rodriguez, a product image is most important to the customer, followed by product name, description, price, reviews and similar products, in that order.


Product Images
Photography communicates important tangible details to the customer such as color, scale and context. It can also communicate the intangibles— benefits, ideas, concepts and even the overall sophistication of a brand. Photography is very important in the product detail section because it is the leading factor in helping a customer to make a decision.


Product Variations
It is very common for a product to offer variations in color, size and more. It is imperative that the design of this section calls the variations to attention.  While a text dropdown can work to choose variations, also consider displaying the choices visually. For example, rather than listing the color, a customer can make a selection from a swatch of available colors.


Rather than just listing the sizes, a customer can choose from a size chart. The choice to display variations visually also depends on the nature of your site. For example, showing variation in size visually by stacking size options next to each other may work well on a children’s site, but may not work on a sophisticated clothing site.
Inventory Display
While many e-commerce sites choose not to display items that are not in inventory, in some cases out of stock items are displayed. This may be part of an e-commerce strategy. For example, daily-deal websites may display an item, but indicate that it is out of stock to communicate that you need to act fast to purchase your desired item on the website. A product that is no longer in stock either should not be shown or there should be a clear indication that it is no longer available.


The design of the product page should display thorough information about the product to allow a customer to make a completely informed purchasing decision. Easy-to-find information, detailed product images, product variations, reviews and inventory information should all be available to the consumer in the product detail section of an e-commerce website.

This entry was posted in Customer Experience, Technology and tagged , , . Bookmark the permalink.