Gestalt Principles
Links:
https://www.interaction-design.org/literature/article/the-law-of-similarity-gestalt-
principles-1
The Law of Similarity - Gestalt Principles (1)
BY MADS SOEGAARD
Gestalt is a German word that carries much importance, especially for us as designers.
Let’s have a close look at its principles so that we can see how much information this
little word encompasses!
The central principle to the Gestalt theory was neatly summarized by the Gestalt
psychologist Kurt Koffka: "The whole is other than the sum of the parts." The human
eye and brain perceive a unified shape in a different way to the way they perceive the
individual parts of those shapes. This global whole is a separate entity that is not
necessarily formed by the sum of its parts.
When we fully understand Gestalt design principles, we can utilize them to create more
interesting and engaging visual experiences for website and app users. You can take
advantage of these laws to design more thoughtfully and effectively, knowing exactly
how your work can impact your users.
1
What are Gestalt Principles?
Author/Copyright holder: Impronta. Copyright terms and licence: CC BY-SA 3.0
Gestalt principles or laws are rules that describe how the human eye perceives visual
elements. These principles aim to show how complex scenes can be reduced to more
simple shapes. They also aim to explain how the eyes perceive the shapes as a single,
united form rather than the separate simpler elements involved.
“Gestalt” refers to “shape” or “form” in German; the principles – originally developed by
Max Wertheimer (1880-1943), an Austro-Hungarian-born psychologist. – were improved
later by Wolfgang Köhler (1929), Kurt Koffka (1935), and Wolfgang Metzger (1936).
Researchers have integrated all of these theories to show how people unconsciously
connect and link design elements.
2
This article covers one of the Gestalt Principles (the Law of Similarity). The rest of the
principles will be covered in upcoming articles:
· Similarity (also known as Invariance): The human eye tends to build a
relationship between similar elements within a design. Similarity can be achieved
using basic elements such as shapes, colors, and size.
· Continuation: The human eye follows the paths, lines, and curves of a design,
and prefers to see a continuous flow of visual elements rather than separated objects.
· Closure (also known as Reification): The human eye prefers to see complete
shapes. If the visual elements are not complete, the user can perceive a complete
shape by filling in missing visual information.
· Proximity (also known as Emergence): Simple shapes arranged together can
create a more complex image.
· Figure/Ground (also known as Multi-stability): The human eye isolates
shapes from backgrounds.
· Symmetry and order: The design should be balanced and complete;
otherwise, the user will spend time and effort trying to perceive an overall picture.
The Law of Similarity
The human eye tends to perceive similar elements in a design as a complete picture,
shape, or group, even if those elements are separated. The brain seems to craft a link
between elements of a similar nature. Then, we perceive them in a relationship with
each other, separating them from other elements in a design. Human eyes are good at
filling in “gaps” or connecting “dots”. It happens naturally.
3
Similarity is influenced by the shape, size and color of the elements. When you mix
objects with high degrees of similarity to each other with a group of dissimilar objects,
the brain then devotes time and energy to creating a link between them so that it can try
to understand their relationship with each other.
Let’s try a quick experiment to check this out. If you’ve got a pencil and paper handy,
draw about ten, rough circles on a page (spreading them across the page), leaving
enough space between them to fit shapes of a similar size. Now, anywhere in those
4
gaps, draw five or six triangles. Don't worry about geometric perfection: it doesn't matter
in this simple illustration. Then, put about three dots anywhere between these shapes.
Look away and stand back for a moment. Now, return to your sketch.
Do you notice anything? Your eye takes you right to the dots, doesn’t it? This is
because the dots are points, while the shapes are made up of lines.
Designing with Similarity in Mind
In web and interactive design, the similarity law can be used to contribute to building
connections between linked elements. This relationship may be either physical or
conceptual. You can make the most of this natural human inclination by helping your
user’s eye to discern parts of your design you want to accentuate.
Using this linkage might improve the user experience as follows:
Links
Links and navigation systems are essential to allow users to view website content and
navigate between different pages.
While links are embedded inside the content, they must certainly be presented uniformly
to allow users to identify linked text.
Thus, text links should be differentiated by color and usually shape as well. No matter
how you do it, the important thing is that links should be clearly identifiable as such.
Make them stand out. Many users will typically consider a link to be any text that is blue
and underlined.
The use of the principle of similarity in menus and navigation helps users see the
relationship between each group of navigation links. They will then perceive similar
navigation items as being related or having a similar place in the site’s data hierarchy.
Content
We can also use color, font size and type, highlighting, etc. to distinguish between and
mark the types of content before a user reads them.
For example, quotes that appear in boxes, in a slightly bigger font, with an italic
emphasis, are easily recognizable as such. The law of similarity carries our recognition
5
of this standard from one website to another. Each site may use a variant on this theme,
but, overall, the pattern is incredibly similar.
Breaking the law of similarity can also help draw a user’s attention to a specific piece of
content – such as a call to action. That’s right; we can make use of both sides of the line
or border the law makes. The user’s eye is a remarkably easy tool to manipulate; you
just need to figure out what parts of your design you want to bring out or tie together.
Headers
Website headers play another essential role in organizing and building well-structured
content for search engine crawling and for the reader.
We normally place headers above content in a different font, color, size, etc. from the
body of the content. They assist the reader in finding the relevant points in content and
help control the overall flow of the work. They’re great milestones and using them wisely
(which isn’t hard) will keep your users on your page.
Remember that a user’s eye will activate the brain to work to interpret your design in a
certain way. Nothing is more tiring than a solid block of text on a page, with no
discernable features to draw the reader’s eye. If you’re near an old literary classic, why
not open it and look at a spread of pages?
For example, let’s try Victor Hugo’s immortal Les Misérables on for size. Flicking
forward six pages finally brought me to a new chapter heading, which my eye instantly
noticed and read. None of the other text had stood out for me before I saw that.
The Take Away
Gestalt psychology is a theory of the mind which has been applied to a number of
different aspects of human thought, action and perception. In particular, Gestalt
theorists and researchers attempt to understand visual perception in terms of the way
the underlying processes are organized to help us make sense of the world.
The organization of these cognitive processes is important to our understanding of how
we interpret the constant stream of visual information entering our eyes into a cohesive,
meaningful and usable representation of the world. Over the last twenty years,
interaction designers and other professionals involved in the development of products
for human users have adopted the work of Gestalt psychologists.
6
Realizing the potential for applying Gestalt thinking helps us create (literally!) eye-
catching works. Suddenly, we have new insights and ways of approaching problems
and challenges. This is a gift – we can tailor our work according to the ”engineering” of
the human eye and brain.
Starting with the Law of Similarity, we find that we can make use of the following to draw
a user’s attention and let his or her brain do the rest:
These three short articles will provide you with a first approach to these laws. However,
if you want to cement in your own mind the many ways you can organize visual
information and improve your designs for all users, we suggest that you take the course
explained below!
Where to Learn More
Interested in delving into the Gestalt principles? Check our ”Gestalt Psychology and
Web Design: The Ultimate Guide” course: https://www.interaction-
design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide
References:
Hero Image: Author/Copyright holder: Eumedemito. Copyright terms and licence: Public
Domain.
7
https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-
connectedness-and-continuation-gestalt-principles-2
Laws of Proximity, Uniform Connectedness, and Continuation – Gestalt
Principles (2)
BY MADS SOEGAARD | 7 MIN READ
In this, the second part of our examining Gestalt principles, we’ll look at another Law –
the Law of Proximity. This one is especially useful as it deals with how our eyes and
brains draw connections with design images. Of course, connecting is also important to
us – that’s what we want to make happen between our users and our designs!
“The eye tends to build a relationship between elements of the same design,” is a
crucial saying to keep in mind. Our brains build connections between disparate design
elements based on laws of visual perception. These are influenced by the way in which
elements in a design are laid out. The laws that apply are those of proximity, uniform
connectedness, and continuation.
This article is a follow-up to the first Gestalt principles article, in which we introduced
and discussed the Law of Similarity. There will be a third article to cover the Laws of
Figure/Ground, Prägnanz, Closure, and Common Fate. For now, let’s stay near
proximity, which (literally!) means closeness in space, time, or relationship.
What Is the Law of Proximity?
The law of proximity describes how the human eye perceives connections between
visual elements. Elements that are close to each other are perceived to be related when
compared with elements that are separate from each other.
The law of proximity allows us to use whitespace, for example, to build perceived
relationships between different elements.
8
In written material, the law of proximity enables us to make sense of text as a whole.
This is also true for paragraph spacing and for more disparate elements of text on a
web page. The spacing between blocks of text tells us how likely they are to be related
to each other. Pick up any book near you and flick through it. Unless it’s a telephone
directory, you’ll notice how the author has (hopefully!) made sensible use of paragraphs
to keep text about similar ideas, points, or threads of arguments together. The rule is
this: if you change the subject, you’ll need to start a new paragraph.
The law of proximity is very useful for allowing people to group ideas, concepts, etc. –
it’s ideal for us to be able to recognize different clusters of items at a glance. However,
as designers, we need to be careful about employing the law in our designs. Why? If
9
you group too many items too closely, you’re going to end up with a noisy, crowded
layout. The proximity of each item will become so indistinct that your design will lose
meaning.
Let’s try a little experiment. If you’ve got a pencil and paper handy, try this: draw 8-10
circles (at scribble speed – there’s no need to spend time on neatness and geometric
perfection!), anywhere on the page, using up about a quarter of the total space, but
keep them together.
Now, let’s add the same number of triangles, just a little way away from the circles (so
that the distance between the two groups is about 3-4 times the distance between each
circle). Again, leave room so that there’s still half a page that is blank. Okay, let’s put in
some squares now – about the same number in the same amount of space, keeping
them close to each other.
For our grand finale, let’s insert some rectangles, maybe 4-5, increasing the size a bit
so they’re noticeably different from the squares.... All done? Good job! Now, turn away
for a moment and then look back at your page.
Do you see how, although the four groups are sorted or clustered together, the design
as a whole is a very busy affair? We can see that looking at this is actually something
like work! Making our users work is not what we want.
What Is the Law of Unified Connectedness?
The law of unified connectedness states that elements that are connected to each other
using colors, lines, frames, or other shapes are perceived as a single unit when
compared with other elements that are not linked in the same manner.
This grouping effect works even when it contradicts other Gestalt principles, such as
proximity and similarity. “How can it contradict laws?” you might ask. Well, remember
that we’re dealing with the unique combination of the human eye and brain. Without
getting into the subject of magic, illusions or tricks (because we don’t want to get off
topic), we can see that the human tendency to link or group elements, or focus on like
items in a sea of dissimilar objects, is a powerful trait.
Let’s try a quick experiment. If you have another blank page, please take it and try this
little sketch. It will take a matter of seconds.
Draw six, rough circles, like the six dots on a pair of dice. Now, draw a line from the top-
left corner dot to its comrade dots at its right and below it. For the bottom-right corner
10
dot, connect it to the dot above it and also the bottom left dot. Look away for a moment;
then, check out your sketch. You now have two groups of three, linked dots.
Implementing this connectedness in your designs is easy; there are many ways to
indicate grouping within a design. Some common examples include:
· Connecting related links or buttons by adding them to the same drop-down
menu.
· Using the same bullet shapes, colors, or numbering system (such as Roman
numerals, Arabic numbers, etc.) on list items to group them with each other.
· Displaying functions of a similar nature, such as login, sign up, and forgotten
password, so that they are related, inside a frame or colored rectangle.
What Is the Law of Continuation?
The law of continuation asserts that the human eye follows lines, curves, or a sequence
of shapes in order to determine a relationship between design elements.
The continuation can carry through both positive and negative spaces in designs.
Positive space is the space in a design that is made up of the subject – the image we
insert. Negative space is the rest of the space around and in between that object’s
edges. When we view a design layout, our eyes tend to draw a line that connects
different elements.
Have you still got your page? Good! Let’s turn it over and do another quick sketch. First,
find three different colors of pencil or pen or highlighter. This will help us understand
continuation, and you may probably recognize it right away as something that has
struck you several times before.
11
Using one pen, let’s draw a vertical, broken line – as straight as you can, no ruler
needed. Now, let’s take a different color of pen and put a broken wavy line horizontally
across it. Then, taking our third color of pen and keeping our eye on the point where
they intersect, let’s put a third line, broken (or dotted), across it.
Look away for a moment; then, look back at your sketch. Do you see how, for all three
lines, you follow them as they run through the point where they meet? What you don’t
see are six segments (three smaller lines of two colors) meeting in the middle. We can
immediately see that the items lying on any of these lines are connected. If we were to
add something else at the end of one line, we’d notice that this last item would be
disconnected or perhaps even sitting outside the overall design.
You don’t have to draw such lines in your design – they may be metaphorical (visually
and/or in writing). For example, you could fashion a line through the shape of the
content or graphical elements. Or, you could deliver it through numbering steps in a
process. Thus, a payment process might use numbered steps to show continuation, or it
might use a flow chart with arrows drawn, linking each step. Alternatively, you could use
a “funnel” shape to show progress towards the end of the process.
Remember that the human eye is accustomed to marking out pathways and following
them. Thankfully, there are traffic laws to keep us right on the road, but our eyes and
brains tend to like following lines and routes. That frees people to “go with the flow”, and
frees up designers to make use of this nature. That’s also good for keeping our users on
track, because we don’t want them straying from what we’d like them to see in our
designs.
The Take Away
With your designs, you’re looking to deliver both the most aesthetically appealing and
easy-to-use interactive product. The laws of proximity, uniform connectedness, and
continuation are tools to improve the usability and interaction from the user’s
perspective. While this isn’t necessarily magic, remember that optical illusions exploit
some guaranteed human eye-to-brain traits, which is the beauty of understanding
Gestalt principles, too.
You can organize related content for clarity using the laws of proximity and continuation.
You can also use the unified connectedness law to show a stronger correlation between
actions and content. Keeping these in mind, ask yourself which elements of your design
you want to group for the user.
Let’s quickly summarize the Gestalt principles we have seen so far:
12
· Similarity (also known as Invariance): The human eye tends to build a
relationship between similar elements within a design. Similarity can be achieved
using basic elements such as shapes, colors, and size.
· Continuation: The human eye follows the paths, lines, and curves of a design,
and prefers to see a continuous flow of visual elements rather than separated objects.
· Proximity (also known as Emergence): Simple shapes arranged together can
create a more complex image.
· Uniform Connectedness: This Law deals with a “grouping effect”: we perceive
elements as connected to each other thanks to colors, lines, frames, or other shapes.
References:
Hero Image: Author/Copyright holder: Eumedemito. Copyright terms and licence: Public
Domain.
13
https://www.interaction-design.org/literature/article/the-laws-of-figure-ground-
praegnanz-closure-and-common-fate-gestalt-principles-3
The Laws of Figure/Ground, Prägnanz, Closure, and Common Fate - Gestalt
Principles (3)
BY MADS SOEGAARD | 7 MIN READ
We’re now going to take a look at some more Gestalt principles, building on what we’ve
learned in the first two articles. This third piece is particularly useful because having a
good grasp of Figure/Ground, Prägnanz, Closure, and Common Fate will enhance your
14
ability to design with more thoughtfulness, confident that you’re making the best use of
some basic human tendencies to access your design and its impact.
“The eye tends to build a relationship between elements, it fills in the gaps, and
identifies hidden motion in the design.” Figure/Ground, Prägnanz, Closure, and
Common Fate are Gestalt Principles that help the eye build these relationships:
· The Figure/Ground law examines how the eye can separate shapes in a
design from the background of that design.
· The Prägnanz law shows how our eyes can simplify complex shapes into
simple shapes.
· The law of Closure refers to our tendency to complete an incomplete shape in
order to rationalize the whole.
· The law of Common Fate observes that when objects point in the same
direction, we see them as a related group.
This article is the third in the Gestalt series. Please refer to the previous two to learn
about the Laws of Similarity, Proximity, Uniform Connectedness, and Continuation.
So, for example, text on a page makes use of this law. The figure is the text itself and
the ground the paper on which the text sits.The law of Figure/Ground states that we can
distinguish an object (the figure of the rule) from background (the ground). This rule
shows that when we look at a design, we perceive the figure from the ground distinctly.
There are two main factors that affect the way we perceive the figure and the ground in
any given design:
· The size of the figure when compared to the background. For example, header
text is normally published in a larger font than body text. In this instance, the header is
the figure and the body the ground. The header stands out more to the eye than the
main body of text.
· The contrast between the figure and the ground. This is why most printed pages
will use black ink on a white background. The figure (the text) is at maximum contrast
with the ground (the page). Contrast provides a distinct barrier between the two. This
is why the readability of content can be impaired when there is little contrast between
the text and the page – it becomes more difficult for us to distinguish the figure from
the ground. Have you ever wondered why you never find red text on a blue or gray
screen? Contrast is the reason.
15
Author/Copyright holder: Klaus-Dieter Keller. Copyright terms and licence: Public
Domain.
The relationships between figure and ground can be classified into three categories:
Stable – In the case of a stable figure, the figure will be clearly identifiable from the
background, and one element clearly dominates the overall layout.
Reversible –In this case, the figure and background have near-equal density. This
enables the eye to flipthe figure with the background (hence “reversible”). This can be
used to create visual illusions in both web design and art. However, at any point in time,
a reversible design will have a clear figure and a clear ground.
A classic illustration of this is the image of a Rubin vase (have a look at the image
above). This tends to be a black vase that is set centrally over a square white
background. The symmetrical vase has a large, trumpet-funnel top that takes up nearly
the full width of the background’s top and tapers down into a narrow middle. Down the
middle, it has five contours and four projections before it flares out again to cover most
of the width of the bottom.
You’ve probably seen such a vase and know what’s coming next. Yes, that’s right! The
vase has “made” two white faces facing each other, not through it but set against what
our eyes now perceive as being black space behind them. It’s a neat trick!
Ambiguous – In an ambiguous design, there is little distinction between the ground and
the figure. At any point, a single element might be both figure and ground at the same
16
time. You can make your design ambiguous by blurring the boundaries between your
ground and figure.
It sounds difficult, but it’s a fascinating realm to explore, and there are many famous
examples of ambiguous design. M.C. Escher – a Dutch graphic artist - was a master at
this. His designs tapped ambiguity to the maximum and, thanks to that, we have
wonderful pictures of people climbing steps in buildings: some are going up; some are
going down, but at impossible angles. Escher used ambiguity to make waterfalls flow
around more buildings in an impossible way – the water initially flows downward, falling
in places, follows a seemingly logical course, and then, mysteriously, flows up again.
Ambiguous designs are yours for the taking of your inspiration, whether you want to
insert hidden writing, faces in profile that are also a single, different face, or faces made
of fruity parts.
Designing with the Figure/Ground in Mind
In the image at the start of this article, the Digital Camera World website menu uses the
Figure/Ground principle to differentiate between two menus (see the top sections of the
image). The use of drop shadow and color creates the illusion of the (lower) blue menu
being on a top layer, while the white menu remains part of the background.
You can also see figure/ground at work on the 500px.com website’s homepage (as
shown above). The background is a large and dominant image – the vista of a lake in a
majestic mountain wilderness - but the content is clearly identifiable, thanks to the use
of both space and contrast with the background. This stops the background from
overwhelming the content and distracting or confusing a visitor, who is probably joining
in with the couple (who sit with their backs to us) to take in the view. Cleverly “bulls-
eyed” in the lake and tapering up between the mountains is the text – the all-important
message.
The Law of Prägnanz (or Simplicity)
Prägnanz is a German word that means “good figure” or “pithiness” (literally defined as,
“brief, forceful and meaningful in expression”). The human eye likes to find simplicity
and order in complex shapes – it prevents us from being overwhelmed by information
overload.
17
Author/Copyright holder: Clint. Copyright terms and licence: CC BY 2.0
When we see convoluted shapes in a design, the eye simplifies these by transforming
them into a single, unified shape (by removing extraneous detail from these shapes).
Designing with the Law of Prägnanz in Mind – We can use the law of Prägnanz to help
when wireframinga website. Our eyes assemble the content blocks into a single page.
This law goes by the other name of “The Law of Good Gestalt”, and for good reason.
We humans like to make quick sense of things that would otherwise be upsettingly
disordered. We dislike flux and need to find meaning quickly. Luckily, we don’t even
have to think about doing this – our eyes have already got there!
When redesigning a site, you can apply Prägnanz law to wireframe the new concept
and place it alongside the current version of a page. The eye can swiftly pick out any
variances, and the user can quickly provide feedback on changes made – without the
need for content. That’s all there is to it.
The Law of Closure
18
The law of Closure explains how we perceive incomplete shapes (Palmer & Rock,
1994). When there is missing information in an image, the eye ignores the missing
information and fills in the gaps with lines, color or patterns from the surrounding area to
complete the image. In reality, there are no borders or lines between this area (the
background) outside the image we’re completing and the bits of background that we
have determined are now part of the image. The eye tells us otherwise.
Author/Copyright holder: Tangient LL. Copyright terms and licence: CC BY-SA 3.0
Designing with the Law of Closure in Mind – We can use the Law of Closure to achieve
visual effects such as the use in the World Wildlife Fund logo (pictured at the top of this
article). The panda is incomplete (there are no lines around the white areas), but our
eyes perceive a whole panda despite this. It takes some effort to overcome and notice
the otherwise random black shapes and spots that appear on every piece of white
background we can eventually make ourselves see.
The Law of Common Fate
The law of Common Fate says that we perceive shapes as lines moving along the
smoothest path. For example, we look at grouped elements and see them as moving in
a similar direction.
19
Author/Copyright holder: Alastair Rae. Copyright terms and licence: CC BY-SA 2.0
Let’s see this in action. If you’ve got a piece of paper handy, draw seven or eight circles
in a line beside each other. Above two of them, put a little arrowhead. Now, notice that
these two circles are different from the others, but in the same way. The others are
staying put, but the “arrowheaded” circles are going somewhere (the same direction);
they share a common fate.
Note: The elements do not have to be moving (though they can be), but they must
suggest motion for this law to work in your designs.
Designing with the Law of Common Fate in Mind - The law of Common Fate plays
an important role in design, for example, with nested menus and content. Take the
example of LinkedIn (as shown in the image up there at the start). LinkedIn have used
the law of common fate to build a relationship between sub-menus. When you move
over a menu item, the sub-menu item moves in the same direction as the last. This
creates a link between sub-menus in the minds of the users.
20
The Take Away
The principles of perceptual organization defined by Gestalt Psychology provide us with
valuable knowledge so we can design effective, efficient, and visually pleasing displays.
Throughout three articles, we have reviewed the most relevant for you as a designer:
· Law of Similarity
· Law of Proximity
· Law of Uniform Connectedness
· Law of Continuation
And, in this article, you have learned about the laws of Figure/Ground, Prägnanz,
Closure, and Common Fate. As we have seen, we have many exciting ways to reach
our users with designs. Are you ready to apply them?
21
