Categories
General UX Bites

UI Cards guidelines: Should I add CTA button in UI card?

Before answering to the question that whether you should add a CTA button on UI card or not. We first need to understand what is a UI card?

A UI Card is a design element that groups similar information together in a card from, which help create a separation between similar looking elements.

Should I add CTA button in UI card?

There are a few types of UI cards and adding button on Card depends on the type of information the card is trying to communicate and the nature of action expected from user.

Lets take an example –

Content Card

Content card is created to give a short summery, content card represent a chunk of information from the content. Content cards are clickable cards that allows user to take a decision based on the chunk of information previewed on the card.

In this example we have a hero image to grab the user attention and a short description. UI cards are generally clickable and if the card is anyway clickable then why do you need a button?

also read –

https://minimalistuxstudio.com/step-by-step-create-and-edit-a-figma-component/: UI Cards guidelines: Should I add CTA button in UI card?

Now see the below image

If you have n no of cards in your design the CTA buttons on every card all the CTA’s will compete for attention. Making UI hard to focus and in return affecting users ability to take action.

The time it takes to make a decision increases with the number and complexity of choices.

Hicks Law

Now lets remove the CTA buttons from the cards

This is how the same design will look without buttons, Clean modern and easy to scan.

If your UI card has only one CTA and if user can perform the same action by clicking on the card itself then you don’t need to add CTA button on content card.

Now lets talk about second type of card

Feature card

Feature cards are different then conten card, a feature card can be used to describe the features of perticular product or service, well a product will have more then one feature and to explain them in brief every feature will have a brief explanation on a seperate page, in this case user might think that the given explanation is only available information about the product so there is not enough clearity if you can click on the card or not so it’s better to add a hyperlink text saying learn more to expand the text or add a secondary button to avoid confusion.

Product card

Product card is different then Feature card, you have a product thumbnail pricing, product name and rating to gain user trust but to increase sales you need to reduce friction and to do so you can just provide an option to purchase or add to cart a product on card view itself. Along with that if a user click on rest of the card aria user will be taken to the details page of the product.

That’s why on product page to reduce extra bit of friction you might want to add ‘Add to Cart’ and ‘Buy Now’ button.

Action Card

Action cards however will have a single option it can be sign up for newsletter or offer card which will have a large heading and a short description with a image to grab user attention, in case of action Card you need to add CTA to let the user know that action they are about to complete by clicking on it. Also make sure you add a secondary button to cancel or close the pop-up. You can add a cross icon on top right corner of the pop-up.

Summary

You don’t need to add CTA to a card if it’s taking user to a page that can be predicted by reading the content on card itself (given that card itself is clickable)

For Product card and Action Card UI you must add a CTA. 

Read more on this topic

https://bootcamp.uxdesign.cc/4-popular-types-of-cards-in-ui-design-c805406ea0f3

https://www.eleken.co/blog-posts/card-ui-examples-and-best-practices-for-product-owners

By Hrushikesh Paygavhan

UX designer at Customer Capital. With 7+ years of Design experience, I belive in passing the knowledge to everyone. I help UX designers upskill themselves, and stay updated in the design field.

Leave a Reply

Your email address will not be published. Required fields are marked *