How our visual perception works, and what are the main visual design principles we can rely on to build consistent, eye pleasing and functional mobile app interfaces that will make better mobile app UX?

1. HOW VISUAL DESIGN MAKES
OR BREAKS MOBILE APP UX
Ivana Miličić, Toptal

2. Can visual design compensate for
otherwise bad user experience?
OF COURSE IT CAN’T! BUT...

3. AESTHETIC DESIGNS
• look easier to use
• have higher probability of being used
• more effective at fostering positive attitudes
• make people more tolerant of design problems

4. • personal
• positive
EFFECTIVE INTERACTION
LONG-TERM USABILITY
SUCCESS
• affection
• loyalty
• patience
RELATIONSHIPS FEELINGS

5. IMMEDIATE DISSATISFACTION WITH AN APP
unattractive or confusing
user-interface

7. WHY ATTRACTIVE THINGS WORK BETTER?
Emotional system changes how
the cognitive system operates...
How they are making us feel?

8. EMOTIONS PLAY A CRITICAL ROLE!
They helps:
• asses is situations good or bad,
safe or dangerous?
• make decisions

9. ALL EMOTIONS ARE IMPORTANT
• learning
• curiosity
• creative thought
• examining multiple
alternatives
• brainstorming
• narrowing of
thought processes
• concentrating upon
aspects relevant
to a problem
• escaping from danger
NEGATIVEPOSITIVE

10. Alternative approaches lead to a satisfying end
USER TOLERANT OF MINOR DIFFICULTIES
ATTRACTIVE
THING
FEEL
GOOD
THINK MORE
CREATIVELY

11. Concentration upon troublesome details
USER WILL COMPLAIN ABOUT THE DIFFICULTIES
STATE OF
NEGATIVE
AFFECT
FOCUS
UPON THE
PROBLEMATIC
DETAILS
MORE TENSE,
MORE ANXIOUS

12. Human mind is incredibly complex
• same form of body and brain
• huge individual differences
DIFFERENT WAYS IN WHICH
PEOPLE’S MINDS WORK

13. emotions moods traits personality
AFFECTIVE, EMOTIONAL DOMAIN

14. • Emotions immediate response
(short periods, minutes or hours)
• Moods longer lasting
(hours or days)
• Traits very long-lasting
(years or even a lifetime)
• Personality collection of traits of a person
(lifetime)
HOW TO DESIGN SOMETHING THAT WILL
APPEAL TO EVERYONE?

15. 3 DIFFERENT LEVELS OF THE BRAIN:
Each level plays a different role in the total
functioning of people.
• the automatic, pre-wired layer – VISCERAL LEVEL
• the brain layer that control everyday
behavior – BEHAVIORAL LEVEL
• the contemplative part of the brain – REFLECTIVE LEVEL.
“Emotion & Design: Attractive Things Work Better” by Donald Norman, www.jnd.org, 2002.
UNCONSCIOUSCONSCIUS

16. THE VISCERAL LEVEL
people are pretty much the same
all over the world.
THE BEHAVIORAL AND REFLECTIVE LEVELS
very sensitive to experiences,
training, education, culture

17. THE VISCERAL LEVEL
• pre-consciousness,pre-thought
• appearance matters
• forming of first impressions
Evolved to protect the body against danger

18. FREEZE-FLIGHT-FIGHT-FORFEIT
• Forfeit – surrender to the threat (tonic immobility and paralysis)
• Freeze – detect potential threats (hyperawareness and hypervigilance)
< if a threat detected >
• Flight – escape from the threat (fear and panic)
< if unable to escape >
• Fight – neutralize the threat (desperation and aggression)
< If unable to neutralize the threat >

19. THE BEHAVIORAL LEVEL
Experience:
function, performance, and usability
What it is
meant to do?
How well
does it?
Is it easy
to use?

20. Meaning:
personal satisfaction,
self-image
• variability through culture, experience,
education, and individual differences
• can override other levels
THE REFLECTIVE LEVEL

21. NOW PAST and FUTURE
• seeing and using
product
• feelings of satisfaction
produced by owning,
displaying, and
using a product
VISCERAL & BEHAVIORAL REFLECTIVE

22. Visceral design > Appearance
Behavioral design > Usability
Reflective design > Self-image,
personal satisfaction,
memories
Beauty is all in the mind of the beholder

23. VISCERAL LEVEL REFLECTIVE LEVEL
attractiveness
• looks
• biologically wired-in
• consistent across
people and cultures
• conscious reflection
and experience
• knowledge, learning
• cultural differences, trends
beauty
IMMEDIATE EMOTIONAL IMPACT LONG-TERM EXPERIENCE
OVERALL IMPRESSION

24. THE FUNCTIONAL LEVEL OF VISUAL DESIGN
VISUAL COMMUNICATION
personalityvisual organization

25. VISUAL HIERARCHY
• what is important
• guide user’s eye
• initiate interaction
Structure for visualizing and
understanding complexity

26. Prioritization of visual weights
by the manipulation of visual
relationships to create meaning
VISUAL HIERARCHY

27. Reveals relationships within a system
most effective way to increase knowledge
about the system
• Perception of hierarchical relationships among elements:
• positions (left-right and top-down)
• proximity, size, presence of connecting lines
VISUAL HIERARCHY

28. Gestalt Laws of Perceptual
Organization tell us how (why) we
group visual information
Gestalt psychology was founded by German thinkers Max Wertheimer,
Wolfgang Kohler and Kurt Koffka and focused on how people interpret the world.
“The whole is other than the sum of the parts.”
Kurt Koffka
UNDERSTANDING PERCEPTION

29. The whole is identified before the parts
• simple well defined object will communicate more quickly
than a detailed object with a hard to recognize contour.
Our mind fills in the gaps
• we attempt to match what we see to the familiar
patterns we have stored in memory
UNDERSTANDING PERCEPTION

30. The mind seeks to avoid uncertainty
• objects can be perceived in more than one way
• we bounce back and forth quickly
between the two stable alternatives
Recognizing similarities and differences
• we recognize (simple) objects independently
of their rotation, translation and scale.
UNDERSTANDING PERCEPTION

31. LAWS OF PERCEPTUAL ORGANIZATION
• Law of Prägnanz
(good figure, simplicity)
• Closure
• Symmetry and order
• Figure/ground relationship
• Similarity
• Proximity
• Continuity
• Common fate (synchrony)
• Uniform connectedness
• Parallelism
• Focal points

32. Law of Prägnanz
• tendency to interpret ambiguous images as simple
and complete, versus complex and incomplete
• better visual processing and remembering
of simple than complex figures.
• fewer rather than more elements
• symmetrical rather than asymmetrical compositions
• minimization of the number of elements in a design
LAWS OF PERCEPTUAL ORGANIZATION

34. Closure
• perceiving a set of individual elements
as a single, recognizable pattern, rather
than multiple, individual elements
• our mind fills gaps
• stongest with simple, recognizable patterns
(when not present designer can create
transitional elements to achieve closure)
LAWS OF PERCEPTUAL ORGANIZATION

36. Symmetry
• we tend to seek stability and order instead of chaos
• quickly finding symmetry and order - effectively
communicate information (simpler)
• symmetric forms tend to be seen as figure
images rather than ground images
• the most basic and enduring aspect of beauty
• can be perceived less interesting
LAWS OF PERCEPTUAL ORGANIZATION

38. Figure/ground relationship
• the figure elements are the objects of focus
• in unstable figure-ground relationships,
the relationship is ambiguous and can
be interpreted in different ways
• the figure - definite shape, closer, smaller, convex;
• the ground - shapeless, farther away,
continues behind the figure, larger, concave
LAWS OF PERCEPTUAL ORGANIZATION

40. Similarity
• any characteristic can be similar: color, shape, size, texture, etc.
• perceived as more related
• reduces complexity and reinforces relatednes
• color similarity – strongest grouping effect
• similarity of size – need to be clearly distinguishable
• similarity of shape – weakest
LAWS OF PERCEPTUAL ORGANIZATION

42. Proximity
• elements close together are perceived to be more related
than elements that are farther apart (single group or chunk)
• one of the most powerful means of
indicating relatedness in a design
• arrangement of elements (labels and supporting
information are near the elements that they describe)
LAWS OF PERCEPTUAL ORGANIZATION

44. Continuity
• 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
LAWS OF PERCEPTUAL ORGANIZATION

46. Uniform connectedness
• visually connected elements are perceived as
more related than elements with no connection.
• will generally overpower the other Gestalt principles
• common regions and connecting lines
LAWS OF PERCEPTUAL ORGANIZATION

48. Common fate (synchrony)
• elements that move in the same direction are perceived
to be more related than elements that move in different
directions or are stationary (regardles how far)
• the moving objects will be perceived as figure elements
• related elements should move at the same time, velocity, and
direction, or flicker at the same time, frequency, and intensity
LAWS OF PERCEPTUAL ORGANIZATION

50. Parallelism
• elements that are parallel to each other are seen as
more related than elements not parallel to each other
• as lines are often interpreted as pointing or moving in
some direction parallel ones are seen as either pointing
or moving in the same direction and are thus related
LAWS OF PERCEPTUAL ORGANIZATION

52. Focal points
• elements with a point of interest, emphasis
or difference will capture and hold attention.
• our perception is drawn toward contrast -
element that is unlike the others in some way
• need to quickly identify the unknown
to alert us to potential danger
LAWS OF PERCEPTUAL ORGANIZATION

54. BUILDING VISUAL HIERARHCY
Visual hierarchy is established
by using main principles to form
relationships between elements by
grouping, contrast, levels

55. CREATE UNITY
Unity of visual appearance is
achieved by consistency,
alignment (grids) and visual rhythm

56. Consistency
• aesthetic consistency – style and appearance
(color palettes, fonts, graphics); enhances
recognition, sets emotional expectations
• functional consistency – meaning and action
• internal consistency – designed not accidental
• external consistency – consistency with
other elements in the environment
CREATE UNITY

57. Alignment
• elements in a design should be aligned with one or
more other elements (unity, aestetics, stability)
• screen edge has to be considered in making alignments
• centerd aligned text provide harder to connect with
other elements; justified text – more alignment cues
• more complex forms of alignment (along diaonals
- at least 30 degrees angle; spiral, circular...)
CREATE UNITY

58. Area alignment
• for nonuniform and asymmetrical elements
preferable alignment is based on visual weights
• equal amount of area or visual
weight hangs on either side
CREATE UNITY

60. IMPORTANCE OF COLOR
Color attracts attention, is used for
grouping of elements, indicates meaning,
enhances aesthetics

61. • limited palette (about five colors)
• not used as only means to differentiate (color blindness)
• aesthetic and suitable color combinations
• bright, desaturated colors - friendly, professional
• dark, desaturated colors - serious, professional
• saturated colors - exciting, dynamic
• saturated colors attracts attention
• different cultures - different meanings of colors
IMPORTANCE OF COLOR

62. When otherwise equaly usable
apps, visual design can be the
strategic differentiator in achieving
better personality, consistency, and
functionality
CONCLUSION

63. Thank you!
Literature:
• Emotional Design: Why We Love (or Hate) Everyday Things byDonald Norman
• Emotional Design Elements by Smashing Magazine
• Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler
• Neuro Web Design: What Makes Them Click? by Ph.D. Susan M. Weinschenk
• 100 Things: Every Designer Needs to Know About People by Ph.D. Susan Weinschenk,