Visual perception fundamentals for web designers

1. Mater of Arts in Communication Design
WEB DESIGN
Visual perception
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
1

2. Visual perception is the ability to
interpret the surrounding environment
by processing information that is
contained invisible light.
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
2

3. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
3

4. I see vs I feel
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
4

5. 1/3 of brain energy!
• We get 70% of information by vision
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
5

6. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
6

7. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
7

8. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
8

9. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
9

10. Cones
• Sensitive to colors
• Concentrated in the center
• 6,000,000
Rodes
•
•
•
•
•
Sensitive to light intensity
Insensitive to colors
Night vision and movement
Concentrated in the periphery
120,000,000
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
10

11. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
11

12. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
12

13. Sensitivity is not omogenueous
• Diferences in green
are are more
perceived then in
red area
• More pigment
addition needed to
feel a different
color
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
13

14. Blind spot
Right eye
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
14

15. Focusing
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
15

16. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
16

17. Geting older makes focusing less easy
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
17

18. Optic chiasma
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
18

19. Vision and thinking
Vision and thinking are
always interconnected
Data are continuously under
elaboration.
We recognize objects, even
if we see them only partially
and we some times we are
deceived.
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
19

20. Automatic correction of brightness
On the sun
Into a room
White paper
120
6
Black ink
12
0.6
David Hubel
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
20

21. EMOTION
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
21

22. Synestesia
Synesthesia (also spelled synæsthesia or
synaesthesia, from the ancient Greek σύν
[syn], "together", and αἴσθησις *aisthēsis],
"sensation") is a neurological phenomenon
in which stimulation of one sensory or
cognitive pathway leads to automatic,
involuntary experiences in a second sensory
or cognitive pathway
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
22

23. WEB DESIGN NABA 2014 Roberto DADDA
Tina Modotti
Titolo lezione
23

24. WEB DESIGN NABA 2014 Roberto DADDA
Ansel Adams
Titolo lezione
24

25. WEB DESIGN NABA 2014 Roberto DADDA
Henry Cartier Bresson
Titolo lezione
25

26. Different distance or different dimension?
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
26

27. Gustave Caillebotte (Parigi, 19 agosto 1848 – Gennevilliers, 21 febbraio 1894)
27
WEB DESIGN NABA 2014 Roberto DADDA
Titolo lezione

28. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
28

29. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
29

30. Viewing point
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
30

31. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
31

32. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
32

33. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
33

34. Lateral inhibition (Mach effect)
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
34

35. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
35

36. Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
36

37. Eye movements
• Saccade refers to a rapid jerk-like movement of the
eyeball which subserves vision by redirecting the
visual axis to a new location. (400⁰/s, 20-50 ms)
• Fixation refers to keeping eye on a specific position.
Vision is dependent upon the information taken in
during fixation pauses between saccades: no useful
visual information is taken in while the eyes are
making a saccadic movement.
• Scanpath the sum of those actions
http://www.scholarpedia.org/article/Human_saccadic_eye_movements
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
37

38. Some measured data
Action
Silent reading
Loud reading
Visual search
Image
inspection
Fixation time Saccade angle
ms
⁰
225
2⁰ (8 char)
275
1.5⁰ (6 char)
275
3⁰
330
4⁰
Mean values
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
38

39. Roberto Dadda
www.dadda.it
roberto@dadda.it
+39 338 775 22 03
Twitter, facebook, linkedin: robertodadda
Titolo lezione
WEB DESIGN NABA 2014 Roberto DADDA
39