Make product cards one coherent destination
Let the main card area open the product while keeping secondary actions distinct and predictable.
A product card’s main job is to open the product. Make the image, title, price area, and surrounding card space behave as one coherent destination. Keep actions with different outcomes, such as swatches, wishlist, or add to cart, visibly separate.
Baymard’s research supports making hit areas and destinations clear, using a unified hover response on desktop and simple, unambiguous hit areas on mobile.[1] “Fully clickable” does not mean nesting every secondary control inside one giant link.
The rest of this lesson is available once the Atlas is unlocked.