EcomAtlas

Module

List layout and cards

For
Lean founder-operator · also New-brand launcher, Head of ecommerce / growth

Published · v1.0.0

Locked

Lessons

4 lessons, in order.

0/4
  1. Lesson 1: What every product card must show

    Define a consistent card-information contract that lets shoppers reject, shortlist, and compare products from the list.

    Locked✓
  2. Lesson 2: Make product cards one coherent destination

    Let the main card area open the product while keeping secondary actions distinct and predictable.

    Locked✓
  3. Lesson 3: Show unit pricing wherever packs compete

    Give shoppers one consistent price basis on product cards and product pages when package sizes differ.

    Locked✓
  4. Lesson 4: Use quick view only when a larger image settles the next decision

    Add quick view for visually judged products, and use quick add only when no PDP decision is being skipped.

    Locked✓

Product lists let shoppers reject, shortlist, and open products without visiting every detail page. The business outcome is faster, more confident evaluation based on information and interactions that remain coherent across devices.

This module covers list density, the attributes shown on cards, primary and secondary actions, hover and focus behavior, mobile hit areas, and repeated-card consistency. These decisions belong together because information determines whether a product looks relevant, while interaction determines whether the shopper can act on that judgment. Baymard’s research supports showing attributes needed to assess suitability and making visual hit areas clear about where they lead.12

Start with the comparison task. Choose the product facts that allow a shopper to keep or reject an item. Then set density and image treatment around those facts. Finally, map the primary product destination and any secondary controls. Do not use hover to carry essential information because it is absent on touch devices.

Module diagnostic

Take one collection and one search result page. On desktop and phone, compare five cards for information order, image behavior, prices, availability, variant cues, review treatment, and action destinations. Tab through the same cards with a keyboard. Flag missing decision facts, ambiguous click areas, duplicate links, accidental taps, and card variants that diverge across surfaces.

Small assignment

Write a card specification for one product type. Name required and optional information, primary destination, secondary controls, hover, focus and touch behavior, missing-data fallback, affected surfaces, owner, and acceptance cases.

Evidence and further reading

  1. “Product Listing UX: What Information to Display in Product Listings,” Baymard Institute, https://baymard.com/blog/product-listing-information. Supports showing product attributes needed to judge suitability. Accessed August 23, 2026.
  2. “Make It Clear Where Hit Areas in Visual Elements Lead,” Baymard Institute, https://baymard.com/blog/hit-areas-in-visual-elements. Supports clear, predictable hit areas across desktop and mobile. Accessed August 23, 2026.

Was this helpful?