On the meeting with website stakeholders I was asked why not make hero area clickable and lead to promotion page in addition to CTA button leading to the same promotion page?

Since it never occurred to me that one could want to do that I found nothing better to say then "It is not how web works". For me it is not what people expect and it violates POLA principle, but is it really?

I'm curious what are the pros and cons of clickable hero images?

  • 1
    I must say it's going to depend a lot on what your hero images is/says. Lots of eCommerce sites use hero images as large clickable ads that link to deals.
    – DasBeasto
    Commented Jun 19, 2017 at 17:00
  • 1
    Quite honestly I think it's a matter of testing. I don't know of any case like this, so can't tell. I'd say it's wrong, but other than some minor implementation perks and a darkpattern-ish sensation, I can't tell exactly why, so again: test and see what happens
    – Devin
    Commented Jun 19, 2017 at 17:17

1 Answer 1


When in Rome …

Clickable hero images are very common in e-comm.
Does it work? The big players seem to think so:
Amazon, Walmart, and eBay all do it.

Fitt's Law is the most obvious supporter, from a simple click-target perspective. After years of testing, many e-comm properties have slowly evolved away from having buttons on their main banner.

What does the button do?

Nothing, technically. It's a psychological trigger (you know, a call to action) that may or may not be necessary on the web today.

If the hero is well written and designed, it becomes a clear action with or without a button. People have come to expect interaction everywhere things can be purchased.

If you do include a button, it's good practice to have some state change when you hover the whole area. I've seen just the button change and the whole area and button. I've tried both solutions myself and don't have any hard data on one being better than the other.

YMMV: test it!

You have three good options to start with:

  1. Hero with clickable button
  2. Clickable hero with a button
  3. Clickable hero with no button

Test each option in a guerrilla or lab setting to see how clear your call to action is. Then split traffic in production and try each. The numbers will tell you if there's a clear winner.

  • 1
    In my case it is not exactly eCommerce site, it's a product company and hero area is more a screen wide "emotional connector". Plus, I'm not sure that it is ok to apply Fitt's Law like this. It is about distances between intractable elements and its sizes. There is no benefit in oversizing your buttons. Commented Jun 19, 2017 at 19:54
  • "There is no benefit in oversizing your buttons" I'd challenge you to prove that with data 😁 Commented Jun 19, 2017 at 20:35
  • :) Thankfully It is the "law", we all collectively choose to obey and follow for some reason. See "Bigger Is Not Always Better" part. Commented Jun 19, 2017 at 21:32
  • However, in this case, you're not talking about consuming more of the screen. The screen space is already in use, it's just a matter of whether it's interactive or not. That's where the testing thing comes into play. Commented Jun 19, 2017 at 21:59
  • I can agree on testing part. Commented Jun 20, 2017 at 12:26

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.