A product card should support comparison before the detail page is opened.
Product cards: price and decision attributes
Show prices and key attributes on the card. Group variants into one product card and preserve the shopper’s place when returning from a product.
Research context: Baymard · Product listing UX ↗
Index supplies filterable data; Trade prioritizes quantities by variant; Famme shows imagery and colors. Technical assortments can additionally use Comparison.
Try the pattern
Task and expected result
- 01
Sort by price low to high: compare the lowest matching variant price.
- 02
Open a product from a filtered list and use Back: the same filters and view should return.
- 03
Switch to list view on mobile. Price and action links must remain readable without horizontal scrolling.
- 04
Sort filtered products by price: the displayed price must belong to a variant matching the filter.
- 05
Switch list/grid: query, membership and filters must stay unchanged.
How to investigate value
Observe whether participants find an item meeting every need, not just how many cards they click. For measurement: relevant selections per eligible search/list visitor.
Watch for side effects
Zero results, false variant matches, lost list context and slow filters. More product-page visits are not necessarily better.
This is a proposed investigation, not a measured result. Choose one hypothesis and define the audience before testing.
Build a measurement plan for this concept ↗