Visuals affect emotions and make a significant impact on our perception of a product’s performance. Let’s do a deep dive on how visual perception works and what product teams can do to take advantage of that knowledge.
As human beings, we enjoy beautiful and attractive products. But have you ever noticed these type of products also seem to work better? The reason for that is our emotional system which has a significant impact on how our cognitive system operates. When we interact with an artifact, its appearance has an immediate emotional effect on us. Emotions tell us if the situation is safe or dangerous, good or bad. They influence all the decisions we are making.
In this talk, I will explain why and how emotions can influence a product’s success and what role visuals play in producing them. Through a series of various screen examples, I will demonstrate how humans perceive objects, why establishing a clear visual hierarchy is essential, and how details matter.
Not only designers but all product team members, especially product/project managers and developers should have solid knowledge of human visual perception. This will improve their understanding of designs, communication with designers and will inevitably lead to producing better user experiences.
1. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
@ITCAMPRO #ITCAMP18Community Conference for IT Professionals
Attractive Things Work Better
Ivana Miličić
Digital Product Designer
linkedin.com/in/ivanamilicic
@ive77i
5. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
Emotional system changes how
the cognitive system operates
7. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
EMOTIONS ARE IMPORTANT
›› thought processes narrowing
›› aspects relevant to a problem
›› escaping from danger
NEGATIVE
😔 😢 😫 😤
8. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› learning
›› curiosity
›› creativity
›› brainstorming
POSITIVE
EMOTIONS ARE IMPORTANT 🙂 😂 😊 😀
9. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
difficulties
complains
UNATTRACTIVE
THING
TENSE,
ANXIOUS
FOCUS ON
PROBLEM
10. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
alternatives
tolerance
FEEL
GOOD
THINK MORE
CREATIVELY
ATTRACTIVE
THING
11. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
What is attractive?
human mind is incredibly complex
same form of body and brain
huge individual differences
12. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
Complexity of emotional domain
immediate
response
short periods,
minutes or hours
longer
lasting
hours or days
very
long-lasting
years or even
a lifetime
collection of
traits of a person
lifetime
traits personalityemotions moods
14. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
How to design something that
will be attractive to everyone?
15. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
3
different levels of the brain
each plays a different role
16. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
automatic, pre-wired
VISCERAL LEVEL
controls everyday behavior
BEHAVIORAL LEVEL
contemplative part
REFLECTIVE LEVEL
unconsciousconscius
17. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
THE VISCERAL LEVEL
›› evolved to protect
›› pre-consciousness, pre-thought
›› appearance matters
›› first impressions
18. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
FORFEIT surrender to the threat
tonic immobility and paralysis
FREEZE detect potential threats
hyperawareness and hypervigilance
FLIGHT escape from the threat
fear and panic
FIGHT neutralize the threat
desperation and aggression
20. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
THE BEHAVIORAL LEVEL
›› function, performance, usability
›› what it is meant to do?
›› how well does it?
›› is it easy to use?
21. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
THE REFLECTIVE LEVEL
›› meaning: personal
satisfaction, self-image
›› culture, experience, education,
individual differences
›› can override other levels
23. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
FUTURE
reflectivereflective
PAST
NOW
seeing and
using product
visceral
& behavioral
24. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
VISCERAL DESIGN appearance
BEHAVIORAL DESIGN usability
REFLECTIVE DESIGN self-image (personal satisfaction, memories)
ATTRACTIVENESS
similar to all people
BEAUTY
very sensitive to experiences, training, education, culture
25. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› looks
›› biologically wired-in
›› consistent across
people and cultures
›› experience, conscious
reflection
›› knowledge, learning
›› cultural differences, trends
visceral level
ATTRACTIVENESS
immediate emotional impact
reflective level
BEAUTY
long-term experience, overall impression
27. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
FRONT END OF OUR WORLD
meaningful
objects, signs
and symbols
28. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
VISUAL PERCEPTION
UI - mainly perceived through vision
›› light on photo-receptors
›› electrochemical signals transmitted to the brain
through the optic nerve and the thalamus
›› brain’s cerebral cortex
mere 13
milliseconds
according to
a 2017 study
at MIT in the
United States
70%
29. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
GESTALT LAWS OF PERCEPTUAL ORGANIZATION
how (why) we group visual information
›› developed by German thinkers at the
beginning of the 20th
century
›› extended by later thinkers.
30. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
“The whole is
other than the
sum of the parts.”
Kurt Koffka
33. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
1. EMERGENCE
order appearing out of chaos
›› distinguishing objects which appear to
emerge as we stare at them.
›› navigate the world
›› spot threats in time to respond
34. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
People will identify elements
first by their general form
Simple well defined object with clear contour
36. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
2. REIFICATION
filling the gaps
›› fit everything into familiar patterns
›› our sensations ‣ pre-existing mental models
39. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
3. MULTISTABILITY
objects perceived in more than one way
›› we bounce back and forth quickly
between the two stable alternatives
41. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
4. INVARIANCE
recognizing items despite distortion
›› weak interpretation of 3-D world
›› optical illusions
›› identifying and classifying
›› same vs. similar
44. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
FIGURE GROUND RELATIONSHIP
›› figures (distinct elements of focus) or ground (the
background or landscape on which the figures rest)
›› what to look at vs. what to safely ignore
51. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› similarity by any caracteristic: color, size,
shape, texture, dimension, orientation...
›› perceived as more related
›› reduces complexity and reinforces relatednes
SIMILARITY
52. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› color similarity – strongest
›› similarity of shape – weakest
›› similarity of size – need to be clearly distinguishable
SIMILARITY
59. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
PROXIMITY
›› elements close together are perceived to
be more related than elements that are
farther apart (single group or chunk)
›› the most powerful for indicating relatedness
67. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› visually connected elements are perceived as more
related than elements with no connection
›› overpowers the other Gestalt principles
UNIFORM CONNECTEDNESS
72. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› elements arranged on a line or curve are perceived as
more related than elements not on the line or curve.
›› continuation of our perception of shapes
beyond their ending points
GOOD CONTINUATION
77. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› elements that move in the same direction
are perceived to be more related
›› the moving objects will be perceived as figure elements
›› moving at the same time, velocity, and direction
COMMON FATE (SYNCHRONY)
78. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› useful in UX as animated effect
›› elements don’t actually have to be moving
in order to benefit from this principle
COMMON FATE (SYNCHRONY)
81. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
Th prchas of a hme
s lkely th sngle
mst mprtant fnancl
dcisn y'll evr mke
82. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› our mind fills gaps
›› perceiving a set of individual elements
as a single, recognizable pattern
›› stongest with simple, recognizable patterns
›› designer can create transitional
elements to achieve closure
CLOSURE
87. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› better visual processing and
remembering of simple figures
›› interpreting ambiguous images as simple and complete
›› fewer elements
›› symmetrical compositions
›› minimization of the number of elements
LAW OF PRÄGNANZ
89. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› stability and order instead of chaos
›› effectively communicates information (simpler)
›› symmetric forms tend to be seen as figure images
›› the most basic and enduring aspect of beauty
›› can be perceived less interesting
SYMMETRY
94. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
Use of main principles to form
relationships between elements
by contrast, grouping, levels
95. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
DOMINANCE
›› greater its visual weight, the more an element
will attract the eye and exhibit dominance
›› create dominance through contrast,
emphasis and relative visual weight
›› identical items can’t dominate each other
96. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› size
›› shape
›› color
›› value
›› depth
›› texture
›› density
›› saturation
›› orientation
›› local white space
›› intrinsic interest
›› perceived weight
DOMINANCE
97. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
FOCAL POINTS
›› elements with a point of interest, emphasis or
difference will capture and hold attention.
›› our perception is drawn toward contrast
›› need to quickly identify the unknown
to alert us to potential danger
98. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
LEVELS OF DOMINANCE
›› DOMINANT
most visual weight and emphasis
›› SUB-DOMINANTE
less emphasis than the dominant level but
more than the subordinate level.
›› SUBORDINATE
least visual weight, usually contain your body of text
103. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
Unity of visual appearance is
achieved by consistency, alignment
(grids) and visual rhythm
104. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
CONSISTENCY
›› AESTHETIC
style and appearance,
enhances recognition
›› FUNCTIONAL
meaning and action
›› INTERNAL
designed not accidental
›› EXTERNAL
consistency with
other elements in
the environment
105. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
ALIGNMENT
›› elements in a design should be aligned
with one or more other elements
›› screen edge has to be considered
›› simple or more complex forms of alignment
(along diagonals, spiral, circular...)
107. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› for nonuniform and asymmetrical elements
preferable alignment is based on visual weights
›› equal amount of area or visual
weight hangs on either side
AREA ALIGNMENT
110. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
Color attracts attention, is used for
grouping of elements, indicates
meaning, enhances aesthetics
111. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
›› limited palette (about five colors)
›› not used as only means to differentiate (color blindness)
›› aesthetic and suitable color combinations
›› colors attracts attention
›› different meanings of colors accross cultures
COLOR
113. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
“Learn the rules like a pro, so you
can break them like an artist.”
Pablo Picasso
114. @ITCAMPRO #ITCAMP18Community Conference for IT Professionals
@ive77iAttractive things work better #UX
@ITCAMPRO #ITCAMP18Community Conference for IT Professionals
Many thanks to our sponsors & partners!
GOLD
SILVER
PARTNERS
PLATINUM
POWERED BY