0
Emotion design
Brand & UI
a digital agency passionate about brand UX.
We help amazing brands transform business through the application
of social me...
1. Emotion Design?
2. Living & Aware Products
3. Brand and Design Personality
4. Examples
EMOTION DESIGN?
Users’ Needs Pyramid
suggested by Aaron Walter (UX designer of Mailchimp)
In an emotionally charged
event, the amygdala releases
dopamine into the system,
which greatly aids memory and
information...
LIVING & AWARE
“the love of life or living
systems.”
ERICH FROMM:
/a psychological
orientation of being
attracted to all that is
alive an...
BREATHING STATUS
LED INDICATOR
The status light on the front of
Apple laptops and desktops
gently pulses to indicate a sle...
EXAMPLE:
CUTENESS IS A BABY’S FIRST LINE OF DEFENSE.
AND FOR SOME APPS TOO.
“The biophilia hypothesis suggests that the po...
BRAND PERSONALITY
WHO IS YOUR PRODUCT?
Hummer – Arnold Schwarzenegger (big)
Toyota – Tom Hanks (reliable)
Volvo – George Clooney (safe)
NIKE BRAND PERSONALITY: MOTIVATOR
the mobile app itself inherits the personality
DESIGN PERSONA
(A SUBJECT OF EMOTION DESIGN)
Personality Image
Overview
Brand Traits
Personality Map
Voice
Copy Examples
Visual Guidelines
Engagement Methods:
AARRON W...
Personality Image:
Mr T. Cool, rugged, funny.
Overview:
At Tattoochief’s you can rate other’s
tattoos. Becoming a tribe me...
“Another problem with the interpretation of the
brand “personalities” created by
businesses is their obvious bias.
No mark...
PRODUCT PERSONALITY THROUGH
VISUALS + COPY + INTERACTIONS
THE REASON YOU NEED A BEAUTIFUL UI:
AESTHETIC USABILITY EFFECT
A user will perceive an attractive product as easier to use...
Nest
usable, good looking, “alive”
Beats App
uses identity-friendly shapes
and colors for it’s playful
animation.
WHAT TO AVOID
(QUICK EXAMPLES)
avoid bragging (“One software above all”)
avoid bad stock images
(Is this for businessmen with badly cut nails?)
Avoid repulsive personality: carousel images, keyvisuals do count!
Is this the right guy to associate a quality wine store...
Avoid unnatural copy
and artificiality
GOOD EXAMPLES
OkCupid.com
personality example:
Feedback on
interaction relevant
to it’s niche.
louisck.com
personality example:
Just like he would say it anyway.
Mailchimp
personality example:
Mascot’s contextual and cheerful messages.
threadless.com
personality example:
Maybe a little too goofy?
TAKEAWAYS
“Emotional design” should be a part of your UX
and Brand strategy and NOT something you
“put in” your product at...
BOOKS TO READ
THANK YOU!
FOGARASY.COM
HELLO@FOGARASY.COM
DESIGNER
UI PSD
Upcoming SlideShare
Loading in...5
×

Emotion Design - Brand & UI

1,143

Published on

10 minute talk at the Smartmobil 2014.
-----------------------------------------------------
Either a designer plans it or not, each and every app will have some kind of character, a personality that will trigger emotional reactions of it's users.
Emotional Design practices in User Experience and User Interface Design.
-----------------------------------------------------
thomasfogarasy.com

Published in: Design, Technology, Business

Transcript of "Emotion Design - Brand & UI"

  1. 1. Emotion design Brand & UI
  2. 2. a digital agency passionate about brand UX. We help amazing brands transform business through the application of social media, technology and analytics. I’m Tamás, Senior Designer at DESIGNER UI PSD
  3. 3. 1. Emotion Design? 2. Living & Aware Products 3. Brand and Design Personality 4. Examples
  4. 4. EMOTION DESIGN?
  5. 5. Users’ Needs Pyramid suggested by Aaron Walter (UX designer of Mailchimp)
  6. 6. In an emotionally charged event, the amygdala releases dopamine into the system, which greatly aids memory and information processing. EVENT + EMOTION = UNFORGETTABLE Medina, J (2008) Why Emotional Memories Are Unforgettable (May 2008) Psychiatric Times 14-17 http://www.brainrules.net/pdf/JohnMedina_PsychTimes_May08.pdf
  7. 7. LIVING & AWARE
  8. 8. “the love of life or living systems.” ERICH FROMM: /a psychological orientation of being attracted to all that is alive and vital./ Fromm, Erich (1964). The Heart of Man. Harper & Row
  9. 9. BREATHING STATUS LED INDICATOR The status light on the front of Apple laptops and desktops gently pulses to indicate a sleep state.
  10. 10. EXAMPLE: CUTENESS IS A BABY’S FIRST LINE OF DEFENSE. AND FOR SOME APPS TOO. “The biophilia hypothesis suggests that the positive emotional response that adult mammals have toward baby mammals across species helps increase the survival rates of all mammals.” http://en.wikipedia.org/wiki/Biophilia_hypothesis
  11. 11. BRAND PERSONALITY
  12. 12. WHO IS YOUR PRODUCT? Hummer – Arnold Schwarzenegger (big) Toyota – Tom Hanks (reliable) Volvo – George Clooney (safe)
  13. 13. NIKE BRAND PERSONALITY: MOTIVATOR the mobile app itself inherits the personality
  14. 14. DESIGN PERSONA (A SUBJECT OF EMOTION DESIGN)
  15. 15. Personality Image Overview Brand Traits Personality Map Voice Copy Examples Visual Guidelines Engagement Methods: AARRON WALTER’S DESIGN PERSONA TEMPLATE (useful for any design, not just for brands with mascots)
  16. 16. Personality Image: Mr T. Cool, rugged, funny. Overview: At Tattoochief’s you can rate other’s tattoos. Becoming a tribe member (registering) unlocks additional features, like uploading. Brand Traits: Cool, dead on, warrior, funny, tribal, informal, hip Personality Map: Dominant and unfriendly Voice: Tattoochief’s voice is unfriendly, but funny. He speaks to you like a sarge, a mentor. He doesn’t speak english very well. Copy Examples: -You come to my land to rate tattoo, NO? -Search! Fool... Engagement Methods: Random greetings in the header. Tattoochief cares for his tribe (checking on users) Feedback on interactions. TYPICAL PERSONA EXAMPLE
  17. 17. “Another problem with the interpretation of the brand “personalities” created by businesses is their obvious bias. No marketer would want a brand to symbolize the negative or even neutral character traits. This is where the analogy with people shows its lack of realism.” A DESIGN PERSONA SHOULD NEVER BE PERFECT Zurawicki, Leon (2010). Neuromarketing. Springer
  18. 18. PRODUCT PERSONALITY THROUGH VISUALS + COPY + INTERACTIONS
  19. 19. THE REASON YOU NEED A BEAUTIFUL UI: AESTHETIC USABILITY EFFECT A user will perceive an attractive product as easier to use than an ugly one. It doesn’t matter if they are easier to use or not they are perceived as such. • users tolerate faults more • more likely to develop positive feelings • willing to share with friends http://www.sigchi.org/chi95/proceedings/shortppr/mk_bdy.htm
  20. 20. Nest usable, good looking, “alive”
  21. 21. Beats App uses identity-friendly shapes and colors for it’s playful animation.
  22. 22. WHAT TO AVOID (QUICK EXAMPLES)
  23. 23. avoid bragging (“One software above all”) avoid bad stock images (Is this for businessmen with badly cut nails?)
  24. 24. Avoid repulsive personality: carousel images, keyvisuals do count! Is this the right guy to associate a quality wine store with?
  25. 25. Avoid unnatural copy and artificiality
  26. 26. GOOD EXAMPLES
  27. 27. OkCupid.com personality example: Feedback on interaction relevant to it’s niche.
  28. 28. louisck.com personality example: Just like he would say it anyway.
  29. 29. Mailchimp personality example: Mascot’s contextual and cheerful messages.
  30. 30. threadless.com personality example: Maybe a little too goofy?
  31. 31. TAKEAWAYS “Emotional design” should be a part of your UX and Brand strategy and NOT something you “put in” your product at the end. Be more human. Less artificial and less perfect. 1. 2.
  32. 32. BOOKS TO READ
  33. 33. THANK YOU! FOGARASY.COM HELLO@FOGARASY.COM DESIGNER UI PSD
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×