If you were to pick up your phone right now and view the top five apps you daily drive, you’d be interested to find that most of them share a common ‘language’. This language, in design terms, are founded on principles of human perception; how we as a people experience the natural world around us.
Knock knock. Who’s there? Gestalt Principles.
The way our minds process information boils down to a few key essentials. These laws or principles determine how you pick up on, identify and understand information.
The mind is constantly trying to see structure and patterns in order for us to better understand the environment we live in. It does this subconsciously by arranging the seemingly disparate parts into an organised system to create a whole. An elaborate way of saying to bring ‘order out of chaos’.
“The whole is other than the sum of the parts.” – Kurt Koffka
In summary, we can break up the principles into seven distinct areas:
SIMILARITY
CONTINUATION
CLOSURE
PROXIMITY
FIGURE / GROUND
SYMMETRY & ORDER
COMMON FATE
Let’s take a closer look at each principle and see how the most popular apps we use today utilizes these ideas in design successfully.
SIMILARITY
In Gestalt, similar elements are visually grouped, regardless of their proximity to each other. They can be grouped by colour, shape, or size. This grouping of elements- or visual hierarchy– allow users to understand function and intent so they can make decisions faster and efficiently.
Medium’s homepage has article titles set in bold (highlighted in yellow on the image above) that immediately allows the reader to identify them on the page. This pattern of behaviour is a modern standardisation of the newspaper layout.
When Similarity is NOT used appropriately, it can create confusion and frustration. The poster below uses this principle to communicate the title and eventdate which arguably breaks visual hierarchy causing the reader to instantly hesitate.
An example of poor Similarity.
CONTINUATION
The principle of Continuation asserts that the human eye likes to follow a line or sequence of shapes to better understand the relationship between individual elements. There is a tendency to continue tracing the line even if its not visibly there.
Continuation helps us to form a composition, or produce a layout that flows one piece of information to the next, strengthening the perception of grouped information. Disrupting the flow of continuity usually signals the end of a section, allowing users to be drawn to new content in the page. A layout that makes use of effective Continuity results in deliberate and functional layouts.
Inverse.com – a popular online magazine that covers pop culture, science and technology makes excellent use of Continuation within a novel layout that is modern and youthful.
CLOSURE
Closure is evident whenever you see a form that is incomplete or parts of it are not enclosed.
Our minds are incredibly good at observing patterns, remembering those patterns and applying them elsewhere. Our minds fill in necessary information when given a familiar shape that is not complete or enclosed.
Icons are a great example of this. The principle of Closure helps us to digest information that has been stripped and simplified to its bare essentials.
Twitter prominently features icons in their navigation tab on the left. Icons have become extremely prolific and widespread on the Internet and part of our established lexicon online.
PROXIMITY
Whenever you come across content that is grouped together to display similar information, you come across the principle of Proximity. When used correctly the organisation, readability and subsequent de-cluttering of layout will leave a positive impact on the user.
White space is vital to indicate contrast and allow the eyes to flow from one set of information to the next. White space improves visual hierarchy and allows users to quickly scan the page, increasing efficiency and time spent on content.
Google Search has improved on its use of Proximity by segmenting information according to its relevancy.
FIGURE / GROUND
Figure / Ground denotes how we assign value to the subject i.e ‘Figure’ of an image or article. The rest is considered background i.e ‘Ground’. This relationship between Figure and Ground helps us distinguish context in an image or article.
A shift in perception can change the Figure / Ground relationship allowing us to perceive a chalice or two faces.
A designer can use this principle to illustrate presence and prominent information through the use of pop ups and modals that lay over the page. Pinterest, Facebook and many social media platforms make use of this elements to entice users to sign up to their platform.
SYMMETRY AND ORDER
The law of symmetry and order (also known as prägnanz, the German word for “good figure”) says that your brain will attempt to place ambiguous shapes into a recognizable or simple a form as possible. This is why clouds in the sky can take on the shape of any everyday object.
Visual symmetry in design is a powerful tool to denote information in a dynamic way. Symmetry and asymmetry are both equally relevant when producing a layout that can capture your attention.
The Verge magazine website provides an asymmetric grid that is center aligned on the page to bring fresh content to the user’s attention.
FINAL THOUGHTS
A whole generation known as ‘digital natives’ are growing up on the web with access to vast amounts of information. The face of the Internet has received numerous facelifts as designers race to stay on the forefront of trending and innovative design. Gestalt’s Principles have remained key and have kept design grounded through decades of updates and upgrades to hardware as well as software.
Gestalt’s Principles serve to remind us that good design is human-centric, instinctive and therefore invisible; because it is a reflection of how we perceive and understand the world around us.
