11

I've noticed this on the SE network, and realised that when a clickable link is nested in a clickable item, users (me at any rate) tend to forget that the item is clickable. It took me a while to realize that the gray bar was still clickable (even though I've been clicking the other gray bars for a long time now).

enter image description here

Note that the gray box and the [revision] link have different behaviours--one loads the new edit, the other opens the revision history.

How could one improve this?

More generally, how should one go about nesting clickable items? Should one nest an "obviously clickable item" (eg link) in a non-obviously clickable item? If one does that, how should one go about making it obvious that noth thingies are clickable?

(Note, I am asking for this to be improved at MSO as well, I just was curious about the general UX principles)

Improve this question
0

2 Answers 2

Reset to default
7

I ran into this about 5 minutes ago and didn't even know that the box was clickable. I think nesting these two clickable items increases the cognitive load for the user. In the process of considering clicking the grey box users must decide if they want to click on the revision link instead and are forced to remember that they have two options in this situation.

I think an easy solution would be to remove the 'revision' link and simply have the grey box say "an edit has been made to this post, show updates?" and have the entire box be a clickable button. Having the answer update inline would also be less jarring to the user than clicking 'revision' and being taken to an entirely different page.

Improve this answer
2
1

I'm not what you're describing is an improvable situation. You're dealing with a by-product of Fitt's Law:

Essentially the larger the click areas of the item, the easier it is to click it. Your target (in the example above) is the word "revision", however it's target has been expanded to the light brown box. This is because the designer is savvy.

You can certainly still click the word revision, but when your mouse enters the box you receive the visual cue of the cursor turning into the pointer hand (mouseover). Now you understand it's clickable.

When I say it may not be improvable, I mean that hyper-text links are a commonly understood convention. Callout boxes, however:

  • do not always contain a link if they do contain a link,
  • are not consistently clickable
  • are typically design per the brand of the site which features them

In other words, callout boxes are not consistent enough to set expectations. They're designed to focus user attention on a message. If the designer is savvy and the alert supports it, the box will be clickable.

Improve this answer
6
  • 1
    As a side note: I believe the callout box "click-ability" would be expected for mobile users compared to the target size of the hyperlink.
    – Dan Michael
    Commented Apr 24, 2012 at 11:49
  • 1
    Nice answer, however, it does not address the issue with link within the callout box that attracts the attention away from the rest of the callout box and links elsewhere.
    – Danny Varod
    Commented Apr 24, 2012 at 11:57
  • I'm not sure I follow...are you saying because the link is in a box it doesn't appear clickable? Or are you saying that being in a box causes you to "forget" it's clickable? Adding a text underline (which you should do for all inline links) would solve the first. I'm not sure I understand the second.
    – Dan Michael
    Commented Apr 24, 2012 at 13:48
  • @DanMichael It's because they don't go to the same place. Your answer implies that the 'revision' link and the target of the entire box are identical; as I understand it, they are not.
    – Myrddin Emrys
    Commented Apr 24, 2012 at 13:57
  • 2
    Wow - I completely missed the annotations on the drawing. You're correct - my answer does not apply to the question. Having a small clickable item nested within a large clickable item - which have different destinations is an egregious design solution and should be avoided like the plague. It's so bizarre and unexpected I still can't wrap my head around it. I think the solution is to simply avoid nesting clickable hit spots.
    – Dan Michael
    Commented Apr 24, 2012 at 14:13

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.