Role of Gestalt Principles in UX/UI Design
There are 7 Gestalt Principles that are based how human perceive things in their surrounding. These laws can be used while designing experience and interfaces.
Let’s go ahead and look at each law with examples
1. The law of proximity
The law of proximity states that “things that are close or together appear to be more related and perceived as a group than things that are spaced farther apart.”
In the below example, elements are represented as one and separate groups respectively.
Implementation in UX Design
Law of proximity is being used from very long, and can be seen at a lot of places. One of the simplest implementation of this law in UX/UI is placement of labels near to the text fields in forms. This helps perceive label and text field as one.
2. The law of similarity
The law 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 functionality associated.”
In the below example, elements shape is same but colour is helping to differentiate between functionality of an element.
Implementation in UX Design
Law of similarity is a very simple yet important aspect of design. Here the fields and button have the same size, but due to the different colour of the button, user know that its function is different. Shape, colour and size helps to differentiate between functionality of an element.
3. The law of focal point
The law of focal point states that “whatever stands out visually will capture and hold the viewer’s attention fast and at first.”
In the below example, red square is noticed first even after being surrounded by lot of black circles.
Implementation in UX Design
Law of focal point plays an important role in design, from above example we can show that button being different in colour catches the user eye fast. This helps to find and reach CTA(target) in less time.
4. The law of common-region
The law of the common region is sometime confused with law of proximity. It states that “when objects are located within the same closed region, we perceive them as being grouped together.”
In the below example, boundary around elements create a region that behave as a separate group.
Implementation in UX Design
Law of common region can be seen in websites, like product page on any e-commerce website. There are sections decided with lines such as price range, categories. These are few places where law of common-region comes in play.
5. The law of closure
The law of closure states that “when we look at a complex arrangement of visual elements, we tend to look for a single, recognizable pattern.”
In the below example, using the ideas from your memory the picture seems to be a football.
Implementation in UX Design
Law of closure is generally more visible in logo designing. Such as FedEx logo, there is hidden arrow shape that comes from your observation and ideas present in your memory .
6. The law of figure-ground
The law of figure-ground states that “people instinctively perceive objects as either being in the foreground or the background”
In the below example, there is an overlay or shadow present between 2 layers, that helps perceive objects on being either at foreground or background. Just like a modal or dialog box.
Implementation in UX Design
Law of figure-ground help us to see a modal or a dialog box differently from background.
7. The law of continuity
The law of continuity states that “elements that are arranged on a line or as an shape outline, are perceived to be more related than elements placed randomly.”
In the below example, dropdown menus are best to showcase the law of continuity.
Implementation in UX Design
Law of continuity can be seen in navigation bar, drop down menus etc. From above, user can understand categories like — Home, Men, Women etc. Further going ahead sub groups would be there from each category.
So guys, thats all for this article! Hope it help you understanding how human’s perceive designs.
You can use the understanding from each law, to create user centred design.
Hit clap if you found this interesting and useful…I’m always up for a chat 😃, that’s to say.
Instagram: https://www.instagram.com/ayushithisside.ux/
My Linkedin profile: https://www.linkedin.com/in/ayushiverma13/
Behance: https://www.behance.net/ayushiverma713
Twitter: https://twitter.com/Ayushiv713
