Emotional Design

Trends are moving towards the emergence of site customization based on user state. We will cover practical development examples on using user interest and identity data mining techniques to be able to determine the emotional ease, frustration levels, and intention of users, and customize the user experience based on that.

Transcript

1. Developing for Individuals Emotional Design Jonathan LeBlanc Developer Evangelist (PayPal) Twitter: @jcleblanc Github: github.com/jcleblanc
2. Manipulation of the emotional state of a known user to invoke a positive response What is Emotional Design?
3. Manipulation of the emotional state of a known user to invoke a positive response What is Emotional Design?
4. Building the base level emotional response using color theory Personality and baseline mining Emotional response actions and the design engine Components of Emotional Design
5. Building the base level emotional response using color theory Personality and baseline mining Emotional response actions and the design engine Components of Emotional Design
6. Color Theory and the Base Level Primary color Principal Emotion Filler Color Neutral glue Accent colors Secondary emotional 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. 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  
13. Building the base level emotional response using color theory Personality and baseline mining Emotional response actions and the design engine Components of Emotional Design
14. 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
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 Mining Interest Discovery using Adaptive Human Behavioral Analysis Friday 2:45pm – 3:45pm  
18. Determining Commonality Overlap Person  A   Person  B  
19. Building the base level emotional response using color theory Personality and baseline mining Emotional response actions and the design engine Components of Emotional Design
20. What We’re Talking About
21. The CSS Service Engine lesscss.org   sass-lang.com   learnboost.github.com/stylus  
22. http://leafo.net/lessphp/ Design Engine Foundation: 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 link echo "<link rel='stylesheet' href='http://path/styles.css' type='text/css' />";
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 Adjust Hue Mix Colors
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. Traits of the Bored Distraction Repetition Tiredness Reasons for Boredom Lack of interest Readiness Acting on Disinterest / Boredom
29. Highlighting on Agitated Behavior Highlight relevant content to reduce agitated behavior
30. Acting Upon User Queues $less->setVariables(array( "percent" => "100%", "size-mod" => "2" )); Variables passed into LESS script  
31. Acting Upon User Queues .highlight{ @bg-calm: "blue"; @bg-action: "red"; @base-font: "14px"; background-color: mix( @bg-calm, @bg-action, @percent ); font-size: @size-mod + @base-font; } LESS script logic for color / size variations  
32. Choose your color palette to match your industry & users Know your users Act upon this knowledge The Takeaways
33. 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/ Links
34. Thank You! Any Questions? Jonathan LeBlanc Developer Evangelist (PayPal) Twitter: @jcleblanc Github: github.com/jcleblanc http://www.slideshare.com/jcleblanc