Gestalt and Design: Uniform Connectedness
This week’s installment looks at the Gestalt principle of uniform connectedness
Uniform Connectedness
When visual elements are visually connected they are perceived as being grouped
In the image above, a line is drawn that links the elements together, making them appear to be part of a group.
This principle is extremely powerful and can even overpower other principles such as similarity and proximity. In the image above, although all of the circles are close together and similar, the ones connected appear to be grouped more so than the others.
Looking at the image above, A appears to depict a woman with a cloud above her head. The cloud may as well just be a part of the background. However, in B, a link is added that connects the cloud to the woman, making it apparent that the cloud is a thought bubble and directly connected to the woman.
Connectedness is especially important in web design to help determine groupings and relationships. In tabbed navigation, such as the one above, the currently selected tab is physically connected to its related content while the other tabs are closed off.
The links in this navigation menu above are an example of both uniform connectedness and common region as the box tangibly connects them to one another. The groupings create a visual hierarchy among the items.
Connectedness is extremely important in indicating groupings and relationships. The image above appears as if it could be three different columns, as the center looks as though it is a bullet point list.
Once the lines are added in, it is apparent that the groupings are horizontal. The image above shows someone’s gmail account, in which uniform connectedness can be seen grouping together emails with the sender’s name and time. The visual barriers are essential here to show relationships since before the lines were added in, it was difficult to determine exactly which elements were connected.
Connectedness appears often in graphs and data sets to display relationships between groups of data. The graph above shows four different lines which represent four different relationships
Sitemaps are the hierarchal diagrams of a website’s informational architecture. Here, the connectedness creates the hierarchy and visually shows the relationship between each page for an e-commerce website.
Sources:
- https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide
- https://www.andyrutledge.com/gestalt-principles-3.html
- https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation-gestalt-principles-2
Check out the other articles in the Gestalt and Design series
