SEO folks, come at me. The overall product card has gotten cluttered with too many calls to action. It’s killing the point of the interface.
Ecommerce sites have a mind-boggling amount of links. Especially if you are a large company selling diverse things. Just to get to the product list, we first navigate through a mega menu. We do this to choose a category on most eCom sites. Then on the category page, we have to deal with a bunch of filters. If we’re lucky they will be in accordions and we can close them to skip.
Next we get to sort them, cool. Love that feature, it helps my obsessive trends. Oh hey, we got to a product!
We now sit upon the infamous “product card.” At one point this was a name, picture, and price and we’d have one anchor to wrap that. Today’s product card has so much more.
Usually we have a wish list button and an Add to cart button. There of course will be the product image or 5. Price, sale price, a “New” banner, ratings, and colors are included. This varies depending on the given site.
We need at least 6 clicks to buy a pair of blue Levis. This is once we are focused on the product. (Warning: There is no audio, and this test was without a screen reader. Check the details for a description.
Details of the following video
Nat navigates the page using keyboard only in order to buy a pair of jeans. Items needed to tab through: Previous image, next image, the image, Quick Add, 3 colors, Star Rating. If you activate Quick Add, you are shown two checkbox groups for waist and inseam. The waist has 9-10 sizes, the inseam has 2-4 choices.
Every tab stop on the way to the goal keeps pushing the goal farther away for disabled people. Let’s get back to simpler designs. Let’s include an image. The name, which is the link, should follow. Add a ::before on the name. Then, display the price. Finally, include an Add to cart button.
<div class="card">
<img src="..." alt="Model is 6ft with a 32 inch inseam wearing a size 28 in black" />
<a href="#">
<span class="small">Levi's Premium</span> 578 Baggy Men's Jeans
</a>
<p>$98.00</p>
<button>Add to Cart</button>
</div>
Then we use something similar to the following CSS:
.card {
max-width: 300px;
width: 30%;
margin: 1rem;
height: 300px;
position: relative;
}
.card>a::before {
content=" ";
height: 100%;
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
This allows us to make the whole card card actionable to take the user to the destination of the link. Yet if the screen reader user is tabbing through, they can still reach the CTA of add to bag.
Now this is a simple example. And that’s the point. Anyone who is a heavy keyboard user, or exclusively one will appreciate the reduced tab stops. It’s very annoying having to tab through more than one stop to get info on a product. We want to limit it as much as we can. Go ahead and provide the ratings, colors, and size range. However, going into the details of those items should be left to the PDP. The customer has shown they want more information by navigating there.
If process says you can’t eliminate the additional buttons and links, move them below the main CTA in the code. User experience tells us the faster the user can get to the CTA, the higher the likelihood of a buy. We can do this with visual users by using bold strong colors. But for keyboard-only users, placing Wishlist and Review links after the CTA is important. Screen reader users also benefit from this ordering. Activating one of those before visiting the page can prevent purchase. Particularly the wishlist button. Don’t forget to make sure they include the product name!
Conclusion
WCAG came up with Skip Links to help users jump around a page. The general consensus on when one is needed, tends to move between 5 and 10. If you have at least 5 tabstops in a card, you should use a skip link. This will allow users to jump over it. Our product cards on a product listing page sometimes include multiple links and buttons. We don’t want users skipping them. This complexity makes it harder for users to navigate. We want to make it easy for the end user to view all the products. They should get the details when they click through to the PDP.
Have thoughts? Come find me on LinkedIn and BlueSky to discuss!