How Visual Design Makes or Brakes Mobile
-
Upload
ivana-milicic -
Category
Design
-
view
371 -
download
1
Transcript of How Visual Design Makes or Brakes Mobile
![Page 1: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/1.jpg)
HOW VISUAL DESIGN MAKES OR BREAKS MOBILE APP UX
Ivana Miličić, Toptal
![Page 2: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/2.jpg)
Can visual design compensate for otherwise bad user experience?
OF COURSE IT CAN’T! BUT...
![Page 3: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/3.jpg)
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
![Page 4: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/4.jpg)
• personal
• positive
EFFECTIVE INTERACTION
LONG-TERM USABILITY
SUCCESS
• affection
• loyalty
• patience
RELATIONSHIPS FEELINGS
![Page 5: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/5.jpg)
IMMEDIATE DISSATISFACTION WITH AN APP
unattractive or confusing user-interface
![Page 6: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/6.jpg)
![Page 7: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/7.jpg)
WHY ATTRACTIVE THINGS WORK BETTER?
Emotional system changes how the cognitive system operates...
How they are making us feel?
![Page 8: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/8.jpg)
EMOTIONS PLAY A CRITICAL ROLE!
They helps:• asses is situations good or bad,
safe or dangerous?
• make decisions
![Page 9: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/9.jpg)
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
![Page 10: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/10.jpg)
Alternative approaches lead to a satisfying end
USER TOLERANT OF MINOR DIFFICULTIES
ATTRACTIVE THING
FEEL GOOD
THINK MORE CREATIVELY
![Page 11: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/11.jpg)
Concentration upon troublesome details
USER WILL COMPLAIN ABOUT THE DIFFICULTIES
STATE OF NEGATIVE AFFECT
FOCUS UPON THE
PROBLEMATIC DETAILS
MORE TENSE, MORE ANXIOUS
![Page 12: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/12.jpg)
Human mind is incredibly complex• same form of body and brain
• huge individual differences
DIFFERENT WAYS IN WHICH PEOPLE’S MINDS WORK
![Page 13: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/13.jpg)
emotions moods traits personality
AFFECTIVE, EMOTIONAL DOMAIN
![Page 14: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/14.jpg)
• 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?
![Page 15: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/15.jpg)
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
![Page 16: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/16.jpg)
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
![Page 17: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/17.jpg)
THE VISCERAL LEVEL
• pre-consciousness, pre-thought
• appearance matters
• forming of first impressions
Evolved to protect the body against danger
![Page 18: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/18.jpg)
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 >
![Page 19: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/19.jpg)
THE BEHAVIORAL LEVEL
Experience: function, performance, and usability
What it is meant to do?
How well does it?
Is it easy to use?
![Page 20: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/20.jpg)
Meaning:personal satisfaction,
self-image
• variability through culture, experience, education, and individual differences
• can override other levels
THE REFLECTIVE LEVEL
![Page 21: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/21.jpg)
NOW PAST and FUTURE• seeing and using
product• feelings of satisfaction
produced by owning, displaying, and using a product
VISCERAL & BEHAVIORAL REFLECTIVE
![Page 22: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/22.jpg)
Visceral design > Appearance
Behavioral design > Usability
Reflective design > Self-image, personal satisfaction, memories
Beauty is all in the mind of the beholder
![Page 23: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/23.jpg)
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
![Page 24: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/24.jpg)
THE FUNCTIONAL LEVEL OF VISUAL DESIGN
VISUAL COMMUNICATION
personalityvisual organization
![Page 25: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/25.jpg)
VISUAL HIERARCHY
• what is important
• guide user’s eye
• initiate interaction
Structure for visualizing and understanding complexity
![Page 26: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/26.jpg)
Prioritization of visual weights by the manipulation of visual
relationships to create meaning
VISUAL HIERARCHY
![Page 27: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/27.jpg)
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
![Page 28: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/28.jpg)
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
![Page 29: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/29.jpg)
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
![Page 30: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/30.jpg)
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
![Page 31: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/31.jpg)
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
![Page 32: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/32.jpg)
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
![Page 33: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/33.jpg)
![Page 34: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/34.jpg)
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
![Page 35: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/35.jpg)
![Page 36: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/36.jpg)
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
![Page 37: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/37.jpg)
![Page 38: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/38.jpg)
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
![Page 39: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/39.jpg)
![Page 40: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/40.jpg)
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
![Page 41: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/41.jpg)
![Page 42: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/42.jpg)
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
![Page 43: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/43.jpg)
![Page 44: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/44.jpg)
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
![Page 45: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/45.jpg)
![Page 46: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/46.jpg)
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
![Page 47: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/47.jpg)
![Page 48: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/48.jpg)
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
![Page 49: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/49.jpg)
![Page 50: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/50.jpg)
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
![Page 51: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/51.jpg)
![Page 52: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/52.jpg)
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
![Page 53: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/53.jpg)
![Page 54: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/54.jpg)
BUILDING VISUAL HIERARHCY
Visual hierarchy is established by using main principles to form
relationships between elements bygrouping, contrast, levels
![Page 55: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/55.jpg)
CREATE UNITY
Unity of visual appearance is achieved by consistency,
alignment (grids) and visual rhythm
![Page 56: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/56.jpg)
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
![Page 57: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/57.jpg)
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
![Page 58: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/58.jpg)
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
![Page 59: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/59.jpg)
![Page 60: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/60.jpg)
IMPORTANCE OF COLOR
Color attracts attention, is used for grouping of elements, indicates meaning,
enhances aesthetics
![Page 61: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/61.jpg)
• 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
![Page 62: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/62.jpg)
When otherwise equaly usable apps, visual design can be the
strategic differentiator in achieving better personality, consistency, and
functionality
CONCLUSION
![Page 63: How Visual Design Makes or Brakes Mobile](https://reader033.fdocuments.in/reader033/viewer/2022042723/58ed809b1a28ab36638b4667/html5/thumbnails/63.jpg)
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,