Common Fate Principle in TemplateMonster’s Templates [Die Gestalt im Design]

Recently we initiated a series of posts covering the theme of theoretical application of Gestalt psychology in web design. We’ve already described three principles: Symmetry, Similarity and Proximity. This article is dedicated to the law of Common fate in web design, the forth principle of Gestalt classification.

The common fate law is vital to our perception of how things around us are or aren’t related to one another. We use this principle in every aspect of our lives, not even noticing it. Without our perception and reliance on this principle, we could lose our lives at any moment (here sounds dramatic music).

The common fate is one of six visual perception laws that are theorized by the Gestalt psychology. Paul Martin Lester, the author of Visual Communication, gave the following definition to this law:

The fourth law of Gestalt psychology is the law of common fate. A viewer mentally groups five arrows or five raised hands pointing to the sky because they all point in the same direction. An arrow or a hand pointed in opposite direction will create tension, because the viewer will not see it as part of the upwardly directed whole.

Outlining this definition we can say that people are able to group objects with the same moving direction as a collective unit. In web design moving objects are created with the help of Flash, JS and HTML5 technologies. Due to our nature we are able to perceive dynamic objects better than static ones, because moving objects are very conspicuous, that’s why they are better noted.

The examples given below visualize the essence of this principle:

***

***

Common fate principle presumes that as soon as the movement is noted, the relations between objects start to develop. A good example is a drop-down menu that can be seen almost on every website. The way how sub-menu items move into visibility shows us that the grouped links are related (within each group).

***

Tooltips are the next thing that forms important relationship. Tooltips always contain secondary information that gives a clue to the user about any functions of the website. It won’t take long for a site user to put together (subconsciously) the relationship between moving/hovering the cursor and bringing up new information results in the following statement – pointer plus information all moving together is a useful association.

***

In general, the common fate principle is a pretty simple concept; it usually refers to the directional lines in the design of the layout. On this template, for example, the group of people is “high-fiving” and this creates the directional line of common fate; together they are having a common fate or destiny.

***

Other examples of groups of similar shapes that are aimed in the same direction. On this template you can see the man with a gun and on the background there is some kind of a monster whose shape resembles the man on the foreground.

***

Let’s have a look at some more examples. Have you ever noticed how cars and other vehicles are being pictured? If a car is driving to the right, the law of common fate says that the directional line is pointing to the right. And again, if a pictured car is aimed towards the left, on the image that is a part of a design, the directional line is being aimed to the left. On the example below, the car is headed to the right, so the image of the car should be placed towards the left side of the layout because we read from left to right. This pattern is applicable to anything else.

***

***

***

***

You may be wondering why common fate can be important for the designer. This is pretty simple: if two objects are pointed in the same direction, the directional lines become dominant in the layout, so if an object is moving or is aimed at the same direction, the designer puts needed message at the point of the destination. This method is successively used in Facebook’s Reveal Tabs. As you know the function of the fan-gate is to generate Likes by attracting/guiding the user directly to the like button, on the following examples you can see how this function is fulfilled.

***

***

***

This template has a similar function as a fan-gate, here we can see a woman who is pointing her finger at the text with a button “Read more”.

***

As every rule has an exception there are sometimes created designer decisions where the common fate principle is used not exactly as it is supposed to, and this leads to visual collisions and user frustration. This might be caused by the intense layout.

***

Humans tend to perceive elements moving in the same direction as being more related than elements that are stationary or that move in different directions.

For sure design is a result of creativity. When you start “creating” you can get inspiration from the recognized visual rules that have been studied by the expert psychologists and that would be helpful when building your own methodology. The basic principles of Gestalt psychology and design are very similar – the ideal design decision should contain balance, visual proportion and color dominance. These three will make a difference in the final result of your design.

In the end we would like to say that the law of common fate is very important and needs to be used in all kinds of mass-media including television and advertising. When used right, the common fate law will make the user read and understand information correctly and the designer or writer or any other creator will benefit from it.

And one more, as well as other Gestalt principles we use the common fate automatically not even noticing its functions. Try to quantify this principle in your life and find out how it affects you. The more you understand how this principle works the better you’ll be able to use it in your work.

When you're just starting out as a freelancer, it's easy to fall into the habit of taking any assignment that comes right away, and one of those brought Alex to TemplateMonster. Now he joins the ranks of the blog columnists who are eager to write more and more.

This entry was posted on Wednesday, April 4th, 2012 at 3:24 am and is filed under DesignFloat, Usability tips. You can follow any responses to this entry through the RSS 2.0 feed.Responses are currently closed, but you can trackback from your own site.

View the original article here