4

Is it okay to have a button on a clickable banner/card? The button acts as a decoration just to take the user's attention. The button and banner have the same action.

Design reference: Green button on a light grey banner.

What do you guys think?

enter image description here

4 Answers 4

7

To have a clear call to action on the banner is helpful. It makes it very clear that there is an action and even what action is on the banner. Some users will click the button and not the banner but that's absolutely OK.

Having said so: not knowing what the banner is about and how the banner relates to the rest of the site, I would keep in mind that the button on the image above stands out. So if the action of the banner is the goal of the site than this is a good thing. But if the banner brings the user away from the user's goal it might not be such a good idea.

5

Yes, it is a VERY GOOD idea. Keep in mind otherwise some people won't realize the banner is clickable.

As for this part

The button acts as a decoration

I think here's the reason of your doubt. A button acts as a visual cue that provide affordances, and it's an actionable element. It never is a "decoration" (well, at least it shouldn't be). However, the background of the clickable section can be informative or just a decoration. In short: the button or CTA usually is the most important thing on that section.

0

To have a clear call to action on the banner is helpful. but some time it also depend on the type or content of the banner, you can look at some of the e-commerce platform banners that don't have call to action.

for ex: e-commerce platform banner

Because this banner is a suggestion to the user, if user is interested then user will perform call to action on banner and check out the content.

0

In this case, maybe not. Large click targets are generally a good UX practice, so we try to make the click area as large as possible.

However, I'm noticing something in your design: there is a similar-looking card right below it with its own button (looks like a forward or share button). Is that entire card clickable? You just trained your user to understand that cards are interactive, and probably can't mix clickable and non-clickable cards.

Buttons are coded as <button> elements with their own accessibility attributes that make them accessible by keyboard. Making the whole banner one clickable image creates problems for users who are using keyboard and screen reader controls.

I would recommend making the button a regular button, and not making the rest of the card clickable. It looks like a primary button already, which should draw enough attention, but if you feel like it's not standing out enough, you could knock back the similar green illustration of money on the right and subordinate that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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