1. Gestalt Theory
Applied to Interface
Design for Websites
Explaining the laws of Gestalt in
Interface Design and their application
with websites interface design.
By Yahya Mofarreh
EDGE903 – Assignment-4

2. Outline
1. Overview
2. Laws of Gestalt Theory and their Application to Website Interface Design
3. Gestalt Theory in Practice
4. References
Gestalt
Overview In Practice References
Theory

3. Gestalt Theory
Gestalt Theory – Introduction – Gestalt Theory Definition
 Gestalt loosely translated means “shape” or “form” (Behrens, R. 1984).
 “things are affected by where they are and by what surrounds them...so that
things are better described as "more than the sum of their parts” – (Behrens
1984).
 To explain this it is important when creating something to not only look at
how it comes together as a whole but also how each part looks and how it
looks within its surroundings, in order to understand how someone will see
and perceive your design
“The whole is greater than the
sum of it’s parts”
Gestalt
Overview In Practice References
Theory

4. Gestalt Theory
Gestalt Theory – Introduction – Interface Definition
 Interface is defined as “A boundary across which two independent systems
meet and act on or communicate with each other”, (Webopedia, (N.D.).
 In this tool, when we refer to interface we refer to the layout and look of a
website, how a user (one system) interacts with the website(another system).
 In web design it is of vital importance how the website is set out.
 how easy it is to use and how easy it is to understand will directly influence if
and how the user uses the website.
 This tool aims to give guidance to people designing website Interfaces using
the Gestalt Theory as guidelines.
Gestalt
Overview In Practice References
Theory

5. Gestalt Theory
Gestalt Theory – Introduction – Why Gestalt Theory
 Gestalt Theory can be universally applied to design, for this tool we have
broken up the laws into10 different laws that can be individually applied to
website interface design.
 These laws can be directly applied to any part of interface design and by using
them as a guide or tool when designing they allow a designer to create a
interface that the user will understand how to use without needing instructions.
 This tool will firstly explain the laws in a way that they can be simply applied
to website interface design and then give some examples of them.
 Finally this tool will provide examples of site where the rules have been
applied and where they have been ignored.
Gestalt
Overview In Practice References
Theory

6. Gestalt Theory
Gestalt Theory – The Laws of Gestalt Theory
1. Law of Similarity
2. Law of Common Fate
3. Law of Continuation
4. Law of Unity
5. Law of Proximity
6. Law of Symmetry
7. Law of Closer
8. Law of Figure and Ground
9. Law of Focal Point
10. Law of Simplicity
Gestalt
Overview In Practice References
Theory

7. Gestalt Laws
 Law of Similarity
Objects that are similar to one
another will be grouped
together, (Mullet, K. &
Sano,1995).
Examples of this will be in a
website’s buttons that look the
same, they will be grouped
together. With this a designer is
able to create different parts to
the interface of the website and
convey to the user how different
groups of buttons are related to
different concepts for example.
Gestalt
Overview In Practice References
Theory

8. Gestalt Laws
 Law of Common Fate
Objects with a common movement will
be grouped together, (Ehrenstein, 2004).
An example of this is with text
size/direction/flow/alignment on a site.
If a title and the content are the same on
a site they will be grouped together as
the same thing ,this may not work as the
title could be missed, if the title was
similar, but bold compared to content, it
would still flow in the same way give it
the ability to stand out whilst be related
to the content.
Gestalt
Overview In Practice References
Theory

9. Gestalt Laws
 Law of Continuation
Objects that are linear or are in
the same direction will be
grouped, (Mullet, K. &
Sano,1995).
Our previous example of a
website’s buttons can be used
as most sites would make their
buttons liner in order to give a
clear definition to the group of
buttons. This allows the user to
understand their similar
functions as well as separate
them from other parts of the
websites interface.
Gestalt
Overview In Practice References
Theory

10. Gestalt Laws
 Law of Unity
Is the law of arrangement, where
elements and structures that have a
visual connection will look like
they belong
together(Chang, 2002), this is
described as being in unity.
This can be particularly important
as this law can be used to
breakdown the different parts of a
website’s interface, each part can
then be given a particular concept
and similar concepts can be
grouped together by the way they
look.
Gestalt
Overview In Practice References
Theory

11. Gestalt Laws
 Law of Proximity
Objects are more likely to be
grouped together, the closer
they are together (Mullet, K.
& Sano,1995).
An example of this would be
when hyperlinks or buttons
are grouped closely
together, they will be
considered related to the
same thing possibly the same
link if they are close together
as well as providing the same
function
Gestalt
Overview In Practice References
Theory

12. Gestalt Laws
 Law of Symmetry
It is important that objects are
properly balanced to complete
the design presented
(Chang, 2002).
An example of this will be
columns or blocks of text on a
site, if they are not
symmetrical the design will be
less appealing.
By making the blocks of text
clearly defined it is clear to the
user the boundaries of the
information as well as how the
are separate or how they relate.
Gestalt
Overview In Practice References
Theory

13. Gestalt Laws
 Law of Closure
People have a tendency to
complete objects they can not
fully perceive.
(Ehrenstein, 2004).
This can be used to a web
=
designer’s advantage, by
creating a flow within the site
by using partial images that
the user will complete, they
are able to direct the users
attention to the parts of the
site desired.
Gestalt
Overview In Practice References
Theory

14. Gestalt Laws
 Law of Figure and Ground
Similar elements (figure) are
contrasted with dissimilar elements
(ground) to give the impression of a
whole. (Mullet, K. & Sano,1995).
This can be important in website
interface design in choosing correct
background/foreground for the site.
If, like in the picture opposite these
are confused or swapped in can be
unclear to the user what their
attention should be focussed on.
Figure (Skaalid, B 1999)
Gestalt
Overview Theory
In Practice References

15. Gestalt Laws
 Law of Focal Point
The law of Focal Point describes
things that stand out, that will catch
and maintain the users
attention(Chang, 2002).
It is important to know what draws
people’s attention in website !
Interface Design and ensure you are
directing them to what you want
them to see.
An example of this would be to have
your main point large, bold and
centred in your interface, without to
many things around to draw attention
away from it.
. Gestalt
Overview In Practice References
Theory

16. Gestalt Laws
 Law of Simplicity
People will unconsciously try to
make sense of complex things
by grouping and simplifying
them, (Chang, 2002).
This is an important law for
wed designers to understand as
people will automatically want
to simplify what they are
presented with so it is in both
parties interest to have the
website interface start simply
to begin with.
Gestalt
Overview In Practice References
Theory

17. Gestalt Theory
In Practice
Overview
 The laws of Gestalt that can be applied to website Interface Design have
all been listed, explained and examples have been provided of how they
apply to website interface design.
 Now this tool will show two separate sites where you can see the affects
of applying the guidelines and how that affects the interface and how not
applying the guidelines affects it.
Gestalt
Overview In Practice References
Theory

18. Gestalt Theory
In Practice
The Gestalt Laws Where not Applied
Gestalt
Overview In Practice References
Theory

19. Gestalt Theory
In Practice
The Gestalt Laws Where Applied
Gestalt
Overview In Practice References
Theory

20. References
 References
 Behrens, R. (1984). Design in the visual arts. Englewood Cliffs, NJ: Prentice-Hall, Inc.
 Webopedia, (N.D.), Interface, Accessed on 20/10/2011, Webopdeia (n.d.)
http://www.webopedia.com/TERM/I/interface.html
 Chang, D., Dooley, L., & Tuovinen, J. E. (2002). Gestalt Theory in Visual Screen Design – A New Look at an Old
Subject. Paper presented at 7th World Conference on Computers in Education, 29th July – 3rd August, Australian
Computer Society, Copenhagen
 Mullet, K. & Sano, D. (1995). Designing visual interfaces: Communication oriented techniques. Englewood Cliffs, NJ:
Prentice Hall.
 Ehrenstein, W. H. (2004). Perceptual Organization. International Encyclopedia of Social and Behavioural Sciences, pp.
11227-11231
 Skaalid, B (1999), Web Design For Instruction – Figure and Ground, Accessed
20/10/2011, http://www.usask.ca/education/coursework/skaalid/theory/gestalt/figround.htm
 Last Name Unkown, M, (2011), The World’s Worst Website, Accessed
20/10/2011, http://www.angelfire.com/super/badwebs/
 Apple Co., (2011), Official Apple Store, Accessed 20/10/2011, http://store.apple.com/au?afid=p219|GOAU&cid=AOS-
AP-AU-Google-AA0000018642
Gestalt
Overview In Practice References
Theory