1

If card is having button, CTA will be more clearer but it'll be more useful from usability point of view if card completely clickable... So in mobile, will a card with button or a completely clickable card be more useful from engagement point of view?

1

The answer is it depends. As you have marked this as "accessibility" I will weigh in on that the most, luckily it links to usability quite nicely.

Please note I have also answered this as if you are creating a web app / web page as you didn't specify the platform, the guidance is the same but implementation details may be different if this is for an app etc.

Whole Card CTA vs Button

A whole card CTA is useful as it is a large tap area, but other than that it introduces a lot of accessibility issues and I would encourage you to avoid it in most circumstances.

If you make your whole card clickable (i.e. a hyperlink) then all of its content becomes the link text. If I am using a screen reader instead of a call to action I get the whole card content read out to me which is very likely to reduce the chances of me actually clicking the link (as I will probably get frustrated by the amount of text!).

The other reason this is a bad idea is that screen reader users may navigate the page by links to get an idea of what is on that page, yet again a massive long link text will probably get skipped and hurt your conversions.

From an SEO perspective this also makes your link text less potent, although that is a very minor point.

The next problem with a whole card click area is on mobile phones for people with dexterity / coordination problems.

If the card takes up a large portion of the screen someone with Parkinson's Disease for example may accidentally click the link thinking it is an area that is free to allow them to scroll. This can result in frustration which will yet again hurt your conversion rates and potentially could result in a bounce if it happens to a user more than once.

The final problem is that if you ever want to have another link as part of the CTA introduction text / sales text you can't. Nesting hyperlinks would make the world explode (ok I am joking, but it doesn't work and causes serious problems!), so you would never be able to do that going forward if you use this pattern.

Ok so button appears to be the way forward, what should I consider?

This section contains a lot of general guidance that isn't directly related to your question, apologies I went on a bit of a rant but as it is useful info anyway I have left it in!

Make the button full width on mobiles. Many screen reader users on a mobile phone will swipe their finger down the middle of the screen in "read under finger" mode to see what active elements there are. If your CTA is a small button off to one side it may get missed.

Secondly make it at least 48px (effective pixels) tall as a minimum. Going back to what I said about people with dexterity / coordination problems a large click target is preferable. For a CTA I would encourage 60px minimum if your design allows.

The text within the CTA is important too. As I mentioned earlier many screen reader users will look for all links on a page, if your link contains "More Info" or "Read More" it may not make sense out of context and you lose a possible conversion chance.

Make your link text descriptive of the action it performs ("How we can help you" or "The benefits of working with us" etc.). If you are struggling for space you can use visually hidden text as a way of including more information. See this answer from stack overflow I made about visually hidden text. The preference would still be to make your link text descriptive of the action it performs for usability.

Colour contrast is important too, but if this is a CTA I would expect it to be bold coloured anyway. Use the colour contrast checker to ensure your button reaches minimum requirements, added benefit is it makes it stand out! I know you didn't ask about how to present a button but the same rule applies to your card if you made the whole thing clickable, the whole thing should be high contrast and stand out!

Also I keep switching between calling it a button and a hyperlink. This is because i do not know what action your CTA performs. Semantics are important for accessibility so make sure if the action is performed on the same page it is a <button>, if it changes page make it an anchor <a> (a simpler rule is if the URL changes it is a hyperlink, everything else should be a button!). Obviously this advice is for a web page, for mobile apps there are different methods to use.

One final part is expected behaviour. Expected behaviour is the key to usability and accessibility.

If I see a card that looks inert I would expect to be able to click there without any action being performed. Maybe I like to tap my mouse in time with music as I navigate your page. Yes I am aware that I am probably an edge case but you get the point!

If you want to make a whole card clickable you need to indicate that somehow.

I would also imagine if you did a heat map on a card that is clickable with a CTA button in it 99% of clicks be on the button anyway, so why introduce headaches making the card clickable? (unfortunately I have no data to back this up just experience from heatmap analysis etc. so take it with a pinch of salt)

So when should I use a whole card CTA?

I started this answer with "it depends". As you can see in majority of cases a button is preferable. However if you card has one sentence, doesn't need an additional hyperlink in it and does not take up more than half the screen on a mobile view then make the whole thing a button / link. It will still be accessible and a bigger click zone is always useful, there just aren't many cases where I would build a "card" with so little info.

After that rant what should I choose?

The answer is still "it depends". Obviously I would lean heavily towards a button but......

As long as you implement it correctly so as not to introduce accessibility problems you may find that a whole card CTA actually increases conversions over the CTA button so A / B test it.

What works on one site / app (or even 100 other sites / apps) may not be true for you and your audience so testing and monitoring conversions is the only way to know what is better.

  • Great answer. As it piqued my interest, could you elaborate on the "different methods" you refer to here "a simpler rule is if the URL changes it is a hyperlink, everything else should be a button!). Obviously this advice is for a web page, for mobile apps there are different methods to use." – dougajmcdonald Aug 10 '20 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.