Product (List view) Design Pattern

The solution

Display the result with the following pieces of information:

• Give product overview, i.e product name, key features, photo
• Indicates how to know more about the product, i.e link to full specification of the product, to user reviews, to expert reviews…
• Give pricing / availability for the product, i.e price range or lower price, number of merchants selling this product
• Link the product to the list of all offers for this product, i.e by adding a “compare prices” button

Wireframe

1. Product image
2. Product title (i.e: “Canon EOS 40D“) – usually link to the product page where user can find offers for this product, product specifications, reviews…
3. Key features of the product, or product description (i.e: “10.1 megapixel, 1x optical zoom, 1x digital zoom, USB, CompactFlash I/II, Microdrive, 3 inch LCD“)
4. Links to more content. Among common extra content, we can find link to user reviews / expert reviews. 2008 trend: also display a selection of offers directly on the product display (See Kelkoo / PriceGrabber screenshots). 2009 trend: display discounts / rebate / coupons.
5. Price range, or minimum price for this product.
6. “compare prices” button that links to the product page where user can find offers for this product.
7. Number of merchants selling this product.

Related patterns

• Product page – Usually the landing page when clicking on a product (i.e: on the “compare prices” button).
• Offer – Products & offers can be mixed on search result pages, therefore tend to provide similar user experience and share similar display.
• Search Result Page – The page that lists products, or mix products with offers.

Examples

Product display at Google Product Search (Feb'10): The price column differentiates offers in new conditions, in used conditions ; and also indicates the number of local stores (integration between online and offline shopping). No price range, but minimum prices are displayed. A small icon indicates that some of the merchants selling this product support the Google Checkout payment solution. (URL)

Product display at PriceGrabber (Feb'10): A subset of corresponding offers for this product are displayed just above the "Compare now" button, allowing direct leads to merchants. Also to be noted, several personalization options enrich the product display: "Add to list", "Add brand to favorites", "Add price alert".

More examples