The Common Fate principle is more potent when elements move synchronized; in the same direction and at the same time and speed. It can help with grouping relevant information and linking actions with results. The disruption of a synchronized movement can grab users’ attention and direct it to a specific element or feature. It can also, establish relationships between different groups or states.

We usually use the Common Fate principle in expandable menus, accordions, tool-tips, product sliders, parallax scrolls and swiping indicators.

Common Fate Used in UI Design

Elements moving towards the same direction are perceived as more related than those moving in different directions, or not moving at all.

University of Michigan - Ann Arbor

Gestalt principles are laws of human perception that describe how we group similar elements, recognize patterns, and simplify complex images when we perceive objects. These principles include Proximity, Similarity, Continuity, Closure, Symmetry, Figure/Ground, and Common Fate. Understanding these concepts can be enhanced by observing them in real-world examples.

Gestalt Principles

https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965

Gestalt Principles in UI design

Elements sharing similar visual characteristics are perceived to be more related than those not sharing similar characteristics.
In UI design, we tend to perceive similar to each other elements as grouped or a pattern. We also might think that they serve the same purpose. Similarity can help us with organizing and classifying objects within a group and linking them with a specific meaning or function.

Similarity

Elements following a continuous line are perceived as grouped. The smoother the line segments, the more we see them as a unified shape; our mind prefers the path of least resistance.

Continuity helps us interpret direction and movement through a composition. Disruption of continuity can signal the end of a section drawing attention to a new piece of content.

Continuity (o Good Continuation)

A group of elements are often perceived to be a single recognizable form or figure. The Closure also occurs when an object is incomplete, or parts of it are not enclosed. When presented with the right amount of information, our brain will jump to conclusions by filling in the gaps and creating a unified whole. 

We perceive elements as one object rather than separate parts. Closure can help us minimize visual noise and convey a message, reinforcing a concept within a pretty small space. Closure could be used in icon design, where simplicity helps with communicating meaning clearly and swiftly.

Closure

Symmetrical elements tend to perceived as belonging together regardless of their distance, giving us a feeling of solidity and order.

Symmtery

Common Fate

The figure-ground relationship is a Gestalt principle describing our tendency to separate our visual world into two distinct planes: the 'figure,' which is the primary object or person of focus, and the 'ground,' which constitutes the background. How we perceive a scene can change dramatically based on which elements we interpret as the figure and which as the ground.

Figure-Ground Relationship

The principle of proximity is a Gestalt principle for organizing sensory stimuli which asserts that things that are close to one another tend to be grouped together. Because of this principle, elements arranged near each other are perceived as more related than those placed further apart, and are viewed as a group rather than as individual elements.

Principle of Proximity

A graphic designer creates a poster for a music festival. The poster lists three headlining bands at the top, followed by a list of twenty supporting acts below. The three headliners are written in a large, bold, colorful font. The twenty supporting acts are all listed in a smaller, plain, white font. Which two principles of perceptual organization best explain why an observer would immediately see the headliners as a distinct and more important group than the supporting acts?

Learn Before

Related

Learn After