Gestalt Principles of Perception

A PERSPECTIVE ON THE IMPORTANCE OF GESTALT THEORY TO GRAPHIC DESIGN SERIES 3/7

“The whole is other than the sum of the parts.”

The Gestalt Laws (or theory of grouping) is a set of principles to account for the manner humans naturally perceive objects as organised patterns in an attempt to simplify. We recognise parts of objects and form whole objects with those individual parts according to their grouping (Gestalt).

Gestalt visual principles apply to interactive media design, amongst several other disciplines, involving the study of the learning process, problem-solving and human perception. Gestalt Theory is composed of rules which describe how human eyes perceive visual elements. Our brain tries to understand the shapes as a single, united whole, rather than the separate individual elements involved.

Max Wertheimer, one of the three German psychologists who developed this theory during the 1920s, explains:

“The fundamental “formula” of Gestalt theory might be expressed in this way: There are wholes, the behaviour of which is not determined by that of their individual elements, but where the part-processes are themselves determined by the intrinsic nature of the whole. It is the hope of Gestalt theory to determine the quality of such wholes.”

Or, in other words, the principles of Gestalt considers the layout (the grouping) specific properties as being different than the simple sum of its individual parts. One example to help us understand these principles would be to consider the individual words of this text. Each word is unique and has its meaning, but to understand the text you need to have a specific arrangement of words that will give you a context and a more meaningful sense of what the text is trying to transmit.

Gestalt is an influential theory, dealing with positive and negative spaces, timing, the configuration that has a profound effect on the meaning of the information presented.

Gestalt Theory In Visual Communication

Gestalt theory explains the “pattern-seeking” natural to human behaviour with scientific validation that can be used by visual artists to improve their visual work. The research started in the 1920s, and it is still a thriving part of design education. They help us create and organise print and web designs to create meaningful designs such as logos, poster, magazines, book jackets, and so many other visual communication tools we use daily in our profession. We can analyse how people perceive and understand our images and layouts and build a psychologically solid visual frame of reference to be used in the spatial organisation of our graphic information (Berryman, 1990).

robots asking question to each other
Source: jambulboy from Pixabay

As we, designers, continue creating web pages, animations, UX interfaces, printed designs, and so many other kinds of interactive media communication tools (whether web or multimedia documents) it is relevant that we continue learning how to use the Gestalt Theory and how to integrate its principles to produce definite visual flair to our designs.

Principle Of Proximity

Our previous post talked about the cool principle of Closure, where we see how our brain fills the missing parts of a design to create a whole.

Today, we will talk about another principle of Gestalt Theory: Proximity.

objects or shapes that are close to one another appear to form groups.”

Proximity refers to how close the objects are to one another. Items that are spatially located close to each other seem to be part of the same group, and things that apart seem to be perceived as separate, not belonging to the same group.

In media design, items near to each other are naturally considered as being part of an organised, unified group.

In web design or on your business card, you see this principle every day when information is positioned close together to form a visual unit. As we group the data in distinct selected items, we offer our visitor a clear message and a clear hierarchy of the information on the page or on the card.

homepage photo of Moss51 Art & Design website showing how the proximity principle was applied

A partial view of our home page can be used as an example. The layout does not overwhelm the user visually.  The header with appropriately spaced information items in the content and the generous room in the featured content space with readable text and related photo contribute to this clean look. Empty space is valuable in our design as it allows us to make the design more appealing while implementing the principle of proximity.

How Proximity Works

Have a look at this group of circles:

two graphics with 18 cirtcles and 6 circles showing the proximity principle

The only difference between both groups is the proximity of the lines. Our brain perceives the group in the left as a set of 18 circles against a vertical line of 6 circles on the right. It is a natural interpretation and makes our mind feel well because it understood the message being communicated by the figures.

a photo of the contact page for Moss51 Art & Design show how the proximity principle was applied

Here we see Moss51 Art & Design contact page. The proximity principle is used to get visitors to group certain things together as they look at the page. We organise the space around each group to help the viewer grasp on the information and structure it in the way the pages requires them to perceive.

Visually related elements are vital to force the viewer to scan the information given and understand it with as little work as possible. Let’s see this example:

drawings of a badly designed card and of a well designed card showing the proximity principle

The reader will have difficulties to understand the card on the left as the information is not logically grouped even with the abundance of white space. The business card on the right, on the contrary, groups de information in logical places with the services provided, the address and the cardholder’s name printed in a larger font just above the location. The proximity principle is followed, and the reader can get the information at a glance.

Hierarchy

Logical organisation of positive and negative space helps the reader find clear visual hierarchy in the information communicated. It is what we call website architecture and flow of information. The way we group and subgroup the elements transmits the hierarchy of information to the viewer.

In a website, the viewer needs to know where they came from and understand clearly where they want to go. The designer needs to communicate the purpose of the site and the categories dealt within it.

a table with a category for a list of fruits and a category for vegetables showing the proximity principle

A list of categories and related sub-categories in the above list will be easy to follow with a proper hierarchy of information. But imagine if the list was produced without the capital letters, indents and correct fruits or vegetables under the right category, that is, without showing the relationship items between the indented items to the categories?  Would you be able to find your salad and dessert? You might, but without the hierarchy, it would be more difficult and much less pleasant.

Good Hierarchy Is Natural To Read

Content that is properly organised with a hierarchy is logical, easy to read and scan through central points of interest, especially in content-rich websites, where white space allows the visitor to breathe, categories are segmented into boxes and graphical planes, and a visual hierarchy can be seen from different fonts, image sizes and saturation.

Look an excellent example of the AIGA homepage. AIGA needs to present the many different opportunities it has for graphic design development with conferences, publishing, membership, events, professional articles and developments into an effective home page. It shows also another critical item of the proximity principle, the use of grids to group objects and use white space fittingly. The grid sizes are proportional to the amount of information and representation they display, which is consistent with the website commitment to reach membership with professional, relevant information. The grid-based layout benefits the design with the use of proximity as it helps the viewer navigate the website easily without any unneeded interruptions.  

a photo of AIGA homepage showing the proximity principle

Straight To The Point

Easy navigation is essential in UX design. It helps us understand how the human brain works and explore the open ways to improve our designs significantly. Using these natural human tendencies will bring pleasure and a continuous interaction where the user will feel comfortable when they navigate the most important categories of your site quickly and efficiently and feel confident they know where they come from and know where they are going to. The best way to build traffic and improve loyalty.

This principle along with the other central principles of Gestalt Theory is reasonably easy to incorporate into our designs, and they will elevate our communication with the user to a natural interaction that will guide them towards the action they want to take.

If you haven’t read, please read the first article in this series on “The Importance of Gestalt Theory To Graphic Design” in the previous post 1/6 How Your Mind Reacts To What You See.

Next article will cover another principle of the Gestalt Law. If you are like me, you want to overwhelm your visitor and improve their user experience. Consider the following advice when creating your own web design:

  • express your information graphically by grouping the content
  • leave an equal amount of white spaces between elements only when they are part of a bigger whole
  • add more space between items that should not be grouped together to provide better distinction
  • make your layout fit together logically
  • avoid having too many separate elements in a page
  • use your elements to create a clear visual hierarchy that transmits your message efficiently and effectively.

Source:
https://www.toptal.com/designers/ui/gestalt-principles-of-design
https://pdfs.semanticscholar.org/4719/da4f55d4a4633b7f81ca1eea5571c5364504.pdf
Berryman, Greg (1990). Notes on Graphic Design and Visual Communication, 3rd edition,  Crisp Learning
https://www.webdesignerdepot.com/2010/01/the-principle-of-proximity-in-web-design/

Print and share this article friendly; you are free to use and reproduce it, just please attribute the Moss51 Art & Design as the original author, and link back to this post!

Print Friendly, PDF & Email
Cidinha Moss

Comments are closed.