Use of Gestalt Theory in UI Design
The whole is other than the sum of the parts — Kurt Koffka.
What are Gestalt Principles?
Gestalt is a German word that translates to ‘unified whole’.The gestalt phenomena can also be described as “The whole is different from the sum of its parts”. It’s the study of how people organise visual elements into groups and find patterns with very little information. In both visual arts and psychology, the goal of gestalt principles is to locate some common elements & introduce structural order into the chaotic, noisy environment of the human environment. According to Gestalt psychologists, these principles exist because the mind’s intrinsic propensity is to see patterns in the stimuli based on rules.
Different Gestalt Principles & their Application in Design
- Law of Symmetry & Asymmetry
Symmetrical composition involves placing elements in an equal composition, not distracting the view. In contrast, the asymmetrical composition is when elements are placed in a certain way leading the eye to a particular element.
In interface design, the composition of elements and components within a screen help in creating an effective interaction between the user and the screen. By making the right choices of layouts through symmetry and asymmetry, we can create a balance, a dynamic design or highlight any required information.
Application of Symmetry in Design
The pieces on the Maersk website have a symmetrical layout with the most visual weight in the centre. The human face is a beautiful symmetrical feature that takes the major hierarchy when highlighted in red. The subsidiary parts are all the same height, while the primary text “Disconnected” is aligned in the middle. The equilibrium is perfect.
Another excellent example of a symmetrically balanced website is Gucci’s website. It displays that two elements do not require to be identified along the central axis to create a sense of balance.
Application of Asymmetry in Design
The effect Lab and Artificial Intelligence — Cytora has utilised the asymmetrical structure for their website. Because of the lack of balance across the central axis, the eye is drawn to the left side of the website, which has a large spread of whitespace—making it the prime position to place the vital communication to the user such as the logotype, slogan, title and CTA (call to action).
The asymmetrical composition can also create a sense of movement, which the Key Solutions website has utilised. Placing text on the right and an image of a woman leaping on the right without being composed on the centre axis creates a sense of urgency that leads to the CTA.
Application of Symmetry & Asymmetry in Design:
We can use both symmetry and asymmetry to design a page, just as Pinterest has used in their landing page. Six columns of the same width are displayed, but they are arranged on different horizontal axes. This layout mixes symmetry and asymmetry for a balanced but dynamic appearance. The login CTA is positioned in the centre to complete the balancing composition.
2. Law of Continuation
The law of continuation explains how the human mind subconsciously follows visual lines or elements that are grouped together as an established direction. This psychology theory explains how our brain fills out certain elements and help us see the whole picture and not just the separate parts and creates a ‘continuity’.
The law of continuity helps in building a hierarchy in our design by enabling the users to navigate through a page/layout. It allows designers to subtly direct the user to specific goals while significantly impacting the user.
Application of Continuity in Design
The law of continuity is seen in various web screens, but the most common would be an e-commerce site, as can be seen below on Nike’s website — the neatly aligned shows create a path from left to right. Continuation directs our gaze through each row, grouping them and signalling related products.
3. Law of Figure/Ground Relationship
The relationship between the foreground and the background are mutually complementary. The human eye tends to differentiate between two different colours in an illustration as the foreground and the background. Usually, the object or the focal point is considered the foreground, and the rest is the background. At times it depends on human perception of what is to be regarded as a foreground and a background.
When designing for a page/layout for the screen, the design needs to establish a constant foreground and background relationship to avoid confusing the user.
Application of Figure-Ground Relationship
As seen below, Molson Canadian employs liberal use of boxes to distinguish focus from the background.
Conclusion:
Gestalt laws aid in reaching the goal of a user interface that allows for quick and easy conveyance of information. A good design does not confuse consumers and guides them visually to the best possibilities. These principles let the designer make a conscious decision to follow gestalt’s laws to create a clutter-free design that drives brand recognition and consumer-friendly businesses. It instils a sense of UI design discipline in the user. Designers use many rules naturally, but knowing them allows them to make more conscious decisions.
More Reads:
- https://sympli.io/blog/guide_symmetry_asymmetry_in_ui_design/
- https://speckyboy.com/asymmetrical-split-screens-web-design/
- https://ux360.design/symmetry-design-principle/
- https://www.shopify.in/partners/blog/asymmetrical-design
- https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-principles-of-continuation-and-common-fate-part-three/
- https://uxplanet.org/improving-your-designs-with-gestalt-principles-figure-ground-26429a3eccad
- https://uxplanet.org/improving-your-designs-with-gestalt-principles-figure-ground-26429a3eccad
