SlideShare uma empresa Scribd logo
1 de 29
Baixar para ler offline
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
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
Thank You! Any Questions?
   http://bit.ly/ncdevcon_emotional_design




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

Mais conteúdo relacionado

Semelhante a Emotional Design for Mobile

The Future of Identification
The Future of IdentificationThe Future of Identification
The Future of IdentificationJonathan LeBlanc
 
Creative learing and question 111017
Creative learing and question 111017Creative learing and question 111017
Creative learing and question 111017miyoung song
 
A2 revision guide section acopy
A2 revision guide section acopyA2 revision guide section acopy
A2 revision guide section acopyjphibbert1979
 
Do you Mean what you say? Recognizing Emotions.
Do you Mean what you say? Recognizing Emotions.Do you Mean what you say? Recognizing Emotions.
Do you Mean what you say? Recognizing Emotions.Sunil Kumar Kopparapu
 
Designing with Color for User Interfaces
Designing with Color for User InterfacesDesigning with Color for User Interfaces
Designing with Color for User InterfacesAndi Galpern
 
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
 
Visual Communication Presentation ASTD 0807
Visual Communication Presentation ASTD 0807 Visual Communication Presentation ASTD 0807
Visual Communication Presentation ASTD 0807 guest15630da
 
Westby DMT - Week 01 color
Westby DMT - Week 01 colorWestby DMT - Week 01 color
Westby DMT - Week 01 colorRobert Whyte
 
The Art of Disciplined Creativity
The Art of Disciplined CreativityThe Art of Disciplined Creativity
The Art of Disciplined CreativityDenise Jacobs
 
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
 
USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain
USER EXPERIENCE DESIGN SLIDESHOW by Cindy ChastainUSER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain
USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastaininnomind
 
Experience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to DesignExperience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to DesignCindy Chastain
 
Recognizing Emotions in Spontaneous Speech
Recognizing Emotions in Spontaneous SpeechRecognizing Emotions in Spontaneous Speech
Recognizing Emotions in Spontaneous SpeechSunil Kumar Kopparapu
 
Colorium Laboratorium
Colorium LaboratoriumColorium Laboratorium
Colorium Laboratoriumguest0b700f
 
Conversations With Everyday Objects
Conversations With Everyday ObjectsConversations With Everyday Objects
Conversations With Everyday ObjectsBill DeRouchey
 

Semelhante a Emotional Design for Mobile (20)

Emotional Design
Emotional DesignEmotional Design
Emotional Design
 
The Future of Identification
The Future of IdentificationThe Future of Identification
The Future of Identification
 
Creative learing and question 111017
Creative learing and question 111017Creative learing and question 111017
Creative learing and question 111017
 
A2 revision guide section acopy
A2 revision guide section acopyA2 revision guide section acopy
A2 revision guide section acopy
 
Do you Mean what you say? Recognizing Emotions.
Do you Mean what you say? Recognizing Emotions.Do you Mean what you say? Recognizing Emotions.
Do you Mean what you say? Recognizing Emotions.
 
Designing with Color for User Interfaces
Designing with Color for User InterfacesDesigning with Color for User Interfaces
Designing with Color for User Interfaces
 
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"
 
Visual Communication Presentation ASTD 0807
Visual Communication Presentation ASTD 0807 Visual Communication Presentation ASTD 0807
Visual Communication Presentation ASTD 0807
 
Westby DMT - Week 01 color
Westby DMT - Week 01 colorWestby DMT - Week 01 color
Westby DMT - Week 01 color
 
The Art of Disciplined Creativity
The Art of Disciplined CreativityThe Art of Disciplined Creativity
The Art of Disciplined Creativity
 
Critical thinking
Critical thinkingCritical thinking
Critical thinking
 
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
 
Affective Computing
Affective ComputingAffective Computing
Affective Computing
 
Emotional Design
Emotional DesignEmotional Design
Emotional Design
 
USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain
USER EXPERIENCE DESIGN SLIDESHOW by Cindy ChastainUSER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain
USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain
 
Experience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to DesignExperience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to Design
 
Recognizing Emotions in Spontaneous Speech
Recognizing Emotions in Spontaneous SpeechRecognizing Emotions in Spontaneous Speech
Recognizing Emotions in Spontaneous Speech
 
Colorium Laboratorium
Colorium LaboratoriumColorium Laboratorium
Colorium Laboratorium
 
Conversations With Everyday Objects
Conversations With Everyday ObjectsConversations With Everyday Objects
Conversations With Everyday Objects
 
Proposal
Proposal Proposal
Proposal
 

Mais de 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
 

Mais de 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
 

Último

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
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES 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
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
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
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
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
 
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
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
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
 
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
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 

Último (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?
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
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...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
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
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
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
 
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
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
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
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
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
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 

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  
  • 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 do Editor

  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