Gestalt Principles!
A lot of fun today learning how to engage the user’s mind using Gestalt Principles. We’re “wired” to make patterns out of chaos. Instead of seeing disconnected edges, lines, and areas our brains see whole shapes, figures, and objects. Let’s get into it!
Proximity
Proximity is an easy one. Having objects spaced evenly apart will make them appear grouped. This is useful in UX Design when creating interfaces. Keeping elements evenly spaced will help them make more sense to our users. In comparison, a poorly spaced design will make a user interface difficult to understand and interpret.
Similarity
Very similar to proximity, but with different objects. The outlined icons in the image above will still be seen as a part of the group of black icons since they’re evenly spaced within them. This is useful with forms, controls or other elements that may be related, but not identical to each other.
Continuity
This principle is how we can see missing segments or parts of an object. In the image above, our brain tends to connect the missing segments of the traveling line to form a full object instead of seeing four separate line segments. Very useful information for generating visual interest!
Closure
The Closure principle is similar to Continuity. In the image above, we have randomly manipulated polygon shapes. We actually tend to see a soccer ball! Our minds are trying to make sense of the polygon shapes using the surrounding white space. Order out of chaos!
Symmetry
In the image above, we begin with two overlapping diamonds, or at least that’s what we want to see! Symmetry is how we breakdown complex shapes into information we can easily process. In reality, the shapes could be two touching arrows or two arrows with a square between them. Using this knowledge you can create a 3d object on a 2d plane.
Figure/Ground
Figure/Ground is how we tend to layer objects into a foreground and background. In the above image, we have a heart that appears to have wings behind it. In actuality, there is no heart. A very useful trick to create depth in UX Design.
Common Fate
Common Fate is related to both the Proximity and Similarity principles. We see groups from objects that move together. We see a group of birds flying together in the image above. If the birds were all flying in different directions, they would appear as individual birds. Very useful information when creating animations for interfaces in UI.
I’m sure we’ve all seen these practices before everywhere in our daily lives. It’s another thing now that I know what they are and how they work!
