Emotional Design in Mobile         Developing for Individuals                       Jonathan LeBlanc            Developer ...
What is Emotional Design?   Manipulation of the emotional state      of a known user to invoke a            positive respo...
What is Emotional Design?   Manipulation of the emotional state      of a known user to invoke a            positive respo...
Components of Emotional Design        Building the base level emotional        response using color theory        Personal...
Components of Emotional Design        Building the base level emotional        response using color theory        Personal...
Color Theory and the Base Level Primary color   Filler Color      Accent colors   Principal     Neutral glue   Secondary e...
…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            Ch...
Choosing the Correct Hue        Products with a feel-good message        Happiness, energy, encouragement	          Health...
Red and the eBay Commerce Study
Saturation Makes a Difference!            Dark: Rage, anger, leadership, courage            Light: Romance, feminine, innoc...
Components of Emotional Design        Building the base level emotional        response using color theory        Personal...
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                  ...
Mining Page Data for Traits                         Step	  1:	  Obtain	                           Interac0on	             ...
Mining Page Data for Traits Step	  2:	  Mine	   keywords	  or	  meta	   data	  
Mining Page Data for Traits                       Step	  3:	  Weight	                         derived	  results	  
Determining Commonality Overlap        Person	  A	     Person	  B	  
Components of Emotional Design        Building the base level emotional        response using color theory        Personal...
The CSS Service Engine               lesscss.org	                 sass-lang.com	                 learnboost.github.com/sty...
Implementing Color Functions Lighten / Darken    Saturate / Desaturate Mix Colors          Adjust Hue
Managing Irrelevant Content                  Remove / hide content                  based on user profile                  ...
Acting on Disinterest / Boredom   Traits of the Bored   Distraction   Repetition   Tiredness   Reasons for Boredom   Lack ...
Highlighting on Agitated Behavior                  Highlight relevant                  content to reduce                  ...
The Takeaways   Choose your color palette to match   your industry & users   Know your users   Act upon this knowledge
LinksPsychology and history of color and emotion•  http://psychology.about.com/od/sensationandperception/a/   colorpsych.h...
Thank You! Any Questions?   http://bit.ly/ncdevcon_emotional_design                               Jonathan LeBlanc        ...
Upcoming SlideShare
Loading in...5
×

Emotional Design for Mobile

3,797

Published on

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

Published in: Technology, Design
3 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,797
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
89
Comments
3
Likes
10
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 for Mobile

    1. 1. Emotional Design in Mobile Developing for Individuals Jonathan LeBlanc Developer Evangelist (eBay) 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 Level Primary 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. Mining Page Data for Traits Step  1:  Obtain   Interac0on   Content  
    18. 18. Mining Page Data for Traits Step  2:  Mine   keywords  or  meta   data  
    19. 19. Mining Page Data for Traits Step  3:  Weight   derived  results  
    20. 20. Determining Commonality Overlap Person  A   Person  B  
    21. 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. 22. The CSS Service Engine lesscss.org   sass-lang.com   learnboost.github.com/stylus  
    23. 23. Implementing Color Functions Lighten / Darken Saturate / Desaturate Mix Colors Adjust Hue
    24. 24. Managing Irrelevant Content Remove / hide content based on user profile and state
    25. 25. Acting on Disinterest / Boredom Traits of the Bored Distraction Repetition Tiredness Reasons for Boredom Lack of interest Readiness
    26. 26. Highlighting on Agitated Behavior Highlight relevant content to reduce agitated behavior
    27. 27. The Takeaways Choose your color palette to match your industry & users Know your users Act upon this knowledge
    28. 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. 29. Thank You! Any Questions? http://bit.ly/ncdevcon_emotional_design Jonathan LeBlanc Developer Evangelist (eBay) 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.

    ×