Successfully reported this slideshow.

Making FAIL More Fun


Published on

How to make error messages less cryptic and more helpful for the end user. From a talk I gave at BarCampBrighton about best practices for handling Error Messages and FAILs more effectively in web applications and software UIs. In addition to making error messages more helpful and insightful, try delighting the user e.g Fail Whale.

Published in: Technology, Design
  • Be the first to comment

Making FAIL More Fun

  1. 1. Error Messages Can Be Fun..<br />1<br />
  2. 2. Make Error Messages Less Painful for the End User!<br />2<br />
  3. 3. 3<br />Turning a bad thing into something delightful! <br />
  4. 4. 4<br />Making FAIL more fun!<br />
  5. 5. Cryptic Error Messages<br />5<br />
  6. 6. 6<br />
  7. 7. 7<br />
  8. 8. 8<br />
  9. 9. 9<br />
  10. 10. Podcast retrieval returns cryptic error message.<br />Post by Numberwang on Fri Jul 24, 2009 7:08 pm<br />Hi, I&apos;ve just recently discovered VLC and are gradually replacing other programs with it. Up until now I&apos;ve been using &apos;Juice&apos; as my podcast receiver but would like to replace it with VLC. However when I try retrieving podcasts on the podcast playlist I get this error message:<br /><br />I have tried several different podcasts. It&apos;s all rather cryptic. Has anyone encountered similar problems?<br />Any help would be great.Numberwang<br />New Cone <br />Posts: 3 Joined: Fri Jul 24, 2009 7:00 pm <br />10<br />
  11. 11. Re: Podcast retrieval returns cryptic error message.<br />PostbyVLC_help on Sat Jul 25, 2009 4:42 pm:<br />Could you tell us one podcast URL you are trying to open?<br />VLC_help<br />Cone Master<br />Posts: 10980Joined: Wed Sep 13, 2006 2:16 pm<br />11<br />
  12. 12. 12<br />Post by Numberwang on Sun Jul 26, 2009 3:06 pm:<br /><br />NumberwangNew Cone <br />Posts: 3 Joined: Fri Jul 24, 2009 7:00 pm <br />
  13. 13. VLC_help wrote: Yep. It doesn&apos;t work correctly. I added a feature request for this. Master<br />Posts: 10980Joined: Wed Sep 13, 2006 2:16 pm<br />Numberwang wrote: Great, thanks. Looking forward to it working in the future.<br />Numberwang<br />New Cone <br />Posts: 3 Joined: Fri Jul 24, 2009 7:00 pm <br />13<br />
  14. 14. Unhelpful Error Messages<br />14<br />
  15. 15. 15<br />
  16. 16. 16<br />
  17. 17. 17<br />Difficult for most users to understand<br />
  18. 18. 18<br /> the impossible error<br />
  19. 19. 19<br />Unhelpful/Cryptic error messages make the user feel stupid.<br />“This is what all error messages feel like to users… No matter how nicely your error messages are worded, this is how they will be interpreted” Alan Cooper<br />
  20. 20. 20<br />Helpful because it offers suggestions but too wordy<br />
  21. 21. Name that error<br />21<br />
  22. 22. 22<br />
  23. 23. 23<br />Apache 404 Error<br />
  24. 24. 24<br />
  25. 25. Google Chrome<br />25<br />
  26. 26. 26<br />
  27. 27. 27<br />Mac OS X Kernel Panic<br />
  28. 28. 28<br />
  29. 29. the 256th level of Pac-Man<br />29<br />
  30. 30. 30<br />
  31. 31. 31<br />iPhone 3G <br />
  32. 32. 32<br />
  33. 33. Commodore AmigaOS<br />33<br />
  34. 34. 34<br />
  35. 35. AmigaOS version 4.0+ <br />35<br />
  36. 36.<br />36<br />
  37. 37.<br />Embrace your computer problems.<br />37<br />
  38. 38. 38<br />
  39. 39. 39<br />
  40. 40. 40<br />
  41. 41. How to write good error messages<br />41<br />
  42. 42. 42<br />Apple’s Interface Guidelines <br /><ul><li> Tell the user what happened
  43. 43. Tell the user how to fix whatever is wrong
  44. 44. Tell the user what happened in their own vocabulary </li></li></ul><li>43<br />Helpful Error Message<br /><ul><li> What’s wrong
  45. 45. Suggests how to fix it</li></li></ul><li>44<br />NetPositiveHaiku<br />
  46. 46. 45<br />Better Still..Practice Poka-yoke - fail-safeing&quot; or &quot;mistake-proofing&quot;.<br />
  47. 47. 46<br />Transmission: Can’t remove the car key when it’s inan unsafe state, when it’s prone to movement. <br />
  48. 48. 47<br />3.5&quot; floppy disks: the top-right corner is shaped in a certain way so that the disk cannot be inserted upside-down.<br />
  49. 49. 48<br />High-security padlocks: it is impossible to remove the key unless it’s closed<br />
  50. 50. 49<br />Microwave ovens: a door switch automatically disconnects the activation button when the door of the oven is opened<br />
  51. 51. 50<br />Poka Yoke in Web Dev and Design <br />Predictive Text Matches against results indicate popularity and the likelihood users will find a relevant result.<br />
  52. 52. 51<br />Immediate feedback or inline messaging prior to form submission – passwords and validation<br />Status and progress bars can reduce user frustration and minimize abandonment in shopping cards<br />Asking users for confirmation before they perform important actions like delete.<br />Visual queues of state changes on the page – inline AJAX confirmations.<br />
  53. 53. Alan Cooper provides these three guidelines:Be PoliteNever forget that an error message box is the program reporting on its failure to do its job, and it is interrupting the user to do this. The error message box must be unfailingly polite. It must never even hint that the user caused this problem, because that is simply not true from the user&apos;s perspective. The customer is always right.<br />52<br />
  54. 54. Be Illuminating
The error message must illuminate the problem for the user. This means it must give them the kind of information they need to make an appropriate determination to solve the program&apos;s problem. It needs to make clear the scope of the problem, what the alternatives are, what the program will do as a default, and what information was lost, if any. The problem should treat this as a confession.<br />53<br />
  55. 55. Be Helpful
It is wrong for the program to just dump the problem on the user&apos;s lap and wipe its hands of the matter. It should directly offer to implement at least one suggested solution right there on the error message box. It should offer buttons that will take care of the problem in various ways. If a printer is missing, the message box should offer options for deferring the printout or selecting another printer. <br />54<br />
  56. 56. 55<br />Be Delightful
Delight the User by making your error or FAIL more fun!<br />
  57. 57. 56<br />
  58. 58. “Rather than being annoyed with GMail, and blaming Chrome,I am completely disarmed by this error. It makes me laugh!” reminds me that the developers working on this software took time to make their error messages not only user friendly, but fun.-a happy user<br />57<br />
  59. 59. 58<br />How might we redesign this to be more user friendly?<br />
  60. 60. 59<br /><ul><li>Humour might not always translate well
  61. 61. Consider who the end user is
  62. 62. Consider the type of message
  63. 63. Don’t want to go from cryptic to patronizing</li></li></ul><li>60<br />Keep it polite, helpful and illuminating<br /><ul><li> Cryptic Errors can be saved for error logs
  64. 64. Be polite and keep users informed so they are not made to feel</li></ul> like they did anything wrong<br /><ul><li> Provide users with an alternative.</li></li></ul><li>61<br />Localization of Error Messages<br />May need to work with native language speakers to devise appropriate messages<br />
  65. 65. 62<br />Making FAIL More Fun<br />
  66. 66. 63<br />
  67. 67. 64<br />
  68. 68. 65<br />
  69. 69. 66<br />
  70. 70. Errors and FAILS don’t have to be sad<br />67<br />
  71. 71. They can be made happier andfriendlieror at least less painful for the end user.<br />68<br />
  72. 72. Dawa Riley<br />Thank you<br />69<br />