08 vision and gestalt

www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 1
ERGONOMICS APPLIED TO THE DESIGN OF USABLE WEB
PAGES AND APPS
Roberto DADDA and Paolo NEGRI

Visual perception
&
Gestalt
2

Visual Perception:
is a process of acquiring knowledge about environmental
objects and events by extracting information from the
light they emit or reflect
Stephen Palmer
Vision Science
University of California at Berkeley

Structure of human eye

Just
a
camera

6

Eye anatomy
7
Fovea: In the eye, a tiny pit located
in the macula of the retina that
provides the clearest vision of all.
Only in the fovea are the layers of
the retina spread aside to let light
fall directly on the cones, the cells
that give the sharpest image. Also
called the central fovea or fovea
centralis.
The word "fovea" is the Latin word
for "small pit." The fovea is literally
a small depression (in the retina).

Retina
9

Rods Cones
Used for scotopic vision (vision under low light conditions) Used for photopic vision (vision under high light conditions)
Very light sensitive; sensitive to scattered light Not very light sensitive; sensitive to only direct light
Loss causes night blindness Loss causes legal blindness
Low visual acuity High visual acuity; better spatial resolution
Not present in fovea Concentrated in fovea
Slow response to light, stimuli added over time
Fast response to light, can perceive more rapid changes in
stimuli
Have more pigment than cones, so can detect lower light levels Have less pigment than rods, require more light to detect images
Stacks of membrane-enclosed disks are unattached to cell membrane
directly
Disks are attached to outer membrane
About 120 million rods distributed around the retina[12]
About 6 million cones distributed in each retina[12]
One type of photosensitive pigment Three types of photosensitive pigment in humans
Confer achromatic vision Confer color vision
Kandel, E. R.; Schwartz, J.H.; Jessell, T.M. (2000). Principles of Neural Science (4th ed.). New York: McGraw-Hill. pp. 507–513. ISBN 0-8385-7701-6.

Center (fovea) precise vision - Perifery: motion

Cones

1
5
Design
by evolution

What your eye sees before brain
1
6

53 Megapixels camera!
1
8

Using peripheral vision
• Almost only RODS, sensitive to
movements but not to colours
• When you do not want distract your
user avoid movements or luminosity
changes on the periphery
• If you want to attract his attention
move or change luminosity
19

Blind spot
2
0

Accommodation
2
1

We, as designers, need to understand what happens in the
transmission of visual data from eyes to brain cortex.

Black box method

The girl on the left is actually almost twice as far away from the observer as the man on the right. However, when
the room is viewed through the peephole, the actual distances can not be seen. Since you perceive the two people
to be at the same distance from you, the one who has the larger visual angle appears larger.

Ames room
2
5

Optic nerves and visual cortex
2
7

8
Gustave Caillebotte 1828-1894
Paris street in a rainy day

Why 2 eyes?
2
9

Eye movements
3
1

(Yarbus, 1967)

Max Wertheimer, φ motion. 1912
Max Wertheimer (15 April 1880 – 12 October 1943)

In opposition to the chemical approach of
Wundt school in Leipzig.
2H2 + O2 = 2H2O

WE build reality,
we do not get it
from outside!
38
Excellence in usability

It comes from Immanuel Kant kategorie

Optical illusions
Maurits Cornelis Escher Leeuwarden, 17 giugno 1898 – Laren, 27 marzo 1972)

Muller Lyer illusion
4
4
Muller Lyer illusion

45

46

Light is supposed coming from top - Shading
Brightness of a surface depends on its orientation with respect to the light source. The visual system assumes that the light comes from
above. Brighter patches appear to be tilted up facing the light.

Impossible shapes

Illusory contours
Kanizsa triangle

Fake movement effect

Rubin reversible figures

Ambiguous line drawing

ambiguous line drawing (Necker cube)

Wertheimer Benussi ring

5
8

Checker shadow illusion Adelson effect
5
9

Context
guessing
6
2

Gestalt WHAT?
6
5
German a word meaning, roughly "whole form" or “configuration"
A Theory in Cognitive Science and Psychology. Gestalt psychology tries to understand the
laws of our ability to acquire and maintain stable percepts in a noisy world. (vision,
auditory, somatosensory) Not a quantitative theory: no way to predict how these
principles combine or interact.
"The whole is different* than the sum of its parts”
(Kurt Koffka)
The term "sum," in German "Zusammenfassung," means "summing up" or "synopsis", not
arithmetic sum.
* Different NOT greater as somebody affirms.
Source: 15-494 Cognitive Robotics David S. Touretzky & Ethan Tira-Thompson Carnegie Mellon Spring 2008

Gestalt WHY?
6
6
Designer: Why do I need to know this?
It's imperative that we should use psychological
techniques more in our designs
The best design comes when proven theory
works in harmony with art
Gestalt theory describes how the mind
organizes visual data.
The stronger the clarity of form, the more
effective the design.
Ernest Mach, 1903

PHY phenomenon

S.Dalì, 1935

Art and Visual Perception: A Psychology of the Creative Eye (ISBN: 978-0-520-02161-7)

1 Similarity
7
5
When objects looks similar to one another, viewers
will often see the individual elements as part of
a pattern or group.

1 Similarity
7
6
A particular element can be emphasised when it's dissimilar,
breaking the pattern of similarity. This effect is called an
anomaly.

1 Similarity
7
7

2 Continuation
7
9
Continuation is the principle through which the eye is
drawn along a path, line or curve, preferring to see a
single continuous figure than separate lines.

2 Continuation, AKA common fate
8
0
This illustration consists of 4 lines that meet at
the central point, but we prefer to see two
intersecting lines rather than 4 lines that
converge
1
2
3
4

2 Continuation
8
3

3 Closure
8
5
Closure is a common design technique that uses the human
eye's tendency to see closed shapes.

3 Closure
8
6

3 Closure
8
7
Stencil

3 Closure
8
8
ASCII art

3 Closure
9
0

In cartoons we “close”
9
1
Sun Sunset

4 Proximity
9
2
Proximity uses the close arrangement of elements to
create a group association between those objects.
AKA grouping
The arrangement
of boxes on the
left are not
close enough to
have proximity,
while the group
on the right is
perceived as a
single whole
element

4 Proximity
9
3
Proximity or
grouping can be
achieved with
lots of different
commonality
including shape,
colour, texture,
size or any other
visual attribute.

4 Proximity
9
4

4 Proximity
9
5

Menus are groups
Use consistently
9
6

Separators
9
7

Actors
Sponsors
Helpers
GOOD DIAGONAL helps giving correct relationships
Group by shape, color, proximity
Design and semantic grouping
Blue triangles help identify groups

Grouping in forms
1
0
0

Grouping icons
1
0
3
Similarity helps grouping

5 Figure/Ground
1
0
4
This principle describes the eye's tendency to see
and separate objects from their surrounding
background.
AKA
Prägnanz
(succinctness, conciseness)

5 Figure/Ground
1
0
5

5 Figure/Ground
1
0
6
Everything that is not figure is considered ground, which can be used to
create some interesting visual effects and tricks, particularly when the
designer or artist introduces deliberate ambiguity - a favourite technique
of the surrealist MC Escher.

5 Figure/Ground
1
0
7
Are your foreground objects working with your backgrounds to create a lovely,
harmonious whole? Are your foregrounds fighting for the users’ attention? Are the
backgrounds serving as an aesthetically and functionally workable backdrop to contain
and set off your foreground elements?

5 Figure/Ground
1
0
8
The image that gets the
attention WINS!

Emoticons!
1
0
9
http://theconversation.com/emoticons-and-symbols-arent-ruining-language-theyre-revolutionizing-it-38408
Puck, March 30, 1881

6 Symmetry and order
1
1
0
Put simply, this principle says that a composition should not provide a sense of disorder or imbalance, as otherwise
the viewer will waste time trying to locate the missing element, or fix the problem, rather than focusing on the
message or instruction.

1
1
1

1
1
2

Gestalt in a nutshell
1
1
4
Order

Rorschach test
1
1
5
https://en.wikipedia.org/wiki/Rorschach_test

More than one rule applies
in the same scenarios
1
1
6

multistability

Experience
1
1
8

Brain against brain
1
1
9

Takete & maluma
1
2
0
Köhler, 1929

Angular girus & autism spectrum disorder

Functional
widgets
Banner

Caos

Gestalt consistency
Smashing magazine 2019 04

Usability
Roberto DADDA
roberto@dadda.it
www.dadda.it
Skype, Facebook e Twitter robertodadda

08 vision and gestalt

More Related Content

Similar to 08 vision and gestalt (13)

More from Roberto Dadda (19)

Recently uploaded (20)

08 vision and gestalt