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

1. Emotion design
Brand & UI

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. 1. Emotion Design?
2. Living & Aware Products
3. Brand and Design Personality
4. Examples

4. EMOTION DESIGN?

5. Users’ Needs Pyramid
suggested by Aaron Walter (UX designer of Mailchimp)

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. LIVING & AWARE

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. BREATHING STATUS
LED INDICATOR
The status light on the front of
Apple laptops and desktops
gently pulses to indicate a sleep
state.

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. BRAND PERSONALITY

12. WHO IS YOUR PRODUCT?
Hummer – Arnold Schwarzenegger (big)
Toyota – Tom Hanks (reliable)
Volvo – George Clooney (safe)

13. NIKE BRAND PERSONALITY: MOTIVATOR
the mobile app itself inherits the personality

14. DESIGN PERSONA
(A SUBJECT OF EMOTION DESIGN)

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. 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. “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. PRODUCT PERSONALITY THROUGH
VISUALS + COPY + INTERACTIONS

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. Nest
usable, good looking, “alive”

21. Beats App
uses identity-friendly shapes
and colors for it’s playful
animation.

22. WHAT TO AVOID
(QUICK EXAMPLES)

23. avoid bragging (“One software above all”)
avoid bad stock images
(Is this for businessmen with badly cut nails?)

24. Avoid repulsive personality: carousel images, keyvisuals do count!
Is this the right guy to associate a quality wine store with?

25. Avoid unnatural copy
and artificiality

26. GOOD EXAMPLES

27. OkCupid.com
personality example:
Feedback on
interaction relevant
to it’s niche.

28. louisck.com
personality example:
Just like he would say it anyway.

29. Mailchimp
personality example:
Mascot’s contextual and cheerful messages.

30. threadless.com
personality example:
Maybe a little too goofy?

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. BOOKS TO READ

33. THANK YOU!
FOGARASY.COM
HELLO@FOGARASY.COM
DESIGNER
UI PSD