Lectures for the course "Ergonomics applied to the usability of web pages and apps" held at the School of design of Politecnico di milano in the first semester of 2021-2022 academic year
1. 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
3. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 3
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
7. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 7
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).
9. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 10
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.
18. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 19
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
21. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 22
We, as designers, need to understand what happens in the
transmission of visual data from eyes to brain cortex.
23. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 24
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.
36. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 37
In opposition to the chemical approach of
Wundt school in Leipzig.
2H2 + O2 = 2H2O
47. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 48
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.
64. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 65
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
65. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 66
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
73. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 74
Art and Visual Perception: A Psychology of the Creative Eye (ISBN: 978-0-520-02161-7)
74. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 75
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.
75. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 76
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.
78. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 79
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.
79. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 80
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
84. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 85
3 Closure
8
5
Closure is a common design technique that uses the human
eye's tendency to see closed shapes.
91. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 92
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
92. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 93
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.
97. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 98
Actors
Sponsors
Helpers
GOOD DIAGONAL helps giving correct relationships
Group by shape, color, proximity
Design and semantic grouping
Blue triangles help identify groups
103. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 104
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)
105. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 106
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.
106. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 107
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?
108. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 109
Emoticons!
1
0
9
http://theconversation.com/emoticons-and-symbols-arent-ruining-language-theyre-revolutionizing-it-38408
Puck, March 30, 1881
109. www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 110
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.