Finding symmetry on sub-conscious level

1. Gestalt Principles
Gestalt Principles

2. Gestalt Principles
This principle maintains that when
the human mind (perceptual
system) forms a percept or
gestalt, the whole has a reality of
its own, independent of the parts.

3. Gestalt Principles
Theories of visual perception
developed by German
psychologists in the 1920s. These
theories attempt to describe how
people tend to organize visual
elements into groups or unified
wholes when certain principles
are applied.

4. Gestalt Principles
Gestalt Principles

5. Gestalt Principles
Gestalt Principles
Similarity

6. Gestalt Principles
Gestalt Principles
Enclosure

7. Gestalt Principles
Gestalt Principles
Continuation

8. Gestalt Principles
Gestalt Principles
Closure

9. Gestalt Principles
Gestalt Principles
Proximity

10. Gestalt Principles
Gestalt Principles
Figure-
Ground

11. Gestalt Principles
Gestalt Principles
Similarity
Enclosure
Continuation
Closure
Proximity
Figure-
Ground

12. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground

13. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground
Perceiving objects that are similar to be part of a group or pattern
You can see similarity being used in Van Gogh’s “Starry Night”. We are able to
distinguish the stars from the night sky because of two contrasting attributes:
•The circular orbs that we perceive to be stars are all the same color, yellow.
•The direction of the brush strokes making up the stars are all moving in the same,
circular direction.

15. This tells us that all of the elements with those two attributes are
the same. It also tells us that they are separate from the night
sky.

16. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground
Example of similarity used in an interface
Tumblr

17. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground
What are the similarities?
•Each option is represented by an icon with text beneath.
•Each icon and text beneath the icon are the same size.
•The icons are evenly distributed in the space, each given equal treatment.

18. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground
What does it tell us about the process of creating a blog post?
As a user, we know that any one of these icons represent a means to a similar end – creating a
new blog post.
We know exactly where to go, or what UI elements to look for when we need to create a new
blog post.

19. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground
Things that appear to have a boundary around them are perceived to be grouped, and
therefore related.
Example of a Facebook post:
The post has 3 instances of enclosure that afford the clarity of this interface.

20. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground

21. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground

22. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground

23. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground
Organization and separation of information.

24. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground
The eye creates momentum as it is compelled to move through one object and
continue to another.
Example: Google Maps walking directions

26. Rather than a series of blue dots, we perceive this as a single
line.

27. 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”.

28. 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.

29. 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.

30. Example: 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.

31. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground
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.
Example: Notifications icon in Twitter’s interface

32. Example 1: 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.
Example 2: 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”.

33. •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.

34. •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 receive enough visual feedback in the interface
to assume that the item has been added.

35. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground
When elements are close together, we perceive them to be part of a group.
Example: Layout of Twitter’s profile information

36. Example: Layout of Twitter’s profile information

37. Example: 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.

38. Example: 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.

39. Example: 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.

40. Example: Twitter’s

41. Example: Twitter’s

42. Example: Twitter’s
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.

43. Example: Twitter’s
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.

44. Example: Twitter’s
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.
The grouping is visualized by adding negative space between the numbers. E.g. 555-555-5555 vs 5555555555

45. Similarity Enclosure Continuation Closure Proximity
Figure-
Ground
Perceiving certain objects as being in the foreground and other objects as being in the
background.
Example: The interaction of opening up a modal.

46. Example: The interaction of opening up a modal.
A white, transparent background that softens
the appearance of the original content you
were focused on.

47. Example: The interaction of opening up a modal.
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.

48. Example: The interaction of opening up a modal.
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.

49. Gestalt Principles