4

I am trying to understand what's the meaning, name and functionality of a button without any direct action beyond what I suppose is interactive decoration, something similar to this question/answer, but in this specific case.

On runwaymagazines.com there's a central text-block icon in a button shape that overrides the pointer cursor and whose only function is to cancel the link. I suppose it's to allow the content to be read clearly, but it can already be read without activating anything. Maybe it has another reason, but it's beyond my knowledge.

enter image description here

Improve this question
4
  • 2
    TBH I don't recognize it as a button, but a decorative element, kind of an icon informing there's more content. Furthermore, if I had to think of an interaction, I'd think of a "drag" action. In short, it's kinda confusing, but I guess your tag "placebo buttons" (never saw that one!) is proably the best bet
    – Devin
    Jul 11, 2022 at 14:21
  • 1
    On iOS touch+holding the button will allow you select the text which would otherwise be impossible due to the link. On desktop it works by double clicking but the selection has to be made with the keyboard. Anyway, a great example of design with accessibility as an afterthought. It doesn't work well and, as @Icaval mentioned, it also completely lacks affordance.
    – jazZRo
    Jul 11, 2022 at 14:28
  • 2
    @Devin I didn't know about Placebo Button either, I discovered it when asking the question, but I don't see it as necessary knowing that the entire card is clickable. I asked the question because I don't know if it is for some type of user with special interaction characteristics.
    – Danielillo
    Jul 11, 2022 at 14:29
  • yes, simply mentioning this is a quite weird yet interesting element. Original to the very least, not sure about its affordance
    – Devin
    Jul 11, 2022 at 14:31

4 Answers 4

Reset to default
11

enter image description here

I think it's a coding error. This does not appear to be intentional, but if it is it would be an odd interaction choice to be enforced by the designer. Not only is the interaction not necessary in this context but the elements are essentially invisible to screen-readers and other assistive devices that follow WCAG guidelines.

The paragraph/article icon and white circle background are created with CSS pseudo-elements: ::before and ::after. This obfuscates the native anchor link interaction.

Ref: https://stackoverflow.com/questions/51371796/after-and-before-pseudo-classes-blocking-anchor-tags

What the developer missed was adding pointer-events: none to the classes of these pseudo-elements. This would remove this odd interaction and the entire card would act as a link.

Try it out in dev tools.

Improve this answer
4
  • 1
    It has its logic. Actually, with your answer, I am starting to understand the icon just with a graphic intention: to show the image and the text around (left-right or right-left) belong to the same element. By now, the pseudo-element error makes more sense. Without the icon, it would not be clear which image belongs to which text.
    – Danielillo
    Jul 11, 2022 at 16:03
  • Correct. To further address your original question, "meaning, name and functionality of a button" this is not a button it is a pseudo-element. Although, it could be used as a button it shouldn't. Accessible Web recommends avoiding using these elements [with content] altogether as some assistive devices may attempt to announce them: accessibleweb.com/question-answer/…
    – Djame
    Jul 11, 2022 at 16:07
  • On a visual level, the most confusing part is the cursor type change.
    – Danielillo
    Jul 11, 2022 at 16:15
  • This is also very plausible. Still I wonder if it wasn't intentionally implemented this way to make the text selectable/copyable, or for whatever reason. Otherwise I can't see any logic behind the choice of icon and behind putting the element there. Indeed a very odd choice.
    – jazZRo
    Jul 11, 2022 at 16:24
4

This isn't a very standard interaction. Typically things meant to be clicked on are a solid block and change state to explain they're clickable. This idea of a "no click island" is novel, but not best practice.

A commonly used word in UX is "affordance." A doorknob is an affordance, and so is a light switch or button on a website. In this case I'd say the feedback for the affordance is enabled everywhere except in the middle.

Improve this answer
4

I see this differently. To me it seems that the designer has added an icon to make it look like the image and the text are bound/stuck together. If we remove the icon, it will look like two separate identities, and the user might get confused on the outcome of what will show when they click one of them, and also might find it hard to decide which one to click. (If you notice upon clicking any side of the page, what opens is the same).

There might be technical error, but this is what I could make.

Improve this answer
1
  • I agree that the design element was attempting to associate disparate components.
    – Djame
    Jul 11, 2022 at 19:52
0

My point of view is, they are using this icon to make user perceive each cover (single magazine content) as a single content. As they're using grid layout, that circle-filled icon is allowing users to understand the context of the design and know which is related to one another.

According to law of proximity, it states that items close together are likely to be perceived as part of the same group

If you scroll that page couple of times, a perception of each content separation by that icon will be created to your visual mind.

Improve this answer

Your Answer

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

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