Emotional Design for Mobile

1. Emotional Design in Mobile Emotional Design in Mobile Developing for Individuals Jonathan LeBlanc Jonathan LeBlanc Developer Evangelist (eBay) Twitter: @jcleblanc Github: github.com/jcleblanc

2. What is Emotional Design? What is Emotional Design? Manipulation of the emotional state of a known user to invoke a positive response

3. What is Emotional Design? What is Emotional Design? Manipulation of the emotional state of a known user known user to invoke a positive response

4. Components of Emotional Design Components of Emotional Design Building the base level emotional response using color theory Personality and baseline mining Emotional response actions and the design engine

5. Components of Emotional Design Components of Emotional Design Building the base level emotional Building the base level emotional response using color theory response using color theory Personality and baseline mining Emotional response actions and the design engine

6. Color Theory and the Base Level Color Theory and the Base Level Primary color Primary color Principal Emotion Filler Color Filler Color Neutral glue Accent colors Accent colors Secondary emotional response  

7. …Some Color Theory …Some Color Theory may be may be BS BS

8. Much is Based in Science 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.  

9. Culture Makes a Di Culture Makes a Diff fference erence Australian Aboriginals: Australian Aboriginals: Land, earth Celtic: Celtic: Death, afterlife China: China: Good luck, celebration Cherokees: Cherokees: Success, triumph Hebrew: Hebrew: Sacrifice, sin India: India: Purity South Africa: South Africa: Color of mourning Eastern: Eastern: Happiness and prosperity Western: Western: Excitement, danger, love, passion

10. Choosing the Correct Hue 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  

11. Red and the eBay Commerce Study Red and the eBay Commerce Study

12. Saturation Makes a Di Saturation Makes a Diff fference! erence! Dark: Rage, anger, leadership, courage Light: Romance, feminine, innocence   Dark: Moodiness, unease, frustration, power Light: Nostalgia, romance, softness   Dark: Power, elegance, mystery   Light: Clarity, openness, perfection  

13. Components of Emotional Design Components of Emotional Design Building the base level emotional response using color theory Personality and baseline mining Personality and baseline mining Emotional response actions and the design engine

14. Understanding a Person in Context Understanding a Person in Context Personality profile 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 we need to mine What they’re interacting with How long they’re interacting with it for

15. Understanding the Path Understanding the Path What is the path the What is the path the user takes to user takes to  

16. What the User Cares About What the User Cares About Measuring time on Measuring time on page to give insight page to give insight into user topic into user topic interest interest  

17. Mining Page Data for Traits Mining Page Data for Traits Step  1:  Obtain   Interac0on   Content  

18. Mining Page Data for Traits Mining Page Data for Traits Step  2:  Mine   keywords  or  meta   data  

19. Mining Page Data for Traits Mining Page Data for Traits Step  3:  Weight   derived  results  

20. Determining Commonality Overlap Determining Commonality Overlap Person  B   Person  A  

21. Components of Emotional Design Components of Emotional Design Building the base level emotional response using color theory Personality and baseline mining Emotional response actions and the Emotional response actions and the design engine design engine

22. The CSS Service Engine The CSS Service Engine lesscss.org lesscss.org   sass- sass-lang.com lang.com   /stylus   learnboost.github.com learnboost.github.com/stylus

23. Implementing Color Functions Implementing Color Functions Lighten / Darken Saturate / Desaturate Mix Colors Adjust Hue

24. Managing Irrelevant Content Managing Irrelevant Content Remove / hide content based on user profile and state

25. Acting on Disinterest / Boredom Acting on Disinterest / Boredom Traits of the Bored Traits of the Bored Distraction Repetition Tiredness Reasons for Boredom Reasons for Boredom Lack of interest Readiness

26. Highlighting on Agitated Behavior Highlighting on Agitated Behavior Highlight relevant content to reduce agitated behavior

27. The Takeaways The Takeaways Choose your color palette to match your industry & users Know your users Act upon this knowledge

28. Links Links 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

29. Thank You! Any Questions? Thank You! Any Questions? http://bit.ly/ncdevcon_emotional_design Jonathan LeBlanc Jonathan LeBlanc Developer Evangelist (eBay) Twitter: @jcleblanc Github: github.com/jcleblanc