Illustration 1
What do you suggest, is it a sheep or a wolf? Well, both the answers are right in a perception or other then who’s fooling you the designer or your own brain?
Well, the answer is ‘Gestalt Principle’ , we all have grown up looking at hundreds of such visual illusions, and they arise just because our brain works to make the visuals meaningful in the end.
Gestalt is the term that comes from the German word Gestalt [ɡəˈʃtalt] meaning “shape, form”. It is used primarily in cognitive psychology for the field exploring the laws of meaningful perception of the data which people constantly get from the world that seems primarily chaotic. The basic idea behind this movement can be caught through the well-known phrase by Gestalt psychologist Kurt Koffka: “The whole is other than the sum of the parts”. When people perceive the complex objects consisting of many elements, they apply conscious or subconscious methods of arranging the parts into a whole organised system instead of just the set of simple objects. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces.
Understanding and using Gestalt principles in your design will help you accelerate the success rate of user interactions, as it gives you a deeper insight about how we as humans perceive different objects in different lights. These principles are organised into five global categories: Proximity, Similarity, Continuity, Closure, and Connectedness.
Showing 5 laws of Gestlat
Also read about who introduced Gestalt Psychology here.
Definition :
The principle of proximity states that things that are close together appear to be more related than things that are spaced farther apart. For example, look at the image below, both of them have similar dots but the first one seems like a group of dots whereas the second one seems to have two groups of dots. It’s simply because in the first example the dots are evenly spaced and in the second they are unevenly spaced.
Law of proximity example
Usage:
The items that are equi-spaced seem like they belong together this principle can be used in lists, drop-downs and other places where the content is connected in someway of the other
List example of law of proximity
Law of Similarity
Definition :
The principle of similarity states that when things appear to be similar to each other, we group them together and we also tend to think they have the same function. For example, look at the image below, the odd rows seem to be similar and we find them grouped same as the even rows this is just because all even and odd rows look similar
Example of law of similarity
Usage:
The items that have same color seem to have grouped together or share some common attribute. This can be used in lists, cards, and at other places where the elements share some common attributes and can be grouped.
Example of Law of Similarity
Law of Closure
Definition :
Individuals perceive objects such as shapes, letters, pictures, etc., as being whole when they are not complete, our perception works on filling in the visual gap. Even though the image given below doesn’t has well made shapes but you can understand it’s a circle and a rectangle
Example for law of closure
Usage:
Law of closure can be used in loading states, completion bars, etc
Example of law of closure
Definition :
The law states elements that are arranged on a line or curve are perceived to be more related than elements not on the line or curve. As in the example below the dark blue dots can be perceived as grouped elements.
Example of law of continuation
Usage:
Law of continuity can be used in navigations like below where there’s a difference between primary and secondary menu options and at other similar places with such demarcation.
Example of law of continuation
Definition :
This law embarks the separation between figure (foreground) and ground (background). It talks about our ability to visually separate elements on different planes of focus.
Example of law of figure/ground
Usage:
Law of figure/ground can be used over overlays, navigation panel, modals, dialogues, etc
Example of law of figure/ground
So, could you figure out who fools you? Designer or your own brain?
Well, Designers use the gestalt principles to make some visual illusions. One mastered in Gestalt you can use them to make your designs user friendly.
Deepanshi Dixit is a guest author on Difference by Design. If you’ve interesting ideas to share, find out more about submitting a Guest blog here
Great explanation from Deepanshi about Gestalt Principles, She precisely explained each concept in it with suitable examples, The top illustration she shared was just out of the box, giving enough context on what the article is going to be, good job!