how visual design makes or brakes mobile

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


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.


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


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)


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


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


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


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)


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


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


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


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


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


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,