1. Emotional DesignDeveloping for Individuals Jonathan LeBlanc Developer Evangelist (PayPal) Twitter: @jcleblancGithub: 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 LevelPrimary color Filler Color Accent colors PrincipalNeutral glue Secondary emotional Emotionresponse 7. Some Color Theory may be BS 8. Much is Based in ScienceBirds with brightly colored leg bandshigher on the mating ranks.Red clothing in competition sports leadto 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 dont know What a person doesnt know they dont know What we need to mine What theyre interacting with How long theyre 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. Data MiningInterest Discovery using Adaptive Human Behavioral Analysis Friday 2:45pm 3:45pm 18. Determining Commonality OverlapPerson A Person B 19. Components of Emotional Design Building the base level emotional response using color theory Personality and baseline mining Emotional response actions and the design engine 20. What Were Talking About 21. The CSS Service Engine lesscss.org sass-lang.com learnboost.github.com/stylus 22. Design Engine Foundation: LESSPHP http://leafo.net/lessphp/ + 23. The Basics of a Design Engine//create new LESS object$less= new lessc();//compile LESS code to CSS$less->checkedCompile( /path/styles.less, path/styles.css);//create new CSS file and return new file linkecho ""; 24. Passing Variables into LESSPHP //create a new LESS object $less = new lessc(); //set the variables $less->setVariables(array( color => red, base => 960px )); //compile LESS into PHP and unset variables echo $less->compile(".magic { color: @color;width: @base - 200; }"); $less->unsetVariable(color); 25. Implementing Color Functions Lighten / Darken Saturate / Desaturate Mix Colors Adjust Hue 26. Managing Irrelevant Content Remove / hide content based on user profile and state 27. Managing Irrelevant Content//variables passed into LESS compilation$less->setVariables(array("percent" => "80%",));//LESS template.highlight{ @bg-color: "#464646; @font-color: "#eee";background-color: fade(@bg-color, @percent);color: fade(@font-color, @percent);} 28. Acting on Disinterest / Boredom Traits of the Bored Distraction Repetition Tiredness Reasons for Boredom Lack of interest Readiness 29. Highlighting on Agitated Behavior Highlight relevant content to reduce agitated behavior 30. Acting Upon User QueuesVariables passed into LESS script $less->setVariables(array( "percent" => "100%", "size-mod" => "2" )); 31. Acting Upon User QueuesLESS script logic for color / size variations.highlight{ @bg-calm: "blue"; @bg-action: "red"; @base-font: "14px";background-color: mix(@bg-calm,@bg-action,@percent );font-size: @size-mod + @base-font;} 32. The Takeaways Choose your color palette to match your industry & users Know your users Act upon this knowledge 33. 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/ 34. Thank You! Any Questions? http://www.slideshare.com/jcleblancJonathan LeBlancDeveloper Evangelist (PayPal)Twitter: @jcleblanc Github: github.com/jcleblanc