Gestalt and Web Design
Gestalt and Web Design
An Introduction
When interacting with the physical and graphical worlds we are dependent upon the
visual sense to provide us with an accurate representation of objects, items, and
visual scenes. Without the capacity to form an accurate impression of our
environment, our every attempt to interact or use visual information to plan our
movements would either be error-strewn or significantly slower. We need only observe
the difficulties of those suffering with some form of visual deficit to appreciate how
important the visual sense is to our every move. As designers it is our job to support
users not only by providing them with the information necessary for their tasks, aims
and objectives, but to arrange this information in a way that promotes automatic
perception. In addition, you must present information in a way that enables the user to
focus on what they are trying to achieve, without having to devote significant amounts
of time translating their intentions according to the constraints of the product, device
or system they are interacting with.
Human vision is not a direct process where an exact representation is formed from
the light energy entering the eye. Instead, there are additive processes in the visual
system, which influence the mental representation we form for each visual event.
These processes convert light energy from our environment into meaningful and
usable representations of all visual elements. Without this ability, the world would
simply appear to be a mass of dissociated lines, curves, and shapes with other
environmental factors, such as shadows and light intensity, having little impact on our
understanding of what is present in our surroundings. The form-generating processes
in human visual perception have been the focus of much study; spawning numerous
schools of thought as a direct result.
Gestalt psychology has provided us with one of the most compelling accounts of the
processes that underlie human visual perception. The Gestaltists (Gestalt
psychologists) attempt to understand visual processing in terms of how cognitive
processes are organised, as opposed to investigating the elements of these cognitive
processes. The Gestalt approach emphasises the role of human perception in helping
us generate whole forms from the individual elements that comprise all meaningful
objects, items and visual scenes, and in a world where there is a constant supply of
competing visual information.
1
Gestalt thinking has had a significant impact on the way we analyse visual displays;
providing us with a number of principles of perceptual organisation, which can be
used as design guides or important considerations when attempting to accommodate
the biases and quirks that characterise human visual processing. Throughout this
course we will describe these principles of perceptual organisation and provide
examples for each, stating how they have been employed in existing web designs to
support the nature of visual perception and, as a direct result, improve the user
experience associated with each design. Furthermore, we identify some of the main
benefits of adopting a Gestalt-driven approach to web design; again providing
examples of these benefits from successful designs. There is an emphasis on
demonstrating how the Gestalt principles directly impact on web user experience, to
not only show what you can do, but how you can implement changes to your designs
according to our perceptual biases.
By the end of Gestalt Psychology and Web Design: The Essential Guide you will:
2
● How they influence our perception of the world
as well as...
● The Gestalt laws and how they relate to web design
● How to adopt a Gestalt-driven approach to web design
● Examples of the Gestalt laws in web design
● How to analyse existing displays in terms of the Gestalt laws
● The benefits of a Gestalt driven approach, and
● How to improve web user experience according to the Gestalt laws
You will also take away some of the best resources currently available and a
consolidated list of recommended reading materials, videos and useful links to relieve
you of the task of trawling the internet searching for that vital piece of information.
Regardless of whether you are new to web design or a seasoned professional, if you
would like to understand how designers can improve web user experience with a
Gestalt-driven approach then this is the course for you. By the end of the course you
should have a clear understanding of how you can produce web displays that support
and even exploit the nature of human visual perception. You do not need to have any
specific background either in web design, psychology or any other discipline to benefit
from Gestalt Psychology and Web Design: The Essential Guide, you simply need the
desire to learn and an interest in improving user experiences.
Please note: You can start this course at any time and there is no fixed time span for
you to complete the course. All of the course materials are available to you for the
whole duration of your membership and we will be marking questions for as long as
there are active members. Therefore, even if you are the only course taker at one time
we will still mark all of your questions. There is no specific date for the release of
course certificates; instead, you will receive a course certificate when you have
answered every question from all lessons within the course.
copyright: pd
3
Structuralism
In the image above, Wilhelm Wundt (16 August 1832 - 31 August 1920) can be seen in
the first experimental psychology laboratory at The University of Leipzig. Wundt is
regarded as the founding father of experimental psychology. Wundt believed
psychology needed to focus on the person's subjective experiences and to analyse
consciousness under controlled conditions to derive an understanding of how the
human mind truly works.
In 1911, Max Wertheimer (April 15, 1880 - October 12, 1943), one of the three founding
fathers of Gestalt psychology with Kurt Koffka and Wolfgang Kohler, alighted a train at
Frankfurt station and purchased a toy stroboscope. This toy is a mechanical device
that creates the illusion of movement through the alternation of two slightly different
images, such as the bird in the cage optical illusion.
This led Wertheimer to ponder how structuralism could possibly explain such a
phenomenon. The illusion of movement induced by alternating fixed images is termed
apparent movement. Wertheimer pondered this illusion and acknowledged
structuralist theory could not account for apparent movement, as the emphasis is on
4
the individual components that comprise the 'whole', rather than the 'whole' itself.
Therefore, some alternative theory was required to accommodate the phenomenon of
alternative movement, and 'hey presto!' Gestalt psychology was born.
Explaining a perception that is present one moment and absent the next, in terms of
structuralism's 'sensations' idea is difficult, especially as the maintained retinal image
is the same as the image whether visible or not. This led the Gestalt psychologists
Wertheimer, Koffka, and Kohler to propose that, in terms of human perception, 'the
whole is different than the sum of its parts', which is often misquoted as 'the whole is
greater than the sum of its parts. They claimed that perceptual organisation underlies
human perception we perceive the whole object before the component parts.
In Summary
copyright: allRightsReserved
Recognition of meaningful items, objects or any other visual element does not occur
through a process of identifying and piecing together composite parts. Instead, we
identify whole meaningful objects immediately and without conscious effort. For
instance, take a look at the black and white image above (from 'The Intelligent Eye' by
Richard Gregory); do you see anything meaningful?
Emergence
Now, if you have failed to see it already, within this image there is a Dalmatian dog
sniffing at the foot of a tree. When you noticed the dog did you have to identify a nose,
ears, eyes, the spots of the dog and the tail? It would not be presumptuous to assume
you simply saw the dog immediately once you were made aware there was some
meaningful 'whole' visual element to seek out. The perceptual phenomenon
5
demonstrated with the Dalmatian image is referred to as 'Emergence', which captures
the sensation of meaningful elements seemingly emerging from our visual scene.
In Summary
copyright: pd
The three figures shown above exemplify the capacity of the human visual system to
generate complete forms from limited sensory information. In the bottom left we see
either a complete, six-point star or a whole, white circle set within these points, the
dotted lines in the middle of the image are seen as a complete winding curve, and the
top right figure is perceived as a whole circle dissected by two white crosses.
All of these perceptions represent continuous forms where the actual, available
sensory information is not as explicit or complete. The visual system effectively fills in
the blanks to generate a more complete image than the sensory stimulus actually
provides.
If the visual system made conclusions on the basis of limited sensory information, we
would frequently derive the wrong impression from our environment. For example,
think of pint glasses stacked on a shelf; when we go to pick one of the glasses from
the back (i.e. one obscured by those at the front) we have a complete mental image of
the glass; we do not think it begins and ends at the visible portion (e.g. the rim of the
glass).
Therefore, we can prepare to pick the glass up whilst accounting for the length,
weight, width, and any other factor that will determine grip, pressure and the speed we
lift the glass. For this reason, human perception is said to be constructive, in that a
whole mental representation is constructed from less explicit sensory information.
Therefore, the visual system helps us to form a comprehensive view of our
surroundings, even when there is a restricted amount of information available.
However, illusory contours were being exploited in art from the Middle Ages, so our
awareness of this perceptual quality dates back long before the Society for
Experimental Psychology was established in the late 19th century. Perhaps the most
common example of illusory contours in action comes from Kanizsa's Figures, which
perfectly demonstrate how we perceive clearly defined shapes when the contours
required to generate such a shape are not present.
In Summary
We are often deprived of a complete view of our surroundings and objects within it;
therefore, human perception has to fill in the blanks to help us form a complete and
meaningful mental representation of each and every visual scene. The perceptual
7
ability to form complete representations from limited sensory information is referred
to as reification, and represents one of the key principles that underpin Gestalt
thinking.
1.4: Multistability: Gestalt Psychology
copyright: pd
Multistability Examples
The second image (a Necker cube) has three potential interpretations: a cube facing
south-westerly, a cube facing north-easterly or a 2D shape consisting of a series of
8
intersecting lines with a diamond in the centre. Typically, we alternate between the
two cube interpretations; however, it is often difficult to consciously force oneself to
achieve the alternative interpretation when we have identified one particular cube
form.
The third example of multistable perception is an ambiguous image, which has two
common interpretations: a duck or a rabbit. The alternation between interpretations
usually occurs according to where we fixate; if we focus on the left-hand side of the
image we generally see a duck, whilst focussing on the right-hand side stimulates the
second interpretation (i.e. a rabbit).
The three examples highlight the unconscious effect the visual system has on what
we perceive. We can fixate on different parts of the image or try to force ourselves to
achieve a particular interpretation, but it is by and large out of our control. If we are
drawn to a certain interpretation by someone else or the image is accompanied by
some descriptive text, we are often oblivious to the alternative interpretation, but once
the visual system has detected the presence of another meaningful form multistability
is then experienced.
In Summary
Question 1
Please outline the principle of Multistability and provide one example of this
perceptual phenomenon within your answer.
(5 points)
copyright: pd
Invariance
The graphic above shows four geometrical objects under various conditions;
collectively they illustrate the Gestalt principle of 'Invariance'. The Gestalt principle of
invariance is used to describe the human perceptual ability to perceive simple
geometrical objects as constant regardless of their ( A.) rotation/orientation, (B.)
translation, (C.) scale and elastic deformations, (D.) lighting and variation in
component features.
In Summary
Question 1
11
1.6: Figure/Ground Organisation: Gestalt Psychology
copyright: pd
When we view any scene, we must identify the most important and personally relevant
parts in order to direct our attention and conserve time and effort. Human perception
biases our view to help us focus on specific elements and filter out the rest of the
scene. This perceptual phenomenon is a key principle within Gestalt psychology and is
referred to as figure/ground organisation'.
By switching our focus, the opposite holds true in both cases. Therefore, the
figure/ground distinction arises as a result of our focus of attention (i.e. where we are
looking) and the perceptual ability to limit the amount of attention dedicated to all
elements outside of our focus.
In Summary
The key to this change in perspective (from faces to a vase) arises from a switch in
attention or a change in edge assignment. In the faces-vase image, when the curved
edges are assigned inward we see a vase, whilst the two faces are perceived when the
curved edges are assigned outward. Therefore, the Gestalt principle of figure/ground
organisation observes the effect of attention on our view of the world.
Question 1
13
Please describe how "Figure/Ground" organisation affects human perception. Please
also provide examples within your answer.
copyright: pd
The law of Pragnanz describes the tendency to see stimulus patterns in as simple
form as possible. The simplification of object perception plays an essential role in
helping us see order and regularity in a world of constant distractions and visual
competition; with innumerable elements constantly fighting for our limited attention
and processing capacity.
'Pragnanz'
14
We are constantly trying to order and make sense of visual information; regularity
means we can extrapolate from one situation to another. Without the normalisation of
visual information we would see dissociated lines, curves, blended colours, there
would be no regularity to help us recognise anything. Furthermore, if we are unable to
normalise information entering the brain through the visual organs, everything must be
processed as if it were new, consuming an enormous amount of processing power
and attention.
Not only does the law of Pragnanz benefit the allocation of limited processing and
attentional resources, it helps the majority of us to see things in the same way as one
another. Consider the task of asking someone to collect an item from another room
for you; if we see things in completely different ways, it would be nigh on impossible.
Therefore, the law of Pragnanz, along with the other Gestalt principles of perceptual
organisation, plays an immeasurable role in ensuring we can interact with our
environment safely and without the need for constant, effortful analysis of our
surroundings. Imagine where our ancestors would be if they had to focus on a shape
in the distance and analyse its many possible forms before they were able to tell
whether it was a predator; they would likely have barely lasted a day, signalling the end
of humankind before it had truly begun. We cannot underestimate the importance of
the neural processes that bias human perception in such ways to ensure we see
regularity, structure, order and form where we could just as easily not.
The Gestalt principles may only outline the many perceptual biases that underlie
human perception, but they help us appreciate the amazing capacity of the human
mind to process an enormous amount of disconnected information into a coherent,
meaningful and usable representation of the world to help us interact with our
surroundings safely, securely, confidently, quickly and accurately.
In Summary
The law of Pragnanz describes the tendency to see stimulus patterns in as simple
form as possible. The simplification of object perception plays an essential role in
helping us see order and regularity in a world of constant distractions and visual
competition; with innumerable elements constantly fighting for our limited attention
and processing capacity.
15
PLEASE ANSWER THE FOLLOWING QUESTIONS
Question 1
copyright: allRightsReserved
We cannot choose to see Wolverine, nor can we choose to see two Batman figures.
Our sense-making capacity must be instant to enable interaction with a world that
refuses to wait for us. This immediacy leads us to make certain interpretations of the
world, which presents designers with the opportunity to direct their users to see what
they want them to see.
Question 1
The perceptual experience of alternating between the Wolverine figure and the two
Batman figures is an example of which Gestalt principle of perceptual organisation?
(1 point)
16
Multistability
Invariance
Incompatibility
copyright: allRightsReserved
The 'Wolf in Sheep's Clothing' optical illusion from Redux Magazine serves as an
example of playing with perception. For designers, the Gestalt laws of perceptual
organisation should not be thought of as purely descriptions of perceptual
phenomena; instead, they present us with ways and methods of viewing and analysing
visual scenes, displays and individual elements. Collectively, they allow us to innovate
and improve viewing and user experiences.
The Gestalt laws do not just enable designers to improve the functional aspects of the
viewing and user experiences. They can be utilised to enhance the pleasurable,
aesthetic, and fun qualities within our products.
Question 1
The 'Wolf in Sheep's Clothing' image demonstrates how the Gestalt principles of
perceptual organisation...?
(1 point)
can be used to play with our perception of the world
can help circumvent our form-generating bias
can be used to introduce new colour experiences
17