Gestalt Principles of Perception

A Perspective on the Importance of Gestalt Theory to graphic design series 6/7

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

Welcome back to the fifth articles in the Gestalt Theory Principles, which are so important to graphic design. The previous articles in this series were 1) Basic Design Principles; 2) How Our Minds React To What We See; 3) The Proximity Principle; 4) Similarity Principle in the Gestalt Theory and 5) Symmetry Principle on The Gestalt Theory.

Our article today will deal with the relationships of the elements in the set of laws and principle collective known as the Gestalt Principles of Perception. The links we will talk about are divided into three parts: a) Figure-Ground relationship; b) Good Continuation relationship and c) Common Fate relationship.

We could still be asking ourselves if we should follow the principles of Gestalt in our designs. If you still are, my answer is that, once you have your content clear and your communication goals defined for your message, Gestalt Theory principles will then help you distribute the elements of your design. You will understand when to use background shading or gradients, or when group things in enclosures to create real ideas that will operate effectively towards your audience.

Interconnection

You grasp that these Gestalt principles seem to be variations of each other and are closely related. All the principles are, actually, part to the relationships between the elements that make the design. The items are either similar or dissimilar, they blend, or they contrast with them, they suggest hierarchy and their hierarchy defines the context.

The real context is firstly defined by the message your client wants you to transmit to the audience. That is the context your design must convey—that one and not another random message or the one you prefer.

So, let’s examine the three relationships we have today – Figure-Ground, Good Continuation and Common Fate.

Figure-Ground Relationship

ELEMENTS ARE PERCEIVED AS FIGURES OF FOCUS OR AS GROUND

depending on their location. The elements could be distinctly focused as an element, or they could be the background or landscape on which the figures rest.  When people direct their sight to an object, the first thing they do is define the relation of the figure they gaze to the ground where they rest. This principle is directly applied to space where the element is. It means, one object will be perceived in relation to the other. Modifying this percentage will alter the communication of your design and how the message will be interpreted. Mostly, the white space is regarded as the active space and the black space as a passive background.

two black squares
Black rectangles equally spaced created a formal space as both parts, figure and ground are stable. When two rectangles give way to the two black lines, that extra open space becomes active and acquire prominence over the background.

Our mind puts each figure in its right perspective, and our eyes follow it. This process is instant and requires no effort. What our mind does naturally becomes, therefore, the success of the designer, when the designer knows where to direct the viewer’s eyes.

According to Andy Rutledge, Figure-Ground perception helps our viewers’:

  • Distinguish content from structure;
  • Perceive affordances; and
  • Understand the importance of implied depth in a two-dimension medium.

which are essential to communicate the clues that will establish the desired relationship.Or, a designer could explore this principle to puzzle the layout in ways to transmit a compelling message to the viewer.

Three Types Of The Figure-Ground Relationship

  1. Stable – when both figure and ground are clearly expressed.
  2. Reversible – when both parts attract the attention of the viewer heading to an energetic design.  
  3. Ambiguous – when both elements can appear either figure or ground, and the viewers have the choice of perspective.
figures of stable, reversible and ambiguous
Source: gdbasics.com

Figure-Ground Relationships On A Website

wine advert of Orange NSW
This page of wineselectors.com.au uses a darkened photo of a winery in the background to produce a call to the selectors’ choices to the viewers. You clearly see your benefits, the measuring standards and the object of the wine selection.
Orange360.com.au/wineries

This publicity video from Orange, NSW uses a video in the background to display a text in small capital letters distinctly stating the advantages a visitor will enjoy when visiting their wineries. My personal experience, a nice film for a beautiful country town, all year round.

Good Continuation Relationship

ELEMENTS ARE PERCEIVED TO HAVE SOMETHING IN COMMON WHEN THEY FOLLOW AN UNINTERRUPTED LINE OR A CURVE

Our mind seems to follow continuous, uninterrupted lines, following elements that are aligned in straight or curved lines. Human minds perceive elements that are aligned in lines or curves as they seem to the grouped as similar things. In other words, humans tend to group elements that follow an uninterrupted alignment, and when some change the direction, they will be seen as different objects. The alignment of objects is the main principle in this relationship, the continuation that is established.

Markus Burke from Pexels photo
Source: Markus Burke from Pexels
The eyes are drawn through the curved line of a beautiful snow road.

When we find continuation, we understand that that is the direction to follow. Our mind likes what gives it less work, less resistance and allows our eyes to follow that direction and continue in its established direction.

Examples On A Website

The website needs to be easy to navigate and lead the visitor to the solution to their problems. Continuation guides our eyes to establish the most natural relationship between the objects and simultaneously direct attention to specific groups of elements in the design.

Swarosvski sale page
Source: Swarovski.com

Our eyes follow the continuation of objects for sale in Swarovski, and we understand that they are part of groups of objects for sale distributed in their distinctive categories. The continuation in the alignment of images establishes a direction and leads us through each row of products.

It is a great help when the relationship of good continuation is there in the website because the path and the direction are already recognized, and we just need to follow it to find the solution to our problem.

Also, you probably can see that other principles are perceived in this same design. We can see the similarity and proximity of the elements. We also detect closure as they are together forming a group of aligned objects, and our eyes can fill in the gaps between the squares and know what to expect.

Moss51.com used continuation in this offer of services to the visitors. The person understands that each line refers to a category of services that they can click to access; the different colours bring vibrancy to the page and distinct each category making it unique.

Another example in moss51.com is the columns of information where the blogs are listed one under the other, using continuation to guide the eyes, along with the similarity of photos to guide the eyes on the left and the name of the blog and author and date on the right to encourage the reader to move vertically to read the information. 

post list from moss51
https://moss51.com

Disrupting Movement

If good continuation guides us through the composition, a sudden disrupting movement could make us focus attention on certain details or allocate the beginning of another line of continuation.

myer shop page
Source: myer.com.au

Myer uses this principle in the composition when they guide the visitor horizontally through aligned images of women’s products for sale, and the structure is suddenly interrupted by the bright pink image of Myer Mid-Year Sale, an image not similar to the others that we were not expecting to see. This image stops the direction our eyes were following and focuses our attention on it. It is deliberate and serves the purpose.

As seem, continuation guides the movement of our eyes and directs them to assimilate the information. If disruption is used, ensure that it is in the correct place to focus attention. Elements aligned need to be consistent to keep the direction of movement and not undermine the ease of navigation.

Common Fate Relationship

ELEMENTS THAT MOVE IN THE SAME DIRECTION ARE PERCEIVED TO BE MORE RELATED THAN ELEMENTS THAT DON’T MOVE OR THAT MOVE IN DIFFERENT DIRECTIONS OR AT DIFFERENT SPEEDS

The last relationship we will talk about today is the Common Fate relationship. It is a powerful relationship as it involves movement and animation to clarify what the relationships actually are and how they work between the elements of a composition.

Fishing4Views

An example similar to this was already used by Smashing Magazine.com in one of their extremely good articles, worth reading. But I can not think of a better one. In the video, we see fish schooling in the Barrier Reef. At the school, they are defending themselves against their enemy and, actually, trying to avoid a common fate, that would be to be eaten by other bigger fish. Swimming together, they reach their goal of survival. This is what the common fate relationship does – when the movement goes in the same direction, the elements become more related to each other. The synchronisation is essential in this relationship – moving in the same direction at the same speed. Order and synchrony produce a relationship.

Imagine yourself driving a car on the road. You must drive in the correct lane in the same direction as the other cars surrounding you. You and the other vehicles driving in the same direction at approximately the same speed are related to each other with a common fate in mind. The synchronicity is the tool to reach the goal. Simple but essential. When one of the elements (a car) breaks the synchrony, it calls our attention, and we need to respond appropriately to that sudden movement.

Busy Street during Nighttime
Photo from Helena Lopez from Pexels

As you can see the principle is quite prominent in our daily lives. If you are walking your dog, you both follow the same direction at the same speed (unless the dog is in a hurry!) When you cross traffic at an intersection. There is a relation between the people passing in one way and another relationship between people crossing on the other way. A flock of ducks flying together, aeroplanes flying in formation, and the images go on.  It’s all around you.

Recognising contrasting movement impacts the human mind typically more than contrasts in colour or other visual signs because our perception is keen and automatic.

If you are walking at night and see in a decorated garden a line of coloured Christmas lights in movement. A quite striking effect, but when you analyse the movement according to the principle of common fate,  you will see that, actually, the lights are turning on sequentially giving the impression that they are really in movement; other visual elements imply the change. You do not perceive the individual lights; you recognise the line of lights. The action follows the same direction, and we see the composition as a related group.

Designing A Website With The Principle Of Common Fate In Mind

Simple examples include nested menus and content. In these items, we define related elements, keeping a hierarchy of importance and helping the user focus on the current context when you group relevant information and link actions with results.

Moss51 shows smart slider in the homepage. As you press the arrows, the pictures move and what you see is the implied movement of the photos. This movement creates trust and stability as it assists the visitors to have an idea of what the site is about helping them to build a positive first impression.

Slider

Other examples usually used in websites are expandable menus, accordions, tooltips, product sliders, parallax scrolls and swiping indicators. In a slide-out menu, the principle is well explored. When you open a menu, the sub-menu items move into visibility as distinct groups to lead you in your search.

The Queensland Art Gallery & Gallery of Modern Art in Brisbane uses the principle of common fate interestingly as you press on the menu category. It opens down, creating a new menu line.

Queensland Art Gallery
The Queensland Art Gallery & Gallery of Modern Art

What We Should Learn

We use the principle of common fate so efficiently that its function is almost invisible to our eyes. Take some time during your day and just check how many times you use it in everyday actions. Its movement creates vitality to our perception of things. Nothing better than that to revitalize our communication and performance. You will create a pleasant experience for the users and an abundant realization for the business.

Next article will be our final one on the Gestalt Theory’s Principles series. If you need, go back to previous articles to add to the information received. The principles do not have any specific order; they work together but the information you learn for one principle will help you learn others better.

Please leave your comments, suggestions and feedback.

Sources:
https://www.smashingmagazine.com/2014/05/design-principles-space-figure-ground-relationship/
https://andyrutledge.com/
https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-principles-of-continuation-and-common-fate-part-three/
Photo by Markus Burke from Pexels
https://www.swarovski.com/en_GB-AU/?sap-outbound-id=1336DCE0C4344A7D5DB0910C41BAD15AC8FC6F8C&utm_source=Newsletter_CRM%20NL&utm_medium=email&utm_campaign=200327CRMNL_SW_3for2_AU&crmid=C042437756&utm_content=EN
https://www.qagoma.qld.gov.au/

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