SlideShare ist ein Scribd-Unternehmen logo
1 von 34
Downloaden Sie, um offline zu lesen
Emotional Design
    Developing for Individuals




               Jonathan LeBlanc
     Developer Evangelist (PayPal)
               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
Data Mining
Interest Discovery using Adaptive Human Behavioral Analysis
                   Friday 2:45pm – 3:45pm
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
What We’re Talking About
The CSS Service Engine

             lesscss.org



             sass-lang.com



             learnboost.github.com/stylus
Design Engine Foundation: LESSPHP


       http://leafo.net/lessphp/




                 +
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' />";
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');
Implementing Color Functions

 Lighten / Darken   Saturate / Desaturate




 Mix Colors         Adjust Hue
Managing Irrelevant Content




                 Remove / hide content
                 based on user profile
                 and state
Managing Irrelevant Content
  //variables passed into LESS compilation
  $less->setVariables(array(
      "percent" => "80%",
  ));

  //LESS template
  .highlight{
     @bg-color: "#464646”;
     @font-color: "#eee";

      background-color: fade(@bg-color, @percent);
      color: fade(@font-color, @percent);
  }
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
Acting Upon User Queues

Variables passed into LESS script


     $less->setVariables(array(
         "percent" => "100%",
         "size-mod" => "2"
     ));
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;
    }
The Takeaways


   Choose your color palette to match
   your industry & users

   Know your users

   Act upon this knowledge
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/
Thank You! Any Questions?
       http://www.slideshare.com/jcleblanc




                            Jonathan LeBlanc
                  Developer Evangelist (PayPal)
                            Twitter: @jcleblanc
                   Github: github.com/jcleblanc

Weitere ähnliche Inhalte

Was ist angesagt?

Digital Storytelling
Digital StorytellingDigital Storytelling
Digital StorytellingSarah Page
 
Hci interace affects the user lec 8
Hci interace affects the user lec 8Hci interace affects the user lec 8
Hci interace affects the user lec 8Anwal Mirza
 
Basics Of Mind Mapping For Business And Beyond
Basics Of Mind Mapping For Business And BeyondBasics Of Mind Mapping For Business And Beyond
Basics Of Mind Mapping For Business And BeyondShelley West
 
LAFS PREPRO Session 1 - Brainstorming and Game Pitches
LAFS PREPRO Session 1 - Brainstorming and Game PitchesLAFS PREPRO Session 1 - Brainstorming and Game Pitches
LAFS PREPRO Session 1 - Brainstorming and Game PitchesDavid Mullich
 
Educational Games Design (STEG10 Keynote)
Educational Games Design (STEG10 Keynote)Educational Games Design (STEG10 Keynote)
Educational Games Design (STEG10 Keynote)David Farrell
 
Initial plans: video game rotaion
Initial plans: video game rotaionInitial plans: video game rotaion
Initial plans: video game rotaionWill Cave
 
Charts, Visuals, Infographics...Oh My!
Charts, Visuals, Infographics...Oh My!Charts, Visuals, Infographics...Oh My!
Charts, Visuals, Infographics...Oh My!Jenna Smith
 
Raechel Alexis Gasparac Creative Portfolio
Raechel Alexis Gasparac Creative PortfolioRaechel Alexis Gasparac Creative Portfolio
Raechel Alexis Gasparac Creative PortfolioRaechel Gasparac
 
SXSW: iPad Design Headaches (Take Two Tablets and Call Me in the Morning)
SXSW: iPad Design Headaches (Take Two Tablets and Call Me in the Morning)SXSW: iPad Design Headaches (Take Two Tablets and Call Me in the Morning)
SXSW: iPad Design Headaches (Take Two Tablets and Call Me in the Morning)Josh Clark
 
TEDx: How To Spread Your Idea
TEDx: How To Spread Your Idea TEDx: How To Spread Your Idea
TEDx: How To Spread Your Idea Dave Lim TM
 

Was ist angesagt? (12)

Digital Storytelling
Digital StorytellingDigital Storytelling
Digital Storytelling
 
Hci interace affects the user lec 8
Hci interace affects the user lec 8Hci interace affects the user lec 8
Hci interace affects the user lec 8
 
Basics Of Mind Mapping For Business And Beyond
Basics Of Mind Mapping For Business And BeyondBasics Of Mind Mapping For Business And Beyond
Basics Of Mind Mapping For Business And Beyond
 
LAFS PREPRO Session 1 - Brainstorming and Game Pitches
LAFS PREPRO Session 1 - Brainstorming and Game PitchesLAFS PREPRO Session 1 - Brainstorming and Game Pitches
LAFS PREPRO Session 1 - Brainstorming and Game Pitches
 
Educational Games Design (STEG10 Keynote)
Educational Games Design (STEG10 Keynote)Educational Games Design (STEG10 Keynote)
Educational Games Design (STEG10 Keynote)
 
Initial plans: video game rotaion
Initial plans: video game rotaionInitial plans: video game rotaion
Initial plans: video game rotaion
 
Charts, Visuals, Infographics...Oh My!
Charts, Visuals, Infographics...Oh My!Charts, Visuals, Infographics...Oh My!
Charts, Visuals, Infographics...Oh My!
 
Raechel Alexis Gasparac Creative Portfolio
Raechel Alexis Gasparac Creative PortfolioRaechel Alexis Gasparac Creative Portfolio
Raechel Alexis Gasparac Creative Portfolio
 
Research Makes the Dream Work!
Research Makes the Dream Work!Research Makes the Dream Work!
Research Makes the Dream Work!
 
Renee Hobbs, 2017. Create to Learn: Introduction to Digital Literacy. Chapter...
Renee Hobbs, 2017. Create to Learn: Introduction to Digital Literacy. Chapter...Renee Hobbs, 2017. Create to Learn: Introduction to Digital Literacy. Chapter...
Renee Hobbs, 2017. Create to Learn: Introduction to Digital Literacy. Chapter...
 
SXSW: iPad Design Headaches (Take Two Tablets and Call Me in the Morning)
SXSW: iPad Design Headaches (Take Two Tablets and Call Me in the Morning)SXSW: iPad Design Headaches (Take Two Tablets and Call Me in the Morning)
SXSW: iPad Design Headaches (Take Two Tablets and Call Me in the Morning)
 
TEDx: How To Spread Your Idea
TEDx: How To Spread Your Idea TEDx: How To Spread Your Idea
TEDx: How To Spread Your Idea
 

Ähnlich wie Emotional Design

Emotional Design for Mobile
Emotional Design for MobileEmotional Design for Mobile
Emotional Design for MobileJonathan LeBlanc
 
La gestión del conocimiento: la Web 2.0, Redes Sociales, y otras herramientas
La gestión del conocimiento: la Web 2.0, Redes Sociales, y otras herramientasLa gestión del conocimiento: la Web 2.0, Redes Sociales, y otras herramientas
La gestión del conocimiento: la Web 2.0, Redes Sociales, y otras herramientasRadar Información y Conocimiento
 
Visual Communication Presentation ASTD 0807
Visual Communication Presentation ASTD 0807 Visual Communication Presentation ASTD 0807
Visual Communication Presentation ASTD 0807 guest15630da
 
Deep Machine Reading for Customer Analytics
Deep Machine Reading for Customer AnalyticsDeep Machine Reading for Customer Analytics
Deep Machine Reading for Customer AnalyticsNaveen Ashish
 
Depth of Feelings: Modeling Emotions in User Models and Agent Architectures
Depth of Feelings: Modeling Emotions in User Models and Agent ArchitecturesDepth of Feelings: Modeling Emotions in User Models and Agent Architectures
Depth of Feelings: Modeling Emotions in User Models and Agent ArchitecturesEva Hudlicka
 
Data Visualisation: A Game of Decisions
Data Visualisation: A Game of DecisionsData Visualisation: A Game of Decisions
Data Visualisation: A Game of DecisionsAndy Kirk
 
Phoenix Design Week: User Journeys for Damn Good Digital Design
Phoenix Design Week: User Journeys for Damn Good Digital DesignPhoenix Design Week: User Journeys for Damn Good Digital Design
Phoenix Design Week: User Journeys for Damn Good Digital DesignRebekah Baggs
 
An approach for data visualisation
An approach for data visualisation An approach for data visualisation
An approach for data visualisation Tridant
 
Assessment In Spreadsheets
Assessment In SpreadsheetsAssessment In Spreadsheets
Assessment In Spreadsheetsguest46de76
 
The Future of Identification
The Future of IdentificationThe Future of Identification
The Future of IdentificationJonathan LeBlanc
 
Smart datamining semtechbiz 2013 report
Smart datamining semtechbiz 2013 reportSmart datamining semtechbiz 2013 report
Smart datamining semtechbiz 2013 reportJesse Wang
 
Engaging Users with High-Performance Design
Engaging Users with High-Performance DesignEngaging Users with High-Performance Design
Engaging Users with High-Performance DesignLitmus
 
Reed: "Player 2: Mixing Gameplay and Audience Heuristics"
Reed: "Player 2: Mixing Gameplay and Audience Heuristics"Reed: "Player 2: Mixing Gameplay and Audience Heuristics"
Reed: "Player 2: Mixing Gameplay and Audience Heuristics"rhetoroxor
 
Lisa Myers - How to Make Your Wishlist Piece of Coverage Come True
Lisa Myers - How to Make Your Wishlist Piece of Coverage Come TrueLisa Myers - How to Make Your Wishlist Piece of Coverage Come True
Lisa Myers - How to Make Your Wishlist Piece of Coverage Come TrueTuring Fest
 
Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3John Bertucci
 
Psychology of Website Design - Dr. Pamela Rutledge
Psychology of Website Design - Dr. Pamela RutledgePsychology of Website Design - Dr. Pamela Rutledge
Psychology of Website Design - Dr. Pamela RutledgePamela Rutledge
 
Building successful research collaboration
Building successful research collaborationBuilding successful research collaboration
Building successful research collaborationQSR International
 

Ähnlich wie Emotional Design (20)

Emotional Design for Mobile
Emotional Design for MobileEmotional Design for Mobile
Emotional Design for Mobile
 
La gestión del conocimiento: la Web 2.0, Redes Sociales, y otras herramientas
La gestión del conocimiento: la Web 2.0, Redes Sociales, y otras herramientasLa gestión del conocimiento: la Web 2.0, Redes Sociales, y otras herramientas
La gestión del conocimiento: la Web 2.0, Redes Sociales, y otras herramientas
 
Visual Communication Presentation ASTD 0807
Visual Communication Presentation ASTD 0807 Visual Communication Presentation ASTD 0807
Visual Communication Presentation ASTD 0807
 
Deep Machine Reading for Customer Analytics
Deep Machine Reading for Customer AnalyticsDeep Machine Reading for Customer Analytics
Deep Machine Reading for Customer Analytics
 
Depth of Feelings: Modeling Emotions in User Models and Agent Architectures
Depth of Feelings: Modeling Emotions in User Models and Agent ArchitecturesDepth of Feelings: Modeling Emotions in User Models and Agent Architectures
Depth of Feelings: Modeling Emotions in User Models and Agent Architectures
 
Data Visualisation: A Game of Decisions
Data Visualisation: A Game of DecisionsData Visualisation: A Game of Decisions
Data Visualisation: A Game of Decisions
 
Phoenix Design Week: User Journeys for Damn Good Digital Design
Phoenix Design Week: User Journeys for Damn Good Digital DesignPhoenix Design Week: User Journeys for Damn Good Digital Design
Phoenix Design Week: User Journeys for Damn Good Digital Design
 
An approach for data visualisation
An approach for data visualisation An approach for data visualisation
An approach for data visualisation
 
Assessment In Spreadsheets
Assessment In SpreadsheetsAssessment In Spreadsheets
Assessment In Spreadsheets
 
The Future of Identification
The Future of IdentificationThe Future of Identification
The Future of Identification
 
Visualization as a presentation of synthesis reading
Visualization as a presentation of synthesis readingVisualization as a presentation of synthesis reading
Visualization as a presentation of synthesis reading
 
Smart datamining semtechbiz 2013 report
Smart datamining semtechbiz 2013 reportSmart datamining semtechbiz 2013 report
Smart datamining semtechbiz 2013 report
 
Engaging Users with High-Performance Design
Engaging Users with High-Performance DesignEngaging Users with High-Performance Design
Engaging Users with High-Performance Design
 
Fyp ca2
Fyp ca2Fyp ca2
Fyp ca2
 
Reed: "Player 2: Mixing Gameplay and Audience Heuristics"
Reed: "Player 2: Mixing Gameplay and Audience Heuristics"Reed: "Player 2: Mixing Gameplay and Audience Heuristics"
Reed: "Player 2: Mixing Gameplay and Audience Heuristics"
 
Lisa Myers - How to Make Your Wishlist Piece of Coverage Come True
Lisa Myers - How to Make Your Wishlist Piece of Coverage Come TrueLisa Myers - How to Make Your Wishlist Piece of Coverage Come True
Lisa Myers - How to Make Your Wishlist Piece of Coverage Come True
 
Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3
 
ICWSM_SISoM-11
ICWSM_SISoM-11ICWSM_SISoM-11
ICWSM_SISoM-11
 
Psychology of Website Design - Dr. Pamela Rutledge
Psychology of Website Design - Dr. Pamela RutledgePsychology of Website Design - Dr. Pamela Rutledge
Psychology of Website Design - Dr. Pamela Rutledge
 
Building successful research collaboration
Building successful research collaborationBuilding successful research collaboration
Building successful research collaboration
 

Mehr von Jonathan LeBlanc

JavaScript App Security: Auth and Identity on the Client
JavaScript App Security: Auth and Identity on the ClientJavaScript App Security: Auth and Identity on the Client
JavaScript App Security: Auth and Identity on the ClientJonathan LeBlanc
 
Improving Developer Onboarding Through Intelligent Data Insights
Improving Developer Onboarding Through Intelligent Data InsightsImproving Developer Onboarding Through Intelligent Data Insights
Improving Developer Onboarding Through Intelligent Data InsightsJonathan LeBlanc
 
Better Data with Machine Learning and Serverless
Better Data with Machine Learning and ServerlessBetter Data with Machine Learning and Serverless
Better Data with Machine Learning and ServerlessJonathan LeBlanc
 
Best Practices for Application Development with Box
Best Practices for Application Development with BoxBest Practices for Application Development with Box
Best Practices for Application Development with BoxJonathan LeBlanc
 
Box Platform Developer Workshop
Box Platform Developer WorkshopBox Platform Developer Workshop
Box Platform Developer WorkshopJonathan LeBlanc
 
Modern Cloud Data Security Practices
Modern Cloud Data Security PracticesModern Cloud Data Security Practices
Modern Cloud Data Security PracticesJonathan LeBlanc
 
Understanding Box UI Elements
Understanding Box UI ElementsUnderstanding Box UI Elements
Understanding Box UI ElementsJonathan LeBlanc
 
Understanding Box applications, tokens, and scoping
Understanding Box applications, tokens, and scopingUnderstanding Box applications, tokens, and scoping
Understanding Box applications, tokens, and scopingJonathan LeBlanc
 
The Future of Online Money: Creating Secure Payments Globally
The Future of Online Money: Creating Secure Payments GloballyThe Future of Online Money: Creating Secure Payments Globally
The Future of Online Money: Creating Secure Payments GloballyJonathan LeBlanc
 
Modern API Security with JSON Web Tokens
Modern API Security with JSON Web TokensModern API Security with JSON Web Tokens
Modern API Security with JSON Web TokensJonathan LeBlanc
 
Creating an In-Aisle Purchasing System from Scratch
Creating an In-Aisle Purchasing System from ScratchCreating an In-Aisle Purchasing System from Scratch
Creating an In-Aisle Purchasing System from ScratchJonathan LeBlanc
 
Secure Payments Over Mixed Communication Media
Secure Payments Over Mixed Communication MediaSecure Payments Over Mixed Communication Media
Secure Payments Over Mixed Communication MediaJonathan LeBlanc
 
Protecting the Future of Mobile Payments
Protecting the Future of Mobile PaymentsProtecting the Future of Mobile Payments
Protecting the Future of Mobile PaymentsJonathan LeBlanc
 
Node.js Authentication and Data Security
Node.js Authentication and Data SecurityNode.js Authentication and Data Security
Node.js Authentication and Data SecurityJonathan LeBlanc
 
PHP Identity and Data Security
PHP Identity and Data SecurityPHP Identity and Data Security
PHP Identity and Data SecurityJonathan LeBlanc
 
Secure Payments Over Mixed Communication Media
Secure Payments Over Mixed Communication MediaSecure Payments Over Mixed Communication Media
Secure Payments Over Mixed Communication MediaJonathan LeBlanc
 
Protecting the Future of Mobile Payments
Protecting the Future of Mobile PaymentsProtecting the Future of Mobile Payments
Protecting the Future of Mobile PaymentsJonathan LeBlanc
 
Future of Identity, Data, and Wearable Security
Future of Identity, Data, and Wearable SecurityFuture of Identity, Data, and Wearable Security
Future of Identity, Data, and Wearable SecurityJonathan LeBlanc
 

Mehr von Jonathan LeBlanc (20)

JavaScript App Security: Auth and Identity on the Client
JavaScript App Security: Auth and Identity on the ClientJavaScript App Security: Auth and Identity on the Client
JavaScript App Security: Auth and Identity on the Client
 
Improving Developer Onboarding Through Intelligent Data Insights
Improving Developer Onboarding Through Intelligent Data InsightsImproving Developer Onboarding Through Intelligent Data Insights
Improving Developer Onboarding Through Intelligent Data Insights
 
Better Data with Machine Learning and Serverless
Better Data with Machine Learning and ServerlessBetter Data with Machine Learning and Serverless
Better Data with Machine Learning and Serverless
 
Best Practices for Application Development with Box
Best Practices for Application Development with BoxBest Practices for Application Development with Box
Best Practices for Application Development with Box
 
Box Platform Overview
Box Platform OverviewBox Platform Overview
Box Platform Overview
 
Box Platform Developer Workshop
Box Platform Developer WorkshopBox Platform Developer Workshop
Box Platform Developer Workshop
 
Modern Cloud Data Security Practices
Modern Cloud Data Security PracticesModern Cloud Data Security Practices
Modern Cloud Data Security Practices
 
Box Authentication Types
Box Authentication TypesBox Authentication Types
Box Authentication Types
 
Understanding Box UI Elements
Understanding Box UI ElementsUnderstanding Box UI Elements
Understanding Box UI Elements
 
Understanding Box applications, tokens, and scoping
Understanding Box applications, tokens, and scopingUnderstanding Box applications, tokens, and scoping
Understanding Box applications, tokens, and scoping
 
The Future of Online Money: Creating Secure Payments Globally
The Future of Online Money: Creating Secure Payments GloballyThe Future of Online Money: Creating Secure Payments Globally
The Future of Online Money: Creating Secure Payments Globally
 
Modern API Security with JSON Web Tokens
Modern API Security with JSON Web TokensModern API Security with JSON Web Tokens
Modern API Security with JSON Web Tokens
 
Creating an In-Aisle Purchasing System from Scratch
Creating an In-Aisle Purchasing System from ScratchCreating an In-Aisle Purchasing System from Scratch
Creating an In-Aisle Purchasing System from Scratch
 
Secure Payments Over Mixed Communication Media
Secure Payments Over Mixed Communication MediaSecure Payments Over Mixed Communication Media
Secure Payments Over Mixed Communication Media
 
Protecting the Future of Mobile Payments
Protecting the Future of Mobile PaymentsProtecting the Future of Mobile Payments
Protecting the Future of Mobile Payments
 
Node.js Authentication and Data Security
Node.js Authentication and Data SecurityNode.js Authentication and Data Security
Node.js Authentication and Data Security
 
PHP Identity and Data Security
PHP Identity and Data SecurityPHP Identity and Data Security
PHP Identity and Data Security
 
Secure Payments Over Mixed Communication Media
Secure Payments Over Mixed Communication MediaSecure Payments Over Mixed Communication Media
Secure Payments Over Mixed Communication Media
 
Protecting the Future of Mobile Payments
Protecting the Future of Mobile PaymentsProtecting the Future of Mobile Payments
Protecting the Future of Mobile Payments
 
Future of Identity, Data, and Wearable Security
Future of Identity, Data, and Wearable SecurityFuture of Identity, Data, and Wearable Security
Future of Identity, Data, and Wearable Security
 

Kürzlich hochgeladen

How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 

Kürzlich hochgeladen (20)

How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 

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
  • 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. Data Mining Interest Discovery using Adaptive Human Behavioral Analysis Friday 2:45pm – 3:45pm
  • 18. Determining Commonality Overlap Person A Person B
  • 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
  • 21. The CSS Service Engine lesscss.org sass-lang.com learnboost.github.com/stylus
  • 22. Design Engine Foundation: LESSPHP http://leafo.net/lessphp/ +
  • 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');
  • 25. Implementing Color Functions Lighten / Darken Saturate / Desaturate Mix Colors Adjust Hue
  • 26. Managing Irrelevant Content Remove / hide content based on user profile and state
  • 27. Managing Irrelevant Content //variables passed into LESS compilation $less->setVariables(array( "percent" => "80%", )); //LESS template .highlight{ @bg-color: "#464646”; @font-color: "#eee"; background-color: fade(@bg-color, @percent); color: fade(@font-color, @percent); }
  • 28. Acting on Disinterest / Boredom Traits of the Bored Distraction Repetition Tiredness Reasons for Boredom Lack of interest Readiness
  • 29. Highlighting on Agitated Behavior Highlight relevant content to reduce agitated behavior
  • 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

Hinweis der Redaktion

  1. 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
  2. Animals without the intellectual capacity to frig up a study with their issues, respond to different colorsCultural differences can actually make a difference
  3. red
  4. Pink – Paris hilton ruined it for purity
  5. 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