enter image description here

(Picture and text above borrowed from Sky news).

In the example above, you can either make just the heading clickable (example to the left) or the whole piece of text (example to the right).

If you go with the presumable more accessible example to the right, you will increase the clickable area, but mouse-users will have problem copying the text. If they try, they might accidentally click on the link instead.

Question: Which option would you suggest and why?

  • Screen reader users can use a shortcut to get a list of the links in a page. If the example on the right is a link, the link text would be very long. If you make the text clickable by means of JavaScript instead of a, is the area on the left too small? (Did user tests show it was too small?)
    – Tsundoku
    Nov 4 '16 at 10:25
  • 1
    Yes, the text will be clickable by using javascript. That is to make sure the entire div will be clickable and not just the text as this will enlarge the clickable area. No user tests have been preformed yet, but we're planing on doing. Nov 4 '16 at 13:09

Based on some click tracking heatmaps we did at Archant a few years ago, we found the most clicked areas by far were:

  1. Image
  2. Headline
  3. "Read more" link

If you are using a click tracking software that registers clicks on non linked areas, you should be able to measure for your audience, without making the area clickable.

Also useful if you can track "click and drag" actions as well as just click.

  • Interesting that the image got the most clicks. Thanks for that valuable piece of information. Nov 9 '16 at 14:09
  • We did also notice that people clicked a human face, if present within the images too. I've seen similar with gaze plots, that we gravitate to other faces - blog.kissmetrics.com/eye-tracking-studies Nov 10 '16 at 15:48

If someone's eager to select that small snippet, as opposed to going to the full article and selecting from that, then assigning only a smaller bit of text (left alternative) isn't going to save you, since they might well want that too.

Everyone probably encounters the problem from time to time. I always start and finish my selection well outside the link area, thus not triggering it. Mostly that works, though sometimes it's tricky to do and I end up triggering the link anyway, so it is a real problem.

But the solution is easy, tho not elegant: just supply a bit of dedicated boilerplate text as the link ("Click here to read entire article")

  • I do love your solution, but in this case that cannot be done due to other reasons. Therefore my question. :-) Nov 4 '16 at 12:46
  • 1
    Well, the most-used convention other than a special "click here", is to make the headline the link (your example on the left), with a :hover that causes a distinct color change to tip people off. A less-common, but still frequent convention is to make both the photo and the head a single link (providing a bigger area), also with a :hover change. The advantage of that second convention is that it would be easier to select and copy the entire text without triggering the link.
    – MMacD
    Nov 4 '16 at 19:26

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.