Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011

Uploaded on

New version of my presentation from the UX Camp in Berlin. …

New version of my presentation from the UX Camp in Berlin.
Ideas and Examples on how to make your website a little more personal.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • Who’s non german speaking?Sounds like all Germans are already in Switzerland....I’ll do the presentation in English
  • http://www.wefeelfine.orgLooks like Berlin is very happy today. Must be all the UX Camp attendants.
  • Who knows Mail Chimp?Why?What do they do better than Mad Mini?
  • Google iPhone AppDepending on the time, the background gets darker
  • 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»
  • https://akismet.com/signup/#pwyw
  • www.mailchimp.com
  • LegoThe Lego man ist not peeking when you enter the password
  • http://onstartups.com/tabid/3339/bid/13855/6-Simple-Selling-Tips-For-Software-Entrepreneurs.aspx
  • Comming Soon page for a Plumbing Companyhttp://dzineblog.com/2009/04/25-examples-of-cool-coming-soon-pages-part-ii.html
  • http://www.zappos.com/login.doerror
  • 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
  • http://editorialdept.com/Tests/WriterQuiz.phphttp://www.nytimes.com/2011/05/29/business/29groupon.html?pagewanted=4&_r=1
  • ExamplesThere is a treeThere grows a treeA car stands there.A car is parked there.


  • 1. Usability is so 2010...
  • 2. “The thinking processesthat guide ourcommercial choices arecomplex andemotional, not logicaland linear.”
  • 3. Emotional DesignMAKE THE USER SMILE
  • 4. About meRemy Blaettler«Chief of the System» Engineer Spent some time to study and work abroad Now back with my own company Supertext
  • 5. Maslows hierarchy of needs Self- actualization Esteem Love / Belonging Safety Physiological
  • 6. Users hierarchy of needsMissing Pleasurable Usable Reliable Functional
  • 7. Why? Only bad usability leaves a lasting impression Good usability is taken for granted We are looking for the little perky smile No wow effect is needed
  • 8. How? Gameification Simplicity Context Sensitive Humor, Irony Surprising Personal & Personality
  • 9. How not R.I.P. Clippy 1997 - 2007
  • 10. Lets do it
  • 11. Context SensitiveMorning: Good morning Mister BlättlerLate evening greetingWow, working hard today, Remy?Before a holidayHappy Easter!Enjoy your long weekend!
  • 12. Give automation apersonality Emails are signed with «Boxed Ice Robot Llama» at Boxed Ice Don’t do the noreply thing
  • 13. And be personal Sign e-mails with your name and your e-mail Address the customer with his name Use the appropriate greeting (Du/Sie) «Hey Remy» sounds so much better than «Dear Mister Blättler» Make sure this is stored appropriately in your CRM But then people might write back?!
  • 14. Error Pages
  • 15. CopywritingWhich is the most interesting way to describe a4,700-pound chandelier?A. Blinged outB. More brilliant than a studious Christmas treeC. A death trapD. Really big and shiny
  • 16. Copywriting“The Tooth Fairy is a burglarizing fetishistspecializing in black-market ivory trade, andshe must be stopped. Today’s Groupon helpskeep teeth in mouths and out of the hands ofmaniacal, winged phantasms.”
  • 17. Copywriting Pikante Sauce EUR 1.95 Vulkanausbruch auf der Zunge EUR 1.95
  • 18. Copywriting Nil-Kreuzfahrt, 14 Tage, al inclusive, EUR 699 Liebesurlaub auf Kleopatras Spuren. 14 Tage, all inclusive, EUR 699
  • 19. The next level:Emotional CRM“Emotional customers are not problematiccustomers. They are customers who care.” Track your customers emotions  From feedback  Product reviews  Social Networks And ACT upon them!
  • 20. Write me remy@supertext.ch @swissghostrider
  • 21. LinksExamples Little Big DetailsLink Collection http://mem.to/t/g/63Cvwe644Better copywriting http://blog.supertext.ch/2010/01/referat-im- technopark-zurich/
  • 22.  Supertext AG The first copywriting and translation agency on the internet.
  • 23. Users hierarchy of needsMissing Pleasurable Usable Reliable Functional
  • 24. Emotions make the differenceHumans are not rational beings.A human is a walking bag of squishy meat andliquids, awash in chemicals.
  • 25. Bad emotions are the worst Music Flash intro Full screen New windows Lost passwords during sign-up Errors 
  • 26. R.I.P. Clippy 1997 - 2007
  • 27. Feathers
  • 28. Team PagesGood place to play around a littleIdeas Handwritten signature Automatic daily horoscope Mouse-over pic with something funny behind itAvoid: Information that is too personal
  • 29. 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»
  • 30. Greetings and goodbyeBoring Hello RemyIn the morning Good Morning Remy Almost time for lunch?Afternoon We hope you’re on the way home soon?
  • 31. Greetings and goodbyeEveningWow, still at work, Remy?Before a holidayInstead of always «Kind regards»Happy Easter!Enjoy your long weekend!
  • 32. Error Pages Avoid them   Plan for all cases, check logs, analytics Use the same design
  • 33. Error Pages Avoid them   Plan for all cases, check logs, analytics Use the same design Apologize and calm the user down
  • 34. 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
  • 35. Bills (Supertext Reminder)Hi.I’m the computer at Supertext. During thecleanup of my hard drive, I found the followingopen payment:{ Payment Information }Nobody knows about this here yet, please payquickly so it stays that way.
  • 36. 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.
  • 37. Links Cool 404 Error Pages 404 Best Practices Fab404 Emotional Interface Design Don’t listen to Le Corbusier
  • 38. You can download thispresentation fromblog.supertext.ch
  • 39. The end.THANK YOU, THANK YOU!