emotional design for mobile

Developing for Individuals

Emotional Design in Mobile

Jonathan LeBlanc

Developer Evangelist (eBay)

Twitter: @jcleblanc

Github: github.com/jcleblanc

Manipulation of the emotional state of a known user to invoke a

positive response

What is Emotional Design?

Manipulation of the emotional state of a known user to invoke a

positive response

What is Emotional Design?

Building the base level emotional response using color theory

Personality and baseline mining

Emotional response actions and the design engine

Components of Emotional Design

Building the base level emotional response using color theory

Personality and baseline mining

Emotional response actions and the design engine

Components of Emotional Design

Color Theory and the Base Level

Primary color Principal Emotion

Filler Color Neutral glue

Accent colors Secondary emotional

response  

…Some Color Theory may be BS

Much is Based in Science

Birds with brightly colored leg bands higher on the mating ranks.  

Red clothing in competition sports lead to higher win rate.  

Culture Makes a Difference

Australian Aboriginals: Land, earth

Celtic: Death, afterlife

China: Good luck, celebration

Cherokees: Success, triumph

Hebrew: Sacrifice, sin

India: Purity

South Africa: Color of mourning

Eastern: Happiness and prosperity

Western: Excitement, danger, love, passion

Choosing the Correct Hue

Products with a feel-good message Happiness, energy, encouragement  

Health care (but not food!) Relatable, calm, friendly, peace, security  

Startups / innovative products Creativity, imagination  

Auction sites (but not sales sites!) Passion, stimulation, excitement, power  

Red and the eBay Commerce Study

Light: Clarity, openness, perfection  

Saturation Makes a Difference!

Dark: Rage, anger, leadership, courage

Dark: Moodiness, unease, frustration, power

Light: Romance, feminine, innocence  

Dark: Power, elegance, mystery  

Light: Nostalgia, romance, softness  

Building the base level emotional response using color theory

Personality and baseline mining

Emotional response actions and the design engine

Components of Emotional Design

Personality profile What a person knows

What a person knows they don’t know

What a person doesn’t know they don’t know

What we need to mine What they’re interacting with

How long they’re interacting with it for

Understanding a Person in Context

Understanding the Path

What is the path the user takes to  

What the User Cares About

Measuring time on page to give insight into user topic interest  

Mining Page Data for Traits

Step  1:  Obtain  Interac0on  Content  

Mining Page Data for Traits

Step  2:  Mine  keywords  or  meta  data  

Mining Page Data for Traits

Step  3:  Weight  derived  results  

Determining Commonality Overlap

Person  A   Person  B  

Building the base level emotional response using color theory

Personality and baseline mining

Emotional response actions and the design engine

Components of Emotional Design

The CSS Service Engine

lesscss.org  

sass-lang.com  

learnboost.github.com/stylus  

Implementing Color Functions

Lighten / Darken Saturate / Desaturate

Adjust Hue Mix Colors

Managing Irrelevant Content

Remove / hide content based on user profile and state

Traits of the Bored Distraction Repetition

Tiredness Reasons for Boredom Lack of interest

Readiness

Acting on Disinterest / Boredom

Highlighting on Agitated Behavior

Highlight relevant content to reduce agitated behavior

Choose your color palette to match your industry & users

Know your users

Act upon this knowledge

The Takeaways

Psychology and history of color and emotion •  http://psychology.about.com/od/sensationandperception/a/

colorpsych.htm •  http://designshack.net/articles/graphics/the-science-behind-

design-color-theory/ Colors and emotional response meanings

•  http://www.color-wheel-pro.com/color-meaning.html

•  http://tympanus.net/codrops/2012/04/03/color-and-emotion-what-does-each-hue-mean/

Art and Color History

•  http://www.color-wheel-pro.com/color-meaning.html

Links

Thank You! Any Questions?

Jonathan LeBlanc

Developer Evangelist (eBay)

Twitter: @jcleblanc

Github: github.com/jcleblanc

http://bit.ly/ncdevcon_emotional_design