Using Gestalt Principles for Natural Interactions

Gestalt is a term used in psychology which expresses the idea that the whole of
something is more important to our understanding than the individual parts. The
Gestalt principles describe the way our mind interprets visual elements.

The principles I find most helpful day-to-day are:

Similarity

Enclosure

Continuation

Closure

Proximity

Figure-Ground

We’ll look at a few examples of each principle and break down how it informs the
way you interact with an interface.

Things that appear to have a boundary around them are perceived to be grouped,
and therefore related.

This example of a Facebook post has 3 instances of enclosure that afford the
clarity of this interface.

The first enclosure is the post as a whole (highlighted in the screenshot
below). Each Facebook post is enclosed in a rectangle with a white background,
thin gray border that distinguishes it from the light gray background.

The second enclosure is the representation of the link within the post. The
photo followed by the title and description of the link appear to be grouped
together, and therefore related. I now know the organization and separation of
information.

The third enclosure is the area at the bottom of the post. Everything
related to social interactions is enclosed inside of the light-blue background.
As a user, this allows me to know exactly how and where to interact with this
post.

These enclosures provide affordances that allow me to group and interpret the
information accurately.

The eye creates momentum as it is compelled to move through one object and
continue to another.

Here’s a screenshot of Google Maps walking directions.
Rather than a series of blue dots, we perceive this as a single line.

We also understand we are to physically walk in the direction of this “line”.
Nothing in the interface explicitly tells us that the dotted line indicates
direction. A small icon of a person walking and the blue dots create the idea of
momentum and direction.

Another common application of continuation is the timeline of a media player.

This line represents the duration of the track. As the track plays, the color of
the line changes.

The second color is perceived as a second line. As that line grows, we perceive
the passage of time. We don’t expect the second line to continue past the end
point of the first line.

This gives us the understanding that when the second line reaches the end of the
first line, the track has played to completion. You don’t imagine that the
second line could extend past the first.

The interface does not need to offer hints in the form of visual “nouns” (e.g.
an arrow indicating duration or time) because the visual “verbs” (e.g. the
animation/interaction when the track is playing) teaches users very quickly when
the track begins and to anticipate when it finishes.

When an object is incomplete, but enough of the object is indicated, the mind
perceives the object to be whole by mentally filling the information.

Take a look at the Notifications icon in Twitter’s
interface. When you have a notification, a number enclosed in a square is placed
over the icon.

There is enough of the bell visible for our mind to still read this icon as the
bell.

Let’s look at another example of closure being used to complete an interaction. In
the Urban Outfitters online store, notice what
happens when an item is added to my “shopping cart”.

In this interaction, once the “Add to Bag” button is clicked, a few things
happen:

The text inside of the button changes to “Added!”.

A number appears next to the shopping cart icon in the navigation.

A modal slides down from the shopping cart icon which confirms, again, the
item has been added to my shopping cart.

The fact that the item has been added to our shopping cart is implied through
the interface. We didn’t go to my shopping cart page to see the items in it. We
also did not need to use a drag and drop interaction (which is often more work
for the user) to create this reassurance. We receive enough visual feedback in
the interface to assume that the item has been added.

All of this information is understood without actually having to go to the
shopping cart page.

When elements are close together, we perceive them to be part of a group.

Let’s take a look at the layout of Twitter’s profile information:

The avatar, cover photo, display name, and user name are placed close together.
Because they are close together spatially, we read this information as a group,
and thus, being related.

The stats associated with the Twitter account are located a few pixels below the
grouping of personal information.

The pink line in this screenshot highlights the negative space separating the
two groupings and creates the boundary separating their proximities.

We can look at another example from Twitter that utilizes the same principle:

The elements that allow you to interact with this tweet are close together and
are located farther down, vertically, than the rest of the content and elements
in the enclosure.

The highlighted areas expose the groupings created by the layout. You can see
how the proximity of a number to their respective interaction icons indicates the
relationship between the number and the icon.

You may hear designers say things like, “we need more white-space” from
time-to-time. White space is a synonymous term for “negative space”.

In many cases (not all), white space is used as a sort of enclosure (reference
the enclosure principle above). The negative space acts as an invisible border.
By doing this, it actually defines a region of proximity, thereby adding meaning
to something that might otherwise look too “busy” or cluttered to make sense of.

The really cool thing is that this meaning is created without having to add
lines, colors, or other visual elements. The areas where visual elements are
absent (the white or negative space) actually creates just as much meaning than
the presence of visual elements (the positive space).

This is the same idea as grouping digits of a phone number. It’s easier to read
and remember if the numbers are grouped. The grouping is visualized by adding
negative space between the numbers.

Perceiving certain objects as being in the foreground and other objects as being
in the background.

A common example of figure-ground is the interaction of opening up a modal.

In the New York Times example above, the figure-ground
relationship is manipulated by:

a white, transparent background that softens the appearance of the original
content you were focused on.

a border and subtle drop shadow around the box containing the log in fields.

The figure-ground relationship allows us to understand this interaction. You
perceive the modal to be in the foreground and the New York Times home page to
be in the background. This tells us that we have not left the page we were on
because we can still see it “beneath” the transparent white background. However,
the context has changed, as it now appears to have moved to the background, and
new elements are in the foreground.

Notice the minimal visual styles applied to the interface in our New York Times
example. The border around the login modal is about 1 pixel wide, the drop shadow
has a very limited spread and a light color so as not to create too much
contrast.

When creating something to be
minimal, (which is
different from Minimalism), we want
to know: what is the least amount of detail that can be added to create the
necessary impact?

Deiter Rams\‘ final principle for
good design states that design “is as little design as possible”. Understanding
how Gestalt principles are are applied allows us to create the essential meaning
in our products without excess design, styles, or steps.