Skip to content

Find a way to visually separate unrelated UI elements

Based on this Slack discussion and this issue.

Law of Proximity (Gestalt)

"objects or shapes that are close to one another appear to form groups". Even if the shapes, sizes, and objects are radically different, they will appear as a group if they are close.

There are cases when unrelated UI elements seem related because of their proximity to one another. Some of these cases could be (at least partially) solved through rearranging the UI elements but sometimes that won't be possible. We need to find a way to visually separate things that are close to each other but not related.

An example to solve:

image From the commits page

Possible visual separators:

  • spacing (margin)
  • a divider (thin vertical line)
  • ...?

image Examples of the two solutions suggested above

The problem with spacing is that sometimes we simply don't have a lot of it.

The problem I see with dividers (although very effective) is that we already use a lot of lines in our UI.

I'll open an issue on CE to document and correct such cases after we reach a conclusion of how we should approach this.

/cc @sarrahvesselov @tauriedavis @pedroms @dimitrieh @cperessini @jkarthik @hazelyang @andyvolpe

Edited by Matej Latin