Have you ever noticed yourself looking at the sky, observing unusually shaped clouds and perceiving the resemblance of an object or animal to it? Ever wondered why and how do we make such associations? It’s all the work of the human brain!
The human senses are the windows to the world. Our brain perceives and groups the information received through the five senses, and either consciously or unconsciously gives it meaning in an orderly and comprehensible manner. This is where Gestalt principles come into play.
In the 1920s, a group of German psychologists devised a theory that helps us to understand how we process visual information. The chief governing principle of Gestalt is “the whole is greater than the sum of its parts”. We usually tend to first perceive the whole and then work around its parts, or we attempt to break down the whole into simpler parts.
A common precept in the User Interface (UI) world is ‘don’t make the users think’. Exploring the visual hierarchy and the ways users perceive information can make their experience intuitive and gratifying.
Gestalt principles have been used in varied disciplines to enhance the user’s experience as well as influence the purchase and use of products & services. In this article, I will walk you through the Gestalt Principles and show you with examples how you can use these principles to improve the design of a website and greatly improve user experience.
Principles of Gestalt
There are six principles in total, which when combined together are called Gestalt principles.
Principle of Similarity
The principle of similarity is grounded in the ideology that when things share the same visual characteristics such as shape, colour, size, texture, orientation, value or any other property, they will be perceived as belonging together. For example, even though all the shapes are the same, it is clear that each row represents a distinct group.
Hence, by giving different layout elements similar visual features, a designer can stimulate appropriate neuronal connections in the user’s brain that helps them decode the design quickly and effortlessly.
For example, in the design given below, the designer has distinguished different sections of the website by utilising different colours. It is very evident that the purpose of the purple section differs from that of the pink and yellow section.
In this design, the designer has differentiated the design on the basis of shape. The rectangles are indicative of different genres of music and the circles represent artists.
Principle of Proximity
The principle of proximity is a cognitive tendency to discern elements close to each other as related than the elements that are placed further off on a page. This is caused by the subconscious urge to organize the information one is exposed to and group them automatically, much quicker than they encode. For example:
Interestingly, a research study concluded that the relative distance of elements (proximity) overpowered the other distinctive features such as colour or shape. For example:
In user interfaces, from text to images and web forms to navigation bars, this principle is substantially utilised in web designing. Grouping similar content together facilitates a seamless relationship between elements thus delivering a better visual experience.
For example, in the designs given below, the nearness of each icon/image and its corresponding text communicates that they are related to each other.
Principle of Closure
Human visualisation is strongly driven to see objects such as shapes, alphabets and pictures as a whole even when they are not complete. When a few elements of the picture are missing, our brain attempts to close the gaps and use our perception to fill in the gaps and perceive it as a whole.
We attempt to convert and perceive the complex ambiguous elements into easy ones. Isn’t it intriguing to see how our mind fills the gaps and perceives these moving dots as a dog?
When the user is exposed to the right amount of information, the brain perceives and derives a conclusion by filling the gaps and creating a unified whole. This way we can lessen the cognitive load by decreasing the number of elements needed to communicate the required information. This principle also helps us to minimise the visual noise and make the design more engaging.
A loading indicator, progress bars or sliders are good examples of the law of closure. By using negative space we make the solution obtained more understandable to the user. This principle has also been widely used in iconography and logos. For example:
Another widely used example of closure is when the image displayed on the web page partially fades off the user’s screen, it indicates that more information is likely to flash if the user swipes left or right. If a full image is displayed, the user would not immediately interpret that there might be more information, thus increasing the unlikelihood of the user to scroll.
Principle of Figure Ground
This principle asserts that we tend to unconsciously segregate the visual field into figure (foreground) and ground (background) in order to structure and organize the information and lessen the cognitive load. The foreground entails elements of the page attract our primary attention, and the background is everything else. We do this by comparing the two (or more) elements’ size, and perceiving the smaller object as a figure, and larger to be the ground. For example:
In the design above, your eye instantly sees the shape, that is, a circle, a star or a triangle sitting on a brown background.
This principle has also been used to design a variety of logos. For example: we instantly differentiate between the background and foreground, and perceive the alphabet ‘M’.
This principle is often used to lay emphasis on pop up information over other content. Page that was formerly the figure (the focus of user’s attention) temporarily becomes the background for the new information, which is the new figure. This approach has been widely employed since it provides adequate context that helps the users to be oriented while interacting with the page. For example:
Principle of Continuation
Our visual perception has a tendency to perceive elements placed in a continuous form rather than disconnected arrays of elements. When the elements are arranged on a line or curve, they are likely to be perceived as more related. For example:
In the figure above, the green dots in the curved line seem to be more related to the orange dots in the curved line than green dots in the straight line. Hence, the ability of our eyes to naturally follow a curve or a line is stronger than identifying similarity of colour.
We subconsciously tend to follow the smoothest line and create connections between elements. This is an extremely valuable tool to guide users’ eyes in a particular direction by placing the vital elements in that path. For example: horizontal sliders, dropdown options etc.
For example, in the designs given below, placing the essential elements in a row helps to easily locate and provide a better user experience.
Principle of Symmetry
This principle asserts that the human mind groups objects that are symmetrically equal to reduce ambiguity and complexity. Our human visual system when exposed to a stimulus generates multiple interpretations, but our brain tends to automatically interpret and simplify the information by giving symmetry. In the design below, you are likely to perceive it as a set of three opening and closing brackets. Thus, symmetrical balance overpowers the proximity principle.
Symmetry is a useful tool to communicate information on a web page since our eyes seek those attributes that are in order and symmetrical. It has been widely utilised in portfolios, navigation, galleries, product displays, banners, listings, and content heavy pages.
In the design given below, the designer has symmetrically segregated the information depending on its kind. This not only enhances the user experience but also highly impacts the engagement with the web page.
The 3-column design that has been immensely used is also rooted in this principle. For example:
Key Takeaways to Incorporate Gestalt Principles in your Web Designs
1. We perceive the whole before we see the smaller details. The overall appearance of a web page design must take precedence over the finer details.
2. Minimal and simple designs enhance the user interface by avoiding visual and cognitive overload. Let your users’ minds fill in the gaps.
3. Ensure that the background is separated from the foreground elements with emphasis on the main call to action.
4. Make sure that the UI elements that perform a similar function or belong to the same group share one or more visual features in proximity. Differentiate the ones that do not belong to the same group.
Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ] 
Related Posts: You may also like
Incorporating Visual Distinction to Accomplish User Goals
November 18, 2021
Cognitive Heuristics: Leveraging Them to Boost Sales With Examples
December 23, 2021
How to make your website feel more intuitive?
October 7, 2021
