Gestalt Principle: Common Fate (Using Coordinated Motion in Design to Associate Relations)

Tracking individual objects can often be an incredibly frustrating task. It doesn’t matter if the “objects” in question are individual animals, plants, clouds, rocks, stars, or whatever other things the world contains. It is so much easier to track and observe them if we can box them into distinct, identifiable groups.

This is true not only in our everyday, mundane lives; it is also true of UI designs. In this section, we shall discuss the underlying principle behind making effective UI designs through the visual “grouping” of objects. And that principle is known as the Common Fate Principle.

What is Common Fate?

Common Fate is one of the principles of Gestalt principles of perception. This principle states that any objects that coordinate movement similarly are perceived to be more related.

When we see ants walking in a straight line, we think of them as a whole group. When they are moving in random directions, we perceive them as not belonging to a group. This is the common fate principle in effect.

Generally, this effect is noticed in moving objects like a school of fish or an army of ants. However, we can also observe it in scenarios where optical illusion is used to imitate movement such as in blinking lights. The lights that blink together look like they are related and vice versa.

Common Fate Example in UX Design

Now let’s take a look at an example in a user interface for a travel mobile app.

Let’s break down this example.

For the sake of simplicity, we will only focus on the right half of the image. If we take a look at the “past trip” section, we can see that their scroll movement is in the same direction. This makes it feel as if they are in the same group.

Elements that belong together have the same animation. Even though multiple animations are happening all at once, the items that belong together share the same movement.

This follows true for entrance and exit animations as well. Elements enter into the frame in such a way that the movement emphasizes the focal point of the design. This creates visual interest and ultimately an exciting design.

However, using too many animations may result in a chaotic overall experience. For all these movements to make sense, it needs to follow a rhythm.

I wouldn’t suggest using lots of animations as it is distracting to the users and removes focus from the core functionality.

Importance of Common Fate in UX:

Categorizing related elements so that people can associate relations.

This principle helps us show the relationship between elements. This way, people interested in an element might check out others. On the other hand, those that have no interest in an element will avoid related elements, which saves their time.

To reduce the complexity of our product

Coordination between design elements makes the design a lot cleaner. Our overall product is also simplified because of this practice. Consequently, unnecessary instructions or extra content will not be required to guide our users. This reduces complexity.

This principle helps users find the main point of focus.

Objects in motion always attract attention and they become the figure element. This means that they become the point of focus. This serves a dual purpose: our products are easier to use and the main features are easier to find.

Things to know when applying the principle

• The relatedness of elements is powerful when elements have identical speeds, move at the same time, and in the same direction. We can obviously relate elements with each other even when timings are off or if they don’t have a uniform motion. But when everything is aligned perfectly, the effect of the principle is the strongest.

• When the particles follow a common pattern, an exception to this principle occurs. Even without moving in the same direction or having the same speed, we can relate the elements when they follow a common path like spiral motion. Since some of the motions are so obvious to us, we just relate them instinctively. Therefore, a common pattern for all elements can sometimes be used instead of setting these elements at identical speeds and directions.

• Using this principle, the figure-ground relationship principle can also be observed. The figure-ground relationship basically means seeing a part of an object as a figure or the point of focus. The background part is called the ground. This principle assists users to identify what we want them to use or know.

Summing Up

• This principle is a grouping method as it groups elements that move in the same direction or coordinate well as a unit.
• It reduces complexity and helps the user understand the focus of our products.
• Obvious patterns that may not follow the common fate principle are exceptions like spiral or wave motion.
• Generally used for elements that are in motion, the common fate may be used in flickering elements as well.

Further Reading:

• The 11 Principles of Design and Art
• Gestalt Principle: Symmetry
• Gestalt Principle: Proximity