14

The image below, which can be seen on this medium article uses lines to separate various graphics, but could also use different backgrounds, which is something pretty common when designing dashboards. My question is, wouldn't the principle of proximity be enough to group the related images and text and separate them from the other elements? When do we use this principle?

enter image description here

Improve this question
2
  • What is the source of the image? If you haven't produced it yourself, you really should indicate the source (both ethically and legally).
    – Andreas Rejbrand
    Oct 9, 2019 at 19:18
  • Andreas Rejbrand Thanks for the heads up!
    – Carla Graça
    Oct 9, 2019 at 20:05

2 Answers 2

Reset to default
25

The proximity principle used as a frame works correctly when there are at least two or three elements generating the container virtual limits:

References points

It works more as a closure law:

enter image description here

Or the content has a central visual axis strong enough to lead to interpret it as a single element:

Central axis

Following this, the top text is perfect because there are four delimiting elements defining the container frame:

Top text

But in the case of the images, the content irregularity alters the proximity law by isolating the reference axes to a single element, the lower/right text, which brings us dangerously closer to the fourth option in the top graphic of this answer:

enter image description here

Possible solutions

1 - Increase the margins exaggeratedly to isolate each image as much as possible so it's interpreted as unique grouped elements:

margins

2 - Add graphics or info elements to recover the second or/and third reference point:

reference

3 - Use a background, it works as an irregular container

enter image description here

4 - Reinforces the content central axis:

axis

Improve this answer
4
  • This is great! I read a lot on gestalt but I've never read about reference points in the principle of proximity. Can I ask, where could I read more about this? I don't understand though, where in your examples of using a background those reference points that are missing are recovered. From what I gathered, based on what you've written, using any visual dividers (as per following the principle of common region) would only be necessary if none of your solutions could be used. Is this correct?
    – Carla Graça
    Oct 8, 2019 at 16:10
  • I tried to avoid using visual dividers in my answer since you have included it in your question, but yes, it would be the fifth solution. Actually when using a background (the third solution) it works like a divider, not orthogonal like in your example, but irregular giving more dynamism to the picture frame.
    – Danielillo
    Oct 8, 2019 at 16:49
  • @CarlaGraça I updated the answer with some more details
    – Danielillo
    Oct 8, 2019 at 16:59
  • Thanks for the detailed explanation! So, if I understand correctly the top text with the 60% doesn't need any visual boundary as it is properly contained with closure and at a sufficient distance from the graphs to not be grouped with them. The distance between the text with the graph on the left isn't enough from the graph on the right, so the grouping isn't obvious. Is this the idea?
    – Carla Graça
    Oct 10, 2019 at 9:13
3

I never saw a rule for it and I believe is very difficult to create a rule for it because depends on the design, the fonts, the colours and the type information that you are showing there.

For example:

  1. If you just have graphics with no legend, spaces should be enough to separate
  2. If you just have tables they will auto separate because of design but if your table has no line, no background could look like only one table.
  3. If you have a mix of tables and graphics you will need the div lines to not looks like a mess.

The best way is to create variations of design and compare. Is difficult to decide without design and look on the real.

Looking for some examples (bad and good) you can see that this should not affect the user experience.

Is better to care with:

  • What type of graphic you will use
  • The orders to show data
  • The data that you will show there
  • The colours and how you will highlight what matter
  • How to prevent a polluted screen

enter image description here enter image description here enter image description here enter image description here

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.