Taste of Design 3: Gestalt Principles

Another concept from visual design that on one hand is visual and artistic, on the other is based in clear psychological concepts and rules. Still slightly confused on the proper names/number of them but if you look into “Gestalt” you’ll find a number of topics that cover WHY visual objects appear to us as the more complex forms they create. These aren’t meant to be academic writings on design but rather something to pique interest so if I’m off on the exact names or number or rules, definitely do some deeper research into the concept.

Proximity

Objects or shapes that are close to one another appear to form groups. Basically its just the idea that things that are close together start to feel like a larger object.

Subtle spacing can mean the different between three groups or two with a secondary subdivision.

The specific spacing between elements and data-visualizations within MyAnalytics and Workplace Analytics plays off this.

If the bars were evenly spaced you wouldn’t get the same grouping concept

Queries plays off this too, adding in color to aid in grouping navigation concepts.

Similarity

All else being equal, perception lends itself to seeing stimuli that physically resemble each other as part of the same object, and stimuli that are different as part of a different object.

Selected objects? Results of a filter?

Part of why we think of active, selected or focus states is that the color aids in grouping otherwise similar components. The bar you’re hovering on is the same structurally but has the additional color identifier to become its own specific object.

Closure

The tendency to see complete figures or forms even if a picture is incomplete, partially hidden by other objects, or missing information to make a complete image.

There really isn’t a circle there, just the impression of one. You’re probably also angry at me that its off center :D.

Really, making me think I need to get some background color in there too. But in data viz you’re constantly showing something that visually is part of a larger object but not quite finishing the image.

I think our logo plays off it too, playing off the feeling that its a complete circle though really there’s just 3 curves next to each other.

Continuity

When there is an intersection between two or more objects, people tend to perceive each object as a single uninterrupted object.

Wikipedia’s image on this. These aren’t two keys in front of each other. They’re images of keys where the lines etc. give the impression of continuation.

Slightly harder to come up with a good example on this. Icons use it a ton and I think part of why the tool bar combo in our filter panel works well is because of the feeling of continuation due to similar color and size in the tool bars.

Good Form

The principle of good form refers to the tendency to group together forms of similar shape, pattern, color, etc. Even in cases where two or more forms clearly overlap, the human brain interprets them in a way that allows people to differentiate different patterns and/or shapes. — https://en.wikipedia.org/wiki/Principles_of_grouping

Cheating a bit by this point because its hard to rephrase the concept. Basically its just the idea that we’re prone to seeing the full form not the pieces in between.

Classic example are the olympic rings. We don’t see the spaces between but rather the connection of rings.

This mostly applies to icons, where we see the full shape rather than the pieces. But I think the same concept applies to the overall look and feel of data-viz objects, and why we see the full chart and not the pieces.

Further Reading

Gestalt principles in UI design.

Probably an overall better article on this than what I just wrote … but eh :D.

What are Gestalt Principles?