emotional design for mobile
DESCRIPTION
Presentation on emotional design for mobile devices, given at NCDevCon in Raleigh, NC on September 30th, 2012TRANSCRIPT
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