Emotional Design for Mobile

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

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 Diﬀerence Australian Aboriginals: Land, earth Celtic: Death, afterlife China: Good luck, celebration Cherokees: Success, triumph Hebrew: Sacriﬁce, 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 Diﬀerence! 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

Understanding a Person in Context Personality proﬁle 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

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 proﬁle 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

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

Emotional Design for Mobile

by Jonathan LeBlanc on Sep 26, 2012

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 73

Statistics

Emotional Design for Mobile Presentation Transcript