View
371
Download
1
Category
Preview:
Citation preview
HOW VISUAL DESIGN MAKES OR BREAKS MOBILE APP UX
Ivana Miličić, Toptal
Can visual design compensate for otherwise bad user experience?
OF COURSE IT CAN’T! BUT...
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
• personal
• positive
EFFECTIVE INTERACTION
LONG-TERM USABILITY
SUCCESS
• affection
• loyalty
• patience
RELATIONSHIPS FEELINGS
IMMEDIATE DISSATISFACTION WITH AN APP
unattractive or confusing user-interface
WHY ATTRACTIVE THINGS WORK BETTER?
Emotional system changes how the cognitive system operates...
How they are making us feel?
EMOTIONS PLAY A CRITICAL ROLE!
They helps:• asses is situations good or bad,
safe or dangerous?
• make decisions
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
Alternative approaches lead to a satisfying end
USER TOLERANT OF MINOR DIFFICULTIES
ATTRACTIVE THING
FEEL GOOD
THINK MORE CREATIVELY
Concentration upon troublesome details
USER WILL COMPLAIN ABOUT THE DIFFICULTIES
STATE OF NEGATIVE AFFECT
FOCUS UPON THE
PROBLEMATIC DETAILS
MORE TENSE, MORE ANXIOUS
Human mind is incredibly complex• same form of body and brain
• huge individual differences
DIFFERENT WAYS IN WHICH PEOPLE’S MINDS WORK
emotions moods traits personality
AFFECTIVE, EMOTIONAL DOMAIN
• 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?
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.
UNCO
NSCI
OUS
CO
NSCI
US
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
THE VISCERAL LEVEL
• pre-consciousness, pre-thought
• appearance matters
• forming of first impressions
Evolved to protect the body against danger
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 >
THE BEHAVIORAL LEVEL
Experience: function, performance, and usability
What it is meant to do?
How well does it?
Is it easy to use?
Meaning:personal satisfaction,
self-image
• variability through culture, experience, education, and individual differences
• can override other levels
THE REFLECTIVE LEVEL
NOW PAST and FUTURE• seeing and using
product• feelings of satisfaction
produced by owning, displaying, and using a product
VISCERAL & BEHAVIORAL REFLECTIVE
Visceral design > Appearance
Behavioral design > Usability
Reflective design > Self-image, personal satisfaction, memories
Beauty is all in the mind of the beholder
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
THE FUNCTIONAL LEVEL OF VISUAL DESIGN
VISUAL COMMUNICATION
personalityvisual organization
VISUAL HIERARCHY
• what is important
• guide user’s eye
• initiate interaction
Structure for visualizing and understanding complexity
Prioritization of visual weights by the manipulation of visual
relationships to create meaning
VISUAL HIERARCHY
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
Gestalt Laws of Perceptual Organization tell us how (why) we
group visual informationGestalt 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
BUILDING VISUAL HIERARHCY
Visual hierarchy is established by using main principles to form
relationships between elements bygrouping, contrast, levels
CREATE UNITY
Unity of visual appearance is achieved by consistency,
alignment (grids) and visual rhythm
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
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
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
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• 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
When otherwise equaly usable apps, visual design can be the
strategic differentiator in achieving better personality, consistency, and
functionality
CONCLUSION
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,
Recommended