emotional design for mobile
DESCRIPTION
Presentation on emotional design for mobile devices, given at NCDevCon in Raleigh, NC on September 30th, 2012TRANSCRIPT
![Page 1: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/1.jpg)
Developing for Individuals
Emotional Design in Mobile
Jonathan LeBlanc
Developer Evangelist (eBay)
Twitter: @jcleblanc
Github: github.com/jcleblanc
![Page 2: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/2.jpg)
Manipulation of the emotional state of a known user to invoke a
positive response
What is Emotional Design?
![Page 3: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/3.jpg)
Manipulation of the emotional state of a known user to invoke a
positive response
What is Emotional Design?
![Page 4: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/4.jpg)
Building the base level emotional response using color theory
Personality and baseline mining
Emotional response actions and the design engine
Components of Emotional Design
![Page 5: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/5.jpg)
Building the base level emotional response using color theory
Personality and baseline mining
Emotional response actions and the design engine
Components of Emotional Design
![Page 6: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/6.jpg)
Color Theory and the Base Level
Primary color Principal Emotion
Filler Color Neutral glue
Accent colors Secondary emotional
response
![Page 7: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/7.jpg)
…Some Color Theory may be BS
![Page 8: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/8.jpg)
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.
![Page 9: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/9.jpg)
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
![Page 10: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/10.jpg)
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
![Page 11: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/11.jpg)
Red and the eBay Commerce Study
![Page 12: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/12.jpg)
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
![Page 13: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/13.jpg)
Building the base level emotional response using color theory
Personality and baseline mining
Emotional response actions and the design engine
Components of Emotional Design
![Page 14: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/14.jpg)
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
![Page 15: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/15.jpg)
Understanding the Path
What is the path the user takes to
![Page 16: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/16.jpg)
What the User Cares About
Measuring time on page to give insight into user topic interest
![Page 17: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/17.jpg)
Mining Page Data for Traits
Step 1: Obtain Interac0on Content
![Page 18: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/18.jpg)
Mining Page Data for Traits
Step 2: Mine keywords or meta data
![Page 19: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/19.jpg)
Mining Page Data for Traits
Step 3: Weight derived results
![Page 20: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/20.jpg)
Determining Commonality Overlap
Person A Person B
![Page 21: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/21.jpg)
Building the base level emotional response using color theory
Personality and baseline mining
Emotional response actions and the design engine
Components of Emotional Design
![Page 22: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/22.jpg)
The CSS Service Engine
lesscss.org
sass-lang.com
learnboost.github.com/stylus
![Page 23: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/23.jpg)
Implementing Color Functions
Lighten / Darken Saturate / Desaturate
Adjust Hue Mix Colors
![Page 24: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/24.jpg)
Managing Irrelevant Content
Remove / hide content based on user profile and state
![Page 25: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/25.jpg)
Traits of the Bored Distraction Repetition
Tiredness Reasons for Boredom Lack of interest
Readiness
Acting on Disinterest / Boredom
![Page 26: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/26.jpg)
Highlighting on Agitated Behavior
Highlight relevant content to reduce agitated behavior
![Page 27: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/27.jpg)
Choose your color palette to match your industry & users
Know your users
Act upon this knowledge
The Takeaways
![Page 28: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/28.jpg)
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
![Page 29: Emotional Design for Mobile](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c8444a4a79591e158b4577/html5/thumbnails/29.jpg)
Thank You! Any Questions?
Jonathan LeBlanc
Developer Evangelist (eBay)
Twitter: @jcleblanc
Github: github.com/jcleblanc
http://bit.ly/ncdevcon_emotional_design