Gestalt and Design: Continuity and Common Fate
My post last week explored proximity and common region. This week’s post looks at continuity and common fate
Continuity
When visual elements are part of a curve or a line, they appear to be related.
It is the eye’s natural tendency to follow along the smoothest, uninterrupted line or curve.
The example above could be showing four separate lines or a number of different combinations connecting the points. However, they are perceived as going from x to y and a to b connecting.
Even when part of the color of the line is changed, the lines are still seen as going from a to b and x to y.
The image above makes use of continuation by putting items of the same category, here, “Customer Favorites” in a horizontal line. The eye automatically follows the line and groups the products together.
Continuity is used to establish hierarchy. As seen here, the horizontal row at the top displays the primary navigation which the eye automatically goes straight across and groups the words together. Because the secondary navigation is on a vertical line, the items are perceived as being part of a group.
In the two examples above, other principles such as similarity and proximity appear alongside continuation. The continuation principle often appears alongside other principles which enhances a grouping’s relationship.
In the image above, the following the woman’s gaze leads straight to the button that says “Shop Engagement”. Continuation is often used to guide the user’s attention to a specific action. Even though no line is visible, the natural tendency to follow along lines still guides the user to the call to action button.
Common Fate
When visual elements are moving together, such as at the same speed and in the same direction, they are perceived as being grouped together
Common fate is somewhat similar to continuation, except it has to do with movement.
In the image above, imagine the squares are being swept to the left. Each square in group A moves horizontally, exactly the same as the others and therefore share the same fate. In group B, the some of the squares move in different directions, therefore the common fate principle does not apply to this group.
The carousel design pattern is a good example of common fate as they each move in the same fashion. Each object appears on screen and then, either automatically or when triggered, slides off-screen in the same direction as one another. Because these items share a common fate, they are considered to be related to one another.
In a drop-down menu, when an option is selected in the menu, a submenu appears to the right. When a subcategory is chosen from that submenu, another submenu appears to the right. For any subcategory chosen, the menu is expected to fall to the right because they share a common fate.
Sources:
- https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide
- https://www.interaction-design.org/literature/article/the-laws-of-figure-ground-praegnanz-closure-and-common-fate-gestalt-principles-3
- https://www.andyrutledge.com/common-fate.html
Check out the other articles in the Gestalt and Design series
