5

I would like to know if there are any mathematical formulas that define the Gestalt Law of Proximity. example of law of proximity

For example, in the picture above, at what distance of Y would the 4th square be perceived not a part of the group?

------ Update: I apologize for not giving enough details in the question earlier

  1. The context is for on-screen elements, say on a website, so all 3D attributes, viewing angle can be discounted.
  2. Assume the elements are identical to one another. Same colour, shape, size, border, etc...
  3. The only differentiating factor is the PROXIMITY.
Improve this question
5
  • I think it isn't possible to formulate mathematical formulas on subjective perception. – GittingGud Apr 29 '19 at 12:37
  • I agree, it would be impossible to be 100% certain on when that separation between groups happens. However, when we design, we only design one version for a context and most of the time, most of the users perceive that spacing just fine. Not sure if it can be represented in a formula that might just suffice. – guy_who_designs May 1 '19 at 11:02
  • 1
    If you're someone who has a genuine interest in information visualization (which your question leads me to believe), you might want to check out Edward Tufte's The Visual Display of Quantitative Information, from 1983. I haven't read it in it's entirety myself, but this industry tends to think of this resource as a highly respected work that has many practical applications in modern visual design. From what I've seen of the book, I have to agree as well. – maxathousand May 1 '19 at 16:12
  • Thanks for the pointer, that book is surely going on my reading list :) – guy_who_designs May 2 '19 at 8:26
  • As this is about perception ( ie processing in the brain ) you might find that there is variability in how different people's brains work. – PhillipW May 3 '19 at 11:13
3

I don't believe there is a common mathematical formula for that. Especially with perception theories. It would heavily depend on

  • your user's screen (if it's a digital application?);
  • angle and physical distance of viewing your overall object;
  • user's eye condition (someone with astigmatism and without correction lenses?);
  • units of X and Y distances (in your example) and etc.

But if I had to 'guess' the answer to your question, depending on various conditions... it would probably simply be

Y > X

PS: Keep in mind, it's not just the distance (literal proximity) that grouping can be achieved with; but also with same/different values, colours, shapes and sizes, thicknesses, sounds, etc.

Hope this helps a little.

Improve this answer
2
  • 1
    I apologize for not giving enough details in the question 1. The context is for on screen elements, say on a website, so all 3D attributes can be discounted. 2. Assume the elements are identical to one another. Same colour, shape, size, border, etc... 3. The only differentiating factor is the PROXIMITY. A simplistic formula like "Y > X" will not suffice. Imagine X = 50 and Y = 51, there is no way they will be perceived as 2 separate groups. However, X = 50 and Y = 100 will surely be perceived as 2 separate groups. My question is when does that separation happen! – guy_who_designs May 1 '19 at 10:48
  • Trying to equate with three elements will be testing the concept to its limits. It will be easier to predict when there are more objects. – Ren May 3 '19 at 5:16
1

No, there isn't, and there never will be. Just test with your users to find out what works best. If there were equations for things like Gestalt Laws, designs would be programmed using AI by now.

Improve this answer
1
  • Well, Designs by AI, that is exactly what I am exploring, hence my question ;) – guy_who_designs May 2 '19 at 8:28
0

This question got me thinking.

Your values x and y represent gaps which convey different meanings based on sizes relative to each other.

I'm sure there's not an exact, scientifically proven, and precise multiplier for y, but I started thinking about other web design elements that rely on relative sizes to express meaning.

The first thing that I thought of was headers. Their meaning is entirely defined by their sizes relative to each other, so these sizes have to differ enough for users to detect.

Looking at the W3C's defined default header styles, I figured the scale between each h* elements to range between 1.17 and 1.33, with the average of each size increase to be ~1.23.

So that's where I'd start with your visual design. Try adding 20-25% more spacing between groups, and see how that feels.

Ultimately, you're designing for humans, and human perception is not an exact science and varies from person to person. There will be people who can notice an extra 10% padding, and also users who fail to notice an extra 40%. It's all about trying to make it work for the majority, and providing additional assistance when possible (meaning, if testing proves this to be difficult for many users, you may consider a "high contrast mode" or similar setting that actually draws boundaries between implied groups).

Improve this answer
0

It's an interesting question but perhaps strives too far from the practical in to the abstract.

We could try to figure out the ratio between X and Y at which the average person would draw the difderence. We'd have to compare the ratios of items vs whitespace, screen size and viewing distance, and all sorts of variables. But say we end up at a ratio of 1.2345 - would you actually use it?

If some see the difference at 1.1 and some at 1.5 would you go for the average and confuse about half the audience? And would you be willing to sacrifice sticking to a grid for it? Or would you play it safe and use a whole gridblock as a gap?

Improve this answer
0

To answer your question I would refer to Von Restorff effect

"...also known as the "isolation effect", predicts that when multiple homogeneous stimuli are presented, the stimulus that differs from the rest is more likely to be remembered. The effect is based on the isolation paradigm, which refers to a distinctive feature of an item in a list that differs from the others by way of dimension. Such distinctiveness, leading to the von Restorff effect, can be generated from changing the meaningfulness or physical nature of the stimulus in some way, such as in size, shape, color, spacing and underlining"

A more in depth analysis of the Von Restorff effect is made in The subtlety of distinctiveness

"The isolation paradigm is one method for manipulating the variable of distinctiveness, and the isolation effect thus comes to be viewed as an instance of distinctiveness effects in memory. The intuitive explanation of the isolation effect in particular and distinctiveness effects in general is that the perceptual salience of the distinctive event attracts additional processing"

Hope this helps. Cheers!

Improve this answer
2
  • 1
    Would you be able to include some relevant excerpts from these sources? Even a simple description of what these concepts are would be effective in bolstering this answer. – maxathousand May 1 '19 at 16:29
  • ^^ All done, thanks for the suggestion @maxathousand – Mircea Anton May 2 '19 at 10:10
0

No, but there is for Fitts' Law, which is well explained here: https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/fitts-s-law

It's not the same thing, but might provide some helpful aside insight.

Improve this answer
2
  • 1
    Can you please provide more details to define in which way this is relative the question ? – Brice May 2 '19 at 16:53
  • I am afraid Fitts' Law is totally different than Gestalt's Law of Proximity. Fitts' Law talks about point and click actions while Gestalt's Laws talk about perception. – guy_who_designs May 3 '19 at 11:22
0

Some answers suggesting trial-and-error got me into action:

enter image description here

The spaces between the elements are 1/3 of the elements width. And the supposed group space is based on the golden ratio - an eye-pleasing phenomenon known for couple of thousands of years. If you want to translate into numbers, the space ratio here is 1:1.618 (thus 61.8% wider).
There is some irregularity in the placement, however it's difficult to say whether the two elements on the right form another group.

Let's make the spacing twice as big (200%): enter image description here Something comes up, however not clear yet, I'd say.

Another attempt is to use the space width equal to the element's (average) width: enter image description here Seems clear to me.

Last possibility would be a "missing element" (2 x element spacing + average element's width) to check whether the groups are not to far apart: enter image description here Pretty obvious, perhaps not really feasible if space is at premium.

To summarise - should you not find any mathematical rules, you can use the examples as guidelines to establish your own rule for the design.

Improve this answer
0

As the Gestalt Law of proximity is a perception theory we would assume that there is no way to formulate a calculus that would give exact values.

The proximity is in effect simply based on perception. Keep in mind that: " perception may be defined as a process by which individuals organize and interpret their sensory impressions in order to give meaning to their environment"

So perception is an individual unique feature as not all people see or perceive the same.

The only way to know that your design is putting proximity in good use is user testing.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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