Emotional Design    Developing for Individuals               Jonathan LeBlanc     Developer Evangelist (PayPal)           ...
What is Emotional Design?   Manipulation of the emotional state     of a known user to invoke a           positive response
What is Emotional Design?   Manipulation of the emotional state     of a known user to invoke a           positive response
Components of Emotional Design       Building the base level emotional       response using color theory       Personality...
Components of Emotional Design       Building the base level emotional       response using color theory       Personality...
Color Theory and the Base LevelPrimary color   Filler Color     Accent colors   Principal    Neutral glue   Secondary emot...
…Some Color Theory may be BS
Much is Based in Science            Birds with brightly colored leg bands            higher on the mating ranks.          ...
Culture Makes a Difference           Australian Aboriginals: Land, earth           Celtic: Death, afterlife           Chin...
Choosing the Correct Hue       Products with a feel-good message       Happiness, energy, encouragement       Health care ...
Red and the eBay Commerce Study
Saturation Makes a Difference!           Dark: Rage, anger, leadership, courage           Light: Romance, feminine, innoce...
Components of Emotional Design       Building the base level emotional       response using color theory       Personality...
Understanding a Person in Context   Personality profile   What a person knows   What a person knows they don’t know   What...
Understanding the Path                   What is the path                   the user takes to
What the User Cares About                   Measuring time on                   page to give                   insight int...
Data MiningInterest Discovery using Adaptive Human Behavioral Analysis                   Friday 2:45pm – 3:45pm
Determining Commonality Overlap        Person A   Person B
Components of Emotional Design       Building the base level emotional       response using color theory       Personality...
What We’re Talking About
The CSS Service Engine             lesscss.org             sass-lang.com             learnboost.github.com/stylus
Design Engine Foundation: LESSPHP       http://leafo.net/lessphp/                 +
The Basics of a Design Engine//create new LESS object$less= new lessc();//compile LESS code to CSS$less->checkedCompile(  ...
Passing Variables into LESSPHP     //create a new LESS object     $less = new lessc();     //set the variables     $less->...
Implementing Color Functions Lighten / Darken   Saturate / Desaturate Mix Colors         Adjust Hue
Managing Irrelevant Content                 Remove / hide content                 based on user profile                 an...
Managing Irrelevant Content  //variables passed into LESS compilation  $less->setVariables(array(      "percent" => "80%",...
Acting on Disinterest / Boredom   Traits of the Bored   Distraction   Repetition   Tiredness   Reasons for Boredom   Lack ...
Highlighting on Agitated Behavior                 Highlight relevant                 content to reduce                 agi...
Acting Upon User QueuesVariables passed into LESS script     $less->setVariables(array(         "percent" => "100%",      ...
Acting Upon User QueuesLESS script logic for color / size variations    .highlight{         @bg-calm: "blue";         @bg-...
The Takeaways   Choose your color palette to match   your industry & users   Know your users   Act upon this knowledge
Links Psychology and history of color and emotion • http://psychology.about.com/od/sensationandperception   /a/colorpsych....
Thank You! Any Questions?       http://www.slideshare.com/jcleblanc                            Jonathan LeBlanc           ...
Upcoming SlideShare
Loading in...5
×

Emotional Design

6,883

Published on

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.

Published in: Technology
2 Comments
25 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,883
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
152
Comments
2
Likes
25
Embeds 0
No embeds

No notes for slide
  • History:Anicnet cultures (Egyptians / Chinese) practiced ChromotherapyFather-in-law deep purple plates to heal…but in history indigo was used to alleviate shin problemsWhat a lot of this came down to was the human brain believing that this workedLight therapy to correct seasonal affective disorder (SAD) – grew up in Canada and saw this a lot
  • Animals without the intellectual capacity to frig up a study with their issues, respond to different colorsCultural differences can actually make a difference
  • red
  • Pink – Paris hilton ruined it for purity
  • How many people are ticked off that adjust hue only has 2 boxes instead of 3You can also play with the fade in / fade out to modify the lightness and highlighting
  • Emotional Design

    1. 1. Emotional Design Developing for Individuals Jonathan LeBlanc Developer Evangelist (PayPal) Twitter: @jcleblanc Github: github.com/jcleblanc
    2. 2. What is Emotional Design? Manipulation of the emotional state of a known user to invoke a positive response
    3. 3. What is Emotional Design? Manipulation of the emotional state of a known user to invoke a positive response
    4. 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. 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. 6. Color Theory and the Base LevelPrimary color Filler Color Accent colors Principal Neutral glue Secondary emotional Emotion response
    7. 7. …Some Color Theory may be BS
    8. 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. 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. 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. 11. Red and the eBay Commerce Study
    12. 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. 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. 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. 15. Understanding the Path What is the path the user takes to
    16. 16. What the User Cares About Measuring time on page to give insight into user topic interest
    17. 17. Data MiningInterest Discovery using Adaptive Human Behavioral Analysis Friday 2:45pm – 3:45pm
    18. 18. Determining Commonality Overlap Person A Person B
    19. 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. 20. What We’re Talking About
    21. 21. The CSS Service Engine lesscss.org sass-lang.com learnboost.github.com/stylus
    22. 22. Design Engine Foundation: LESSPHP http://leafo.net/lessphp/ +
    23. 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 "<link rel=stylesheet href=http://path/styles.css type=text/css />";
    24. 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. 25. Implementing Color Functions Lighten / Darken Saturate / Desaturate Mix Colors Adjust Hue
    26. 26. Managing Irrelevant Content Remove / hide content based on user profile and state
    27. 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. 28. Acting on Disinterest / Boredom Traits of the Bored Distraction Repetition Tiredness Reasons for Boredom Lack of interest Readiness
    29. 29. Highlighting on Agitated Behavior Highlight relevant content to reduce agitated behavior
    30. 30. Acting Upon User QueuesVariables passed into LESS script $less->setVariables(array( "percent" => "100%", "size-mod" => "2" ));
    31. 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. 32. The Takeaways Choose your color palette to match your industry & users Know your users Act upon this knowledge
    33. 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. 34. Thank You! Any Questions? http://www.slideshare.com/jcleblanc Jonathan LeBlanc Developer Evangelist (PayPal) Twitter: @jcleblanc Github: github.com/jcleblanc
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×