Is it good to have too much space in-between typography and icon (arrow) on a link? For instance, when looking at the Adidas website on tablet and mobile you notice that there is a lot of space in-between font and icon (arrow)? Is this good in terms of accessibility? I would say no because of the gestalt point of proximity. What is best for the user and why? Could you help with some academic / official source documentation that justifies your position on this?
1
-
Its not a good idea because it demands more cognitive effort from a user to read and could contradict the Gestalt perception principles that explain that humans tend to perceive patterns around them. The law of proximity is part of these principles and explains that people will connect to two elements better when there isn't so much white space, also referred to as negative space. The law of proximity helps users understand information more quickly and visually it will require less from people with low visual ability too.– Estela GasparMar 3 at 13:13
Add a comment
|
2 Answers
The question is based on a misconception, you may have to adjust the content to a real example where the described situation occurs to get an academic / official source documentation answer ;-).
For a situation similar to the one described to become an accessibility problem, it should meet the following requirements:
- The icon must or should refer directly to the name
- The icon must or should belong to that name
In this case, the separation is so pronounced that in a digital environment it can lead to a misinterpretation of the association of both elements.
But the Adidas example does not meet either of the two requirements.
- The icons do not refer to the label, there is no man, woman, kids, or shoes
- They don't belong to the label but refer to the table row indicating that it's collapsible
Therefore, regardless of whether or not the row has its corresponding outline, the action of the icon is on the entire row that corresponds to the label, not on the name itself. Gestaltically, the name marks the beginning of the row while the collapse icon closes it: closure law, situation even more evident as both elements are located on each side of the screen.
answered Jul 1, 2022 at 16:09
You're right, there are accessibility issues, and you're right again, it conflicts with the law of proximity of Gestalt.
These problems are important from a cognitive point of view, but they don't affect functionality. If you click anywhere in the line, you get the interaction you want.
So some accessibility and cognitive cues have been sacrificed to achieve a more uniform appearance. If the arrows were at the end of each navigation element's labels, it would cause other problems, both in terms of consistency and cognitive friction, since the arrows would be scattered everywhere.
In short, while you're correct in your assessment, this is a classic UI compromise. And as long as the functionality is preserved, we can say that their solution is correct.
However...
What worries me is your second image. The chat icon above the arrows is certainly wrong, and there's no way to positively evaluate this floating element above an actionable element and its visual cues.
