Stick em up
A group of students sitting together at lunch are usually perceived as friends, but we are also aware that it might not always be the case. So why do we still think in this manner? The principles of grouping were first suggested by the Gestalt psychologist by observing that humans naturally perceive objects as organized patterns and objects, a principle known as Prägnanz. They claim that one’s tendency to group is based mainly on 5 factors: proximity, similarity, closure, continuation and motion. Let’s have a look at each of them in detail so you can use these principles in your designs.
Proximity
Just like one thinks of students eating together as good friends, objects that are placed closer together seen as part of a group. So, there should be a noticeable gap between item of sections in your website or app for people to distinguish between groups. Putting all cards vertically like Pinterest would make it very difficult for the user to prioritize options that he/she needs.
Similarity
Let’s take up an example from my favorite sport Formula 1. 20 cars race, two from each of the 10 teams. Yet, one is can easily locate both the Mercedes because they of their similar livery and color. We can use this property in design as well. Options designed in a similar manner are often seemed to be grouped. Icons on the bottom bar have a similar look and feel which helps the user to distinguish them from other options on the main screen.
Closure
Let’s go back to the Stone Age. Imagine you are picking up fruits, and you suddenly see movement in the bushes and two ears moving around. Your brain doesn’t need to see the entire creature, just the two ears will put you in a flight or fight situation. This is where we inherit the principle of closure. A human does not need complete representation, one’s mind automatically start generating an image of the item based on past experiences and knowledge.
Continuation
When there is an intersection between two or more objects, people tend to perceive each object as a single uninterrupted object. This allows differentiation of stimuli even when they come in visual overlap. We have a tendency to group and organize lines or curves that follow an established direction over those defined by sharp and abrupt changes in direction.
Motion
Birds of a feather flock together. When we look and see a large number of birds flying in the same direction, we immediately assume them to be of the same species. Similarly items in motion on any platforms will be considered as a group if they have the same kind of motion. For example, content swiping in from the right side of a webpage will make it feel connected and similar to the paragraph above.
Conclusion
Even the simplest of designs contain multiple elements and it is beneficial if the user knows which ones are grouped. This helps them identify what they want and navigate through the product easily. Just imagine reading this article as one single paragraph. Dividing the content into groups of headings helped enhance the quality of this article. So, remember to group up elements in your design and use any of the above mentioned principle to create groups.
