Usability is so 2012...
MAKE THE USER SMILE
Emotional Design
About me
 Remy Blaettler
 Spent 8 years across the ocean
 Then back with my own translation agency
Supertext
 Chief of the System
User's hierarchy of needs
Functional
Usable
Reliable
Pleasurable
Missing
Why?
 Only bad usability leaves a lasting
impression
 Good usability is taken for granted
 We are looking for the «Have you seen
this» effect
Skeuomorphismus
Isn’t flat design bad for emotions?
Lets do it
R.I.P. Clippy 1997 - 2007
Be context sensitive
 Time
 Weather
 Place
 Etc.
Feathers
Greetings and goodbye
Boring
 Hello Remy
In the morning
 Good morning Remy
 Almost time for lunch?
Afternoon
 We hope you’re on the way home soon?
Greetings and goodbye
Evening
 Wow, still at work, Remy?
Before a holiday, instead of «Regards»
 Happy Easter!
 Enjoy your long weekend!
Use humor
Give automation a personality
 Emails are signed with «Boxed Ice Robot
Llama» at Boxed Ice
 Don’t do the noreply thing
Or be personal
 Sign automated emails a name
 Address the customer with his name
 Use the appropriate greeting (Du/Sie)
 Hey Paul
 Dear Mister Smith
 Make sure this is stored appropriately in
your CRM
 But then people might write back?!
Error Pages
Copywriting
Which is the most interesting way to
describe a 4,700-pound chandelier?
A. Blinged out
B. More brilliant than a studious Christmas
tree
C. A death trap
D. Really big and shiny
Copywriting
“The Tooth Fairy is a burglarizing fetishist
specializing in black-market ivory trade, and
she must be stopped. Today’s Groupon
helps keep teeth in mouths and out of the
hands of maniacal, winged phantasms.”
Copywriting
Pikante Sauce
EUR 1.95
Vulkanausbruch auf der Zunge
EUR 1.95
Copywriting
Nil-Kreuzfahrt, 14 Tage,
al inclusive, EUR 699
Liebesurlaub auf Kleopatras Spuren.
14Tage, all inclusive, EUR 699
Bills (Supertext Reminder)
Hi.
I’m the computer at Supertext. During the
cleanup of my hard drive, I found the
following open payment:
{ Payment Information }
Nobody knows about this here yet, please
pay quickly so it stays that way.
Next: Emotional CRM
“Emotional customers are not problematic
customers. They are customers who care.”
 Track your customers emotions
 From feedback
 Product reviews
 Social Networks
 And ACT upon them!
Next: Experience Design
Motion Sensor: Switches on the light, when
you enter the room
Path: No check-in necessary, the app
dectects automatically if a user stays in one
place.
Netflix: Who’s watching the movie? Me, my
wife or my friends? Recommend
Contact
remy@supertext.ch
@swissghostrider
Links
Examples
 Little Big Details
Link Collection
 http://mem.to/t/g/63Cvwe644
Better copywriting
 http://blog.supertext.ch/2010/01/referat-
im-technopark-zurich/
THANK YOU, THANK YOU!
The end.
 SupertextAG
 The first copywriting and translation agency
on the internet.
Emotions make the difference
Humans are not rational beings.
A human is a walking bag of squishy meat
and liquids, awash in chemicals.
Bad emotions are the worst
 Music
 Flash intro
 Full screen
 New windows
 Lost passwords during sign-up
 Errors 
Team Pages
Good place to play around a little
Ideas
 Handwritten signature
 Automatic daily horoscope
 Mouse-over pic with something funny
behind it
Avoid:
 Information that is too personal
Personal not personalized
 Be personal in e-mails, newsletters and on
your webpage.
 Personalization is often just another
feature that clutters the interface
 Du / Sie in German. Track it in your CRM
 «Hi Remy» sounds so much better than
«Dear Mister Blättler»
Error Pages
 Avoid them 
 Plan for all cases, check logs, analytics
 Use the same design
Error Pages
 Avoid them 
 Plan for all cases, check logs, analytics
 Use the same design
 Apologize and calm the user down
Error Pages
 Avoid them 
 Plan for all cases, check logs, analytics
 Use the same design
 Apologize and calm the user down
 Help with the next step / recovery
 Allow for feedback
Risks
 Emotions are emotions!
 Some will hate them. Some will love them.
 Be careful where you use them. If used
properly, they can be a very powerful way
to create an identity and a connection to
your brand.
Links
 Cool 404 Error Pages
 404 Best Practices
 Fab404
 Emotional Interface Design
 Don’t listen to Le Corbusier
You can download this presentation
from
blog.supertext.ch
Set the stage right
Typography
Blackrock
Western Store
Blackrock
Western Store

Emotional Webdesign am Internet Briefing 2013 in Bern

  • 1.
  • 2.
    MAKE THE USERSMILE Emotional Design
  • 3.
    About me  RemyBlaettler  Spent 8 years across the ocean  Then back with my own translation agency Supertext  Chief of the System
  • 5.
    User's hierarchy ofneeds Functional Usable Reliable Pleasurable Missing
  • 6.
    Why?  Only badusability leaves a lasting impression  Good usability is taken for granted  We are looking for the «Have you seen this» effect
  • 7.
  • 8.
  • 9.
  • 10.
    Be context sensitive Time  Weather  Place  Etc.
  • 13.
  • 17.
    Greetings and goodbye Boring Hello Remy In the morning  Good morning Remy  Almost time for lunch? Afternoon  We hope you’re on the way home soon?
  • 18.
    Greetings and goodbye Evening Wow, still at work, Remy? Before a holiday, instead of «Regards»  Happy Easter!  Enjoy your long weekend!
  • 19.
  • 28.
    Give automation apersonality  Emails are signed with «Boxed Ice Robot Llama» at Boxed Ice  Don’t do the noreply thing
  • 29.
    Or be personal Sign automated emails a name  Address the customer with his name  Use the appropriate greeting (Du/Sie)  Hey Paul  Dear Mister Smith  Make sure this is stored appropriately in your CRM  But then people might write back?!
  • 30.
  • 38.
    Copywriting Which is themost interesting way to describe a 4,700-pound chandelier? A. Blinged out B. More brilliant than a studious Christmas tree C. A death trap D. Really big and shiny
  • 39.
    Copywriting “The Tooth Fairyis a burglarizing fetishist specializing in black-market ivory trade, and she must be stopped. Today’s Groupon helps keep teeth in mouths and out of the hands of maniacal, winged phantasms.”
  • 40.
  • 41.
    Copywriting Nil-Kreuzfahrt, 14 Tage, alinclusive, EUR 699 Liebesurlaub auf Kleopatras Spuren. 14Tage, all inclusive, EUR 699
  • 42.
    Bills (Supertext Reminder) Hi. I’mthe computer at Supertext. During the cleanup of my hard drive, I found the following open payment: { Payment Information } Nobody knows about this here yet, please pay quickly so it stays that way.
  • 43.
    Next: Emotional CRM “Emotionalcustomers are not problematic customers. They are customers who care.”  Track your customers emotions  From feedback  Product reviews  Social Networks  And ACT upon them!
  • 44.
    Next: Experience Design MotionSensor: Switches on the light, when you enter the room Path: No check-in necessary, the app dectects automatically if a user stays in one place. Netflix: Who’s watching the movie? Me, my wife or my friends? Recommend
  • 45.
  • 46.
    Links Examples  Little BigDetails Link Collection  http://mem.to/t/g/63Cvwe644 Better copywriting  http://blog.supertext.ch/2010/01/referat- im-technopark-zurich/
  • 47.
    THANK YOU, THANKYOU! The end.
  • 51.
     SupertextAG  Thefirst copywriting and translation agency on the internet.
  • 52.
    Emotions make thedifference Humans are not rational beings. A human is a walking bag of squishy meat and liquids, awash in chemicals.
  • 53.
    Bad emotions arethe worst  Music  Flash intro  Full screen  New windows  Lost passwords during sign-up  Errors 
  • 56.
    Team Pages Good placeto play around a little Ideas  Handwritten signature  Automatic daily horoscope  Mouse-over pic with something funny behind it Avoid:  Information that is too personal
  • 62.
    Personal not personalized Be personal in e-mails, newsletters and on your webpage.  Personalization is often just another feature that clutters the interface  Du / Sie in German. Track it in your CRM  «Hi Remy» sounds so much better than «Dear Mister Blättler»
  • 63.
    Error Pages  Avoidthem   Plan for all cases, check logs, analytics  Use the same design
  • 65.
    Error Pages  Avoidthem   Plan for all cases, check logs, analytics  Use the same design  Apologize and calm the user down
  • 66.
    Error Pages  Avoidthem   Plan for all cases, check logs, analytics  Use the same design  Apologize and calm the user down  Help with the next step / recovery  Allow for feedback
  • 68.
    Risks  Emotions areemotions!  Some will hate them. Some will love them.  Be careful where you use them. If used properly, they can be a very powerful way to create an identity and a connection to your brand.
  • 69.
    Links  Cool 404Error Pages  404 Best Practices  Fab404  Emotional Interface Design  Don’t listen to Le Corbusier
  • 70.
    You can downloadthis presentation from blog.supertext.ch
  • 71.
  • 74.

Editor's Notes

  • #5 http://www.wefeelfine.orgLooks likeSwitzerlandis very happy today.
  • #7 Who knows Mail Chimp?Why?What do they do better than Mad Mini?
  • #12 Google iPhone AppDepending on the time, the background getsdarker.Same withthe Yahoo andthenew Apple Weatherapp.
  • #13 Feedback Form after user got a translationUser says he is not happyWhat is the context?Unhappy userWishes for us to contact him and create a new version.And what do we do?«Thanks for your feedback» ???Not what will calm him down.«Sorry that you are not happy. We will contact you immediately»
  • #18 Example:Ourjoboffermailsdidn’tworkanymore after weautomatedthem.
  • #21 https://akismet.com/signup/#pwyw
  • #22 Adiumhttp://www.adiumxtras.com/
  • #23 www.mailchimp.com
  • #24 LegoThe Lego man ist not peeking when you enter the password
  • #25 Login for a developer communityhttp://dzineblog.com/2009/03/interface-design-inspiration-36-beautiful-login-pageform-designs.html
  • #26 Comming Soon page for a Plumbing Companyhttp://dzineblog.com/2009/04/25-examples-of-cool-coming-soon-pages-part-ii.html
  • #29 http://onstartups.com/tabid/3339/bid/13855/6-Simple-Selling-Tips-For-Software-Entrepreneurs.aspx
  • #33 http://www.zappos.com/login.doerror
  • #39 Who knows Groupon?Why do you think they were successful?There were lots of companies out there doing exactly this for years.They send spam all day long....They say their key to success is good copywriting.Answer is Bhttp://www.nytimes.com/2011/05/29/business/29groupon.html?pagewanted=3&_r=1
  • #40 http://editorialdept.com/Tests/WriterQuiz.phphttp://www.nytimes.com/2011/05/29/business/29groupon.html?pagewanted=4&_r=1
  • #42 ExamplesThere is a treeThere grows a treeA car stands there.A car is parked there.
  • #73 Instead of information and overview, start with the dream.
  • #74 Coffee Brand in Philippines Normally drink coffee during the raining season. Advertisment with people drinking coffee under the roof during rain didn’t work.After reasearch, turns out that the «Rain Sound» was the wrong one.http://www.fastcompany.com/1758288/familiar-microscopic-consumer-insights-yet-to-be-discovered
  • #75 http://blog.sarahlynndesign.com/emotional-web-design/