Emotional Design for Mobile
•
11 recomendaciones•2,854 vistas
Presentation on emotional design for mobile devices, given at NCDevCon in Raleigh, NC on September 30th, 2012
Recomendados
Más contenido relacionado
Similar a Emotional Design for Mobile
Similar a Emotional Design for Mobile (20)
Más de Jonathan LeBlanc
Más de Jonathan LeBlanc (20)
Último
Último (20)
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. 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/ 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
Notas del editor
- 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