Emotional Design for Mobile
Upcoming SlideShare
Loading in...5
×
 

Emotional Design for Mobile

on

  • 4,207 views

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

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

Statistics

Views

Total Views
4,207
Views on SlideShare
4,117
Embed Views
90

Actions

Likes
9
Downloads
83
Comments
3

10 Embeds 90

http://lanyrd.com 62
https://twitter.com 8
http://pinterest.com 6
http://www.onlydoo.com 4
https://si0.twimg.com 3
http://fr.slideshare.net 2
http://feeds.feedburner.com 2
http://presentationdocs.playableitems.demobo.com 1
https://twimg0-a.akamaihd.net 1
http://www.pinterest.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Emotional Design for Mobile Presentation Transcript

  • Emotional Design in Mobile Developing for Individuals Jonathan LeBlanc Developer Evangelist (eBay) Twitter: @jcleblanc Github: github.com/jcleblanc
  • 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 and baseline mining Emotional response actions and the design engine
  • Components of Emotional Design Building the base level emotional response using color theory Personality and baseline mining Emotional response actions and the design engine
  • Color Theory and the Base Level Primary color Filler Color Accent colors Principal Neutral glue Secondary emotional Emotion response  
  • …Some Color Theory may be BS
  • 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.  
  • 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
  • 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  
  • Red and the eBay Commerce Study
  • 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  
  • Components of Emotional Design Building the base level emotional response using color theory Personality and baseline mining Emotional response actions and the design engine
  • 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
  • Understanding the Path What is the path the user takes to  
  • What the User Cares About Measuring time on page to give insight into user topic interest  
  • Mining Page Data for Traits Step  1:  Obtain   Interac0on   Content  
  • 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 Personality and baseline mining Emotional response actions and the design engine
  • The CSS Service Engine lesscss.org   sass-lang.com   learnboost.github.com/stylus  
  • Implementing Color Functions Lighten / Darken Saturate / Desaturate Mix Colors Adjust Hue
  • Managing Irrelevant Content Remove / hide content based on user profile and state
  • Acting on Disinterest / Boredom Traits of the Bored Distraction Repetition Tiredness Reasons for Boredom Lack of interest Readiness
  • Highlighting on Agitated Behavior Highlight relevant content to reduce agitated behavior
  • 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.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
  • Thank You! Any Questions? http://bit.ly/ncdevcon_emotional_design Jonathan LeBlanc Developer Evangelist (eBay) Twitter: @jcleblanc Github: github.com/jcleblanc