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.
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Emotional Design
1. Emotional Design
Developing for Individuals
Jonathan LeBlanc
Developer Evangelist (PayPal)
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
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
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
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
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');
30. Acting Upon User Queues
Variables passed into LESS script
$less->setVariables(array(
"percent" => "100%",
"size-mod" => "2"
));
31. Acting Upon User Queues
LESS 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. The Takeaways
Choose your color palette to match
your industry & users
Know your users
Act upon this knowledge
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. Thank You! Any Questions?
http://www.slideshare.com/jcleblanc
Jonathan LeBlanc
Developer Evangelist (PayPal)
Twitter: @jcleblanc
Github: github.com/jcleblanc
Editor's Notes
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