Usability is so 2010...
“The thinking processesthat guide ourcommercial choices arecomplex andemotional, not logicaland linear.”
Emotional DesignMAKE THE USER SMILE
About meRemy Blaettler«Chief of the System» Engineer Spent some time to study and work abroad Now back with my own comp...
Maslows hierarchy of needs              Self-          actualization             Esteem         Love / Belonging          ...
Users hierarchy of needsMissing            Pleasurable              Usable             Reliable            Functional
Why? Only bad usability leaves a lasting impression Good usability is taken for granted We are looking for the little p...
How? Gameification Simplicity Context Sensitive Humor, Irony Surprising Personal & Personality
How not    R.I.P. Clippy 1997 - 2007
Lets do it
Context SensitiveMorning: Good morning Mister BlättlerLate evening greetingWow, working hard today, Remy?Before a holida...
Give automation apersonality Emails are signed with «Boxed Ice Robot  Llama» at Boxed Ice Don’t do the noreply thing
And be personal Sign e-mails with your name and your e-mail Address the customer with his name Use the appropriate gree...
Error Pages
CopywritingWhich is the most interesting way to describe a4,700-pound chandelier?A. Blinged outB. More brilliant than a st...
Copywriting“The Tooth Fairy is a burglarizing fetishistspecializing in black-market ivory trade, andshe must be stopped. T...
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.      14 ...
The next level:Emotional CRM“Emotional customers are not problematiccustomers. They are customers who care.” Track your c...
Write me remy@supertext.ch @swissghostrider
LinksExamples Little Big DetailsLink Collection http://mem.to/t/g/63Cvwe644Better copywriting http://blog.supertext.ch/...
 Supertext AG The first copywriting and translation agency  on the internet.
Users hierarchy of needsMissing            Pleasurable              Usable             Reliable            Functional
Emotions make the differenceHumans are not rational beings.A human is a walking bag of squishy meat andliquids, awash in c...
Bad emotions are the worst Music Flash intro Full screen New windows Lost passwords during sign-up Errors 
R.I.P. Clippy 1997 - 2007
Feathers
Team PagesGood place to play around a littleIdeas Handwritten signature Automatic daily horoscope Mouse-over pic with s...
Personal not personalized Be personal in e-mails, newsletters and on  your webpage. Personalization is often just anothe...
Greetings and goodbyeBoring Hello RemyIn the morning Good Morning Remy Almost time for lunch?Afternoon We hope you’re ...
Greetings and goodbyeEveningWow, still at work, Remy?Before a holidayInstead of always «Kind regards»Happy Easter!Enjo...
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 d...
Error Pages Avoid them    Plan for all cases, check logs, analytics Use the same design Apologize and calm the user d...
Bills (Supertext Reminder)Hi.I’m the computer at Supertext. During thecleanup of my hard drive, I found the followingopen ...
Risks Emotions are emotions! Some will hate them. Some will love them. Be careful where you use them. If used  properly...
Links Cool 404 Error Pages 404 Best Practices Fab404 Emotional Interface Design Don’t listen to Le Corbusier
You can download thispresentation fromblog.supertext.ch
The end.THANK YOU, THANK YOU!
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011
Upcoming SlideShare
Loading in …5
×

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

2,388 views

Published on

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

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,388
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

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.
  • Emotional Webdesign - How to make the user smile - Frontend Conf Zürich 2011

    1. 1. Usability is so 2010...
    2. 2. “The thinking processesthat guide ourcommercial choices arecomplex andemotional, not logicaland linear.”
    3. 3. Emotional DesignMAKE THE USER SMILE
    4. 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. 5. Maslows hierarchy of needs Self- actualization Esteem Love / Belonging Safety Physiological
    6. 6. Users hierarchy of needsMissing Pleasurable Usable Reliable Functional
    7. 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. 8. How? Gameification Simplicity Context Sensitive Humor, Irony Surprising Personal & Personality
    9. 9. How not R.I.P. Clippy 1997 - 2007
    10. 10. Lets do it
    11. 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. 12. Give automation apersonality Emails are signed with «Boxed Ice Robot Llama» at Boxed Ice Don’t do the noreply thing
    13. 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. 14. Error Pages
    15. 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. 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. 17. Copywriting Pikante Sauce EUR 1.95 Vulkanausbruch auf der Zunge EUR 1.95
    18. 18. Copywriting Nil-Kreuzfahrt, 14 Tage, al inclusive, EUR 699 Liebesurlaub auf Kleopatras Spuren. 14 Tage, all inclusive, EUR 699
    19. 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. 20. Write me remy@supertext.ch @swissghostrider
    21. 21. LinksExamples Little Big DetailsLink Collection http://mem.to/t/g/63Cvwe644Better copywriting http://blog.supertext.ch/2010/01/referat-im- technopark-zurich/
    22. 22.  Supertext AG The first copywriting and translation agency on the internet.
    23. 23. Users hierarchy of needsMissing Pleasurable Usable Reliable Functional
    24. 24. Emotions make the differenceHumans are not rational beings.A human is a walking bag of squishy meat andliquids, awash in chemicals.
    25. 25. Bad emotions are the worst Music Flash intro Full screen New windows Lost passwords during sign-up Errors 
    26. 26. R.I.P. Clippy 1997 - 2007
    27. 27. Feathers
    28. 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. 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. 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. 31. Greetings and goodbyeEveningWow, still at work, Remy?Before a holidayInstead of always «Kind regards»Happy Easter!Enjoy your long weekend!
    32. 32. Error Pages Avoid them   Plan for all cases, check logs, analytics Use the same design
    33. 33. Error Pages Avoid them   Plan for all cases, check logs, analytics Use the same design Apologize and calm the user down
    34. 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. 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. 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. 37. Links Cool 404 Error Pages 404 Best Practices Fab404 Emotional Interface Design Don’t listen to Le Corbusier
    38. 38. You can download thispresentation fromblog.supertext.ch
    39. 39. The end.THANK YOU, THANK YOU!

    ×