Attractive Things Work Better

@ive77iAttractive things work better #UX
Attractive Things Work Better
Ivana Miličić
Digital Product Designer
linkedin.com/in/ivanamilicic
@ive77i

Why?

How attractive things
make us FEEL?

EMOTIONAL SYSTEM changes how
the cognitive system operates

situation type
decisions
EMOTIONS ARE CRITICAL

EMOTIONS ARE IMPORTANT
›› thought processes narrowing
›› aspects relevant to a problem
›› escaping from danger
NEGATIVE
😔 😢 😫 😤

›› learning
›› curiosity
›› creativity
›› brainstorming
EMOTIONS ARE IMPORTANT
POSITIVE
🙂 😂 😊 😀

difficulties
complains
UNATTRACTIVE
THING
TENSE,
ANXIOUS
FOCUS ON
PROBLEM

alternatives
tolerance
FEEL
GOOD
THINK MORE
CREATIVELY
ATTRACTIVE
THING

What is attractive?
human mind is incredibly complex
same form of body and brain
huge individual differences

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

How to design something that
will be attractive to EVERYONE?

3
different levels of the brain
each plays a different role

automatic, pre-wired
VISCERAL LEVEL
controls everyday behavior
BEHAVIORAL LEVEL
contemplative part
REFLECTIVE LEVEL
unconsciousconscius

THE VISCERAL LEVEL
›› evolved to protect
›› pre-consciousness, pre-thought
›› appearance matters
›› first impressions

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

THE BEHAVIORAL LEVEL
›› function, performance, usability
›› what it is meant to do?
›› how well does it?
›› is it easy to use?

THE REFLECTIVE LEVEL
›› meaning: personal
satisfaction, self-image
›› culture, experience, education,
individual differences
›› can override other levels

FUTURE
reflectivereflective
PAST
NOW
seeing and
using product
visceral
& behavioral

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

›› 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

Understanding
Perception

FRONT END OF OUR WORLD
meaningful
objects, signs
and symbols

VISUAL PERCEPTION
UI - mainly perceived through vision
70%
›› 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

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.

“The whole is
other than the
sum of the parts.”
Kurt Koffka

General prinicples
of visual perception

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

People will identify elements
first by their general form
Simple well defined object with clear contour

2. REIFICATION
filling the gaps
›› fit everything into familiar patterns
›› our sensations ‣ pre-existing mental models

3. MULTISTABILITY
objects perceived in more than one way
›› we bounce back and forth quickly
between the two stable alternatives

4. INVARIANCE
recognizing items despite distortion
›› weak interpretation of 3-D world
›› optical illusions
›› identifying and classifying
›› same vs. similar

Perception Laws

FIGURE GROUND
RELATIONSHIP

FIGURE GROUND RELATIONSHIP
›› FIGURES ‣ distinct elements of focus
›› GROUND ‣ the background or landscape
on which the figures rest
›› what to look at vs. what to safely ignore

SIMILARITY

›› SIMILARITY BY ANY CARACTERISTIC: color,
size, shape, texture, dimension, orientation...
›› perceived as more related
›› reduces complexity and reinforces relatednes
SIMILARITY

›› COLOR similarity – strongest
›› similarity of SHAPE – weakest
›› similarity of SIZE – need to be clearly distinguishable
SIMILARITY

PROXIMITY

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

›› visually CONNECTED ELEMENTS are perceived as
more related than elements with no connection
›› overpowers the other Gestalt principles
UNIFORM CONNECTEDNESS

Leo Mia Jill Jon Jon MiaLeoJill

›› 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

COMMON FATE (SYNCHRONY)

›› 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

›› useful in UX as animated effect
›› elements don’t actually have to be moving
in order to benefit from this principle

CLOSURE

Th prchas of a hme
s lkely th sngle
mst mprtant fnancl
dcisn y'll evr mke

›› 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

LAW OF PRÄGNANZ
SYMMETRY AND ORDER

›› 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

›› 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

Building
visual hierarhcy

Use of main principles to form
RELATIONSHIPS between elements
by contrast, grouping, levels

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

›› size
›› shape
›› color
›› value
›› depth
›› texture
›› density
›› saturation
›› orientation
›› local white space
›› intrinsic interest
›› perceived weight
DOMINANCE

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

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

Unity

Unity of visual appearance is
achieved by consistency, alignment
(grids) and visual rhythm

CONSISTENCY
›› AESTHETIC
style and appearance,
enhances recognition
›› FUNCTIONAL
meaning and action
›› INTERNAL
designed not accidental
›› EXTERNAL
consistency with
other elements in
the environment

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...)

›› 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

vs

IMPORTANCE OF COLOR

Color attracts attention, is used for
grouping of elements, indicates
meaning, enhances aesthetics

›› 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

“Learn the rules like a pro, so you
can break them like an artist.”
Pablo Picasso

PART 2
Hands-on ‣ Let's apply this in practice!

http://bit.ly/2HCTqJr
Your turn!
Use visual perception principles to turn
data from the link below to the attractive
mockup of a simple dashboard.

Thank you!
Ivana Miličić
Digital Product Designer @ CLARA Analytics (via Toptal)
linkedin.com/in/ivanamilicic
@ive77i

Attractive Things Work Better

Recommended

Recommended

More Related Content

Similar to Attractive Things Work Better

Similar to Attractive Things Work Better (15)

Recently uploaded

Recently uploaded (20)

Attractive Things Work Better