Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Emotional Design for Mobile

5,321 views

Published on

Presentation on emotional design for mobile devices, given at NCDevCon in Raleigh, NC on September 30th, 2012

Published in: Technology, Design

Emotional Design for Mobile

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

×