Given This Row Of Product Cards:
Should the whole card just link to the product, or would it be better to:
- Link The Brand Name to more products of the same brand.
- Link the reviews to the reviews of the product.
- Link the image and the title to the product.
My Thoughts
Having the products encapsulated in a "card", especially in this specific layout, usually means that it's basically just a fancy button.
But...
Because there's more info on there (Brand, Reviews) it might lead people trying to find more Reebok products just to the single product, where they can find more products by Reebok. It's an extra step but you can still get to more Reebok products from the single product, if that's what they're looking to find.
Top comments (6)
The whole card should be clickable for the sake of UX, but ideally only the title (and maybe short description) should be linked. Then you may style the
a:afterwith CSS to cover the entire card.This link has a nice explanation and several solutions: inclusive-components.design/cards/
I'll definitely look into making the whole card clickable, and thanks for the Inclusive Components link. Accessibility is definitely something I need to focus more on in my work.
I would honestly go for the whole card a button linking to the product page. This is kind of bias, but if I see something like that in a product page, I just click anywhere in the card to see more details not worrying if I clicked the title or the image, etc. If I need to see more details such as reviews, chances are it is already somewhere in the detail page. Amazon does the same thing too.
I'm interested in this too. What I've been doing a lot in the last year is adding an absolutely position overlay block link on top of the entire card and having hidden screen reader text inside of it that says it's a link for the thing. I'm not sure if it's the best approach though, so I'm excited to see what answers come up here.
Slightly different scenario, but on DEV the whole item on list views is clickable to the article and other links like author, etc. are clickable links to those places.
Could you please share the JS magic you used to achieve that?