Recommended
More Related Content
Similar to The Anatomy of Error Messages
Similar to The Anatomy of Error Messages (20)
Recently uploaded
Recently uploaded (20)
The Anatomy of Error Messages
- 1. Charlotte Claussen The UX Writer Conference June 9, 2021 Unknown error We can do better than “unknown error” Charlotte Claussen @cphcharli The UX Writer Conference June 2021
- 3. User “Error messages? I never know what it is, so I turn off my computer for a couple of hours.”
- 6. Microsoft ““A common belief is that error messages are the worst user experience and should be avoided at all costs, but it is more accurate to say that user confusion is the worst experience and should be avoided at all costs. Sometimes that cost is a helpful error message.” Source: https://docs.microsoft.com/en-us/windows/win32/uxguide/mess-error
- 7. The anatomy of an error message
- 8. • Problem Clearly state what has happened • Cause • Solution The anatomy of an error message
- 9. Image credit: Unknown author, see for example https://medium.com/@thomasfuchs/how-to-write-an-error-message-883718173322and https://www.expertreviews.co.uk/software/operating-systems/1401617/how-to-clean-install-windows-10-and-create-boot-media/page/0/1
- 11. • Problem Clearly state what has happened • Cause Explain why the problem occurred • Solution The anatomy of an error message
- 12. Saadia Minhas https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4 Image credit: https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4
- 13. Saadia Minhas https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4 Image credit: https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4
- 14. • Problem Clearly state what has happened • Cause Explain why the problem occurred • Solution Provide constructive help The anatomy of an error message
- 18. Charlotte Claussen The UX Writer Conference June 9, 2021 Problem: What happened? Cause: Why did it happen? Solution: What can you do to fix it?
- 19. Best practices
- 20. • Choose the right format Best practices
- 21. Types of error messages • Dialogs for critical information that the user must see or react to • In-line or contextual messages for input errors • Toasts for feedback on success or failure of a user action • Banners for errors that affect the system • Log entries for troubleshooting information for IT professionals • Email or chat messages for notifying IT professionals
- 22. • Choose the right format • Be precise Best practices
- 25. • Choose the right format • Be precise • Write in a way that users can understand Best practices
- 26. Microsoft, https://docs.microsoft.com/en-us/windows/win32/uxguide/mess-error Image credit: https://docs.microsoft.com/en-us/windows/win32/uxguide/mess-error
- 28. • Choose the right format • Be precise • Write in a way that users can understand • Keep it short Best practices
- 31. • Choose the right format • Be precise • Write in a way that users can understand • Keep it short – use progressive disclosure or help links when needed • Don’t blame the users Best practices
- 32. Microsoft, https://docs.microsoft.com/en-us/windows/win32/uxguide/mess-error Image credit: https://docs.microsoft.com/en-us/windows/win32/uxguide/mess-error
- 33. Saadia Minhas https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4 Image credit: https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4
- 34. Saadia Minhas https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4 Image credit: https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4
- 35. • Choose the right format • Be precise • Write in a way that users can understand • Keep it short – use progressive disclosure or help links when needed • Don’t blame the users • Don’t scare people Best practices
- 38. • Choose the right format • Be precise • Write in a way that users can understand • Keep it short – use progressive disclosure or help links when needed • Don’t blame the users • Don’t scare people • Don’t be funny or cute Best practices
- 42. • Choose the right format • Be precise • Write in a way that users can understand • Keep it short • Don’t blame the users • Don’t scare people • Don’t be funny or cute • Make sure it gets noticed Best practices
- 44. Hazel Bolton https://cxl.com/blog/form-accessibility/ Image credit: https://cxl.com/blog/form-accessibility/
- 46. • Choose the right format • Be precise • Write in a way that users can understand • Keep it short • Don’t blame the users • Don’t scare people • Don’t be funny or cute • Make sure it gets noticed • One cause, one message Best practices
- 48. Microsoft, https://docs.microsoft.com/en-us/windows/win32/uxguide/mess-error Image credit: https://docs.microsoft.com/en-us/windows/win32/uxguide/mess-error
- 49. • Choose the right format • Be precise • Write in a way that users can understand • Keep it short • Don’t blame the users • Don’t scare people • Don’t be funny or cute • Make sure it gets noticed • One cause, one message • One user type, one message Best practices
- 52. • Choose the right format • Be precise • Write in a way that users can understand • Keep it short • Don’t blame the users • Don’t scare people • Don’t be funny or cute • Make sure it gets noticed • One cause, one message • One user type, one message • Don’t be stupid Best practices
- 53. David Travis https://www.userfocus.co.uk/articles/errormessages.html Image credit: https://www.userfocus.co.uk/articles/errormessages.html
- 54. David Travis https://www.userfocus.co.uk/articles/errormessages.html Image credit: https://www.userfocus.co.uk/articles/errormessages.html
- 55. David Travis https://www.userfocus.co.uk/articles/errormessages.html Image credit: https://www.userfocus.co.uk/articles/errormessages.html
- 56. Microsoft, https://docs.microsoft.com/en-us/windows/win32/uxguide/mess-error Image credit: https://docs.microsoft.com/en-us/windows/win32/uxguide/mess-error
- 57. Microsoft, https://docs.microsoft.com/en-us/windows/win32/uxguide/mess-error Image credit: https://docs.microsoft.com/en-us/windows/win32/uxguide/mess-error
- 58. Error prevention
- 59. • Show previews of results before users commit • Use confirmation dialogs • Use descriptive microcopy in forms • Validate user input • Add helpful constraints • Support undo • Auto-correct misspellings and wrong formats • Fix issues in the background Error prevention
- 61. • Show previews of results before users commit • Use confirmation dialogs • Use descriptive microcopy in forms • Validate user input • Add helpful constraints • Support undo • Auto-correct misspellings and wrong formats • Fix issues in the background Error prevention
- 63. • Show previews of results before users commit • Use confirmation dialogs • Use descriptive microcopy in forms • Validate user input • Add helpful constraints • Support undo • Auto-correct misspellings and wrong formats • Fix issues in the background Error prevention
- 65. • Show previews of results before users commit • Use confirmation dialogs • Use descriptive microcopy in forms • Validate user input • Add helpful constraints • Support undo • Auto-correct misspellings and wrong formats • Fix issues in the background Error prevention
- 67. • Show previews of results before users commit • Use confirmation dialogs • Use descriptive microcopy in forms • Validate user input • Add helpful constraints • Support undo • Auto-correct misspellings and wrong formats • Fix issues in the background Error prevention
- 69. • Show previews of results before users commit • Use confirmation dialogs • Use descriptive microcopy in forms • Validate user input • Add helpful constraints • Support undo • Auto-correct misspellings and wrong formats • Fix issues in the background Error prevention
- 71. • Show previews of results before users commit • Use confirmation dialogs • Use descriptive microcopy in forms • Validate user input • Add helpful constraints • Support undo • Auto-correct misspellings and wrong formats • Fix issues in the background Error prevention
- 73. • Show previews of results before users commit • Use confirmation dialogs • Use descriptive microcopy in forms • Validate user input • Add helpful constraints • Support undo • Auto-correct misspellings and wrong formats • Fix issues in the background Error prevention
- 75. But what about the unknown error?
- 77. Unknown error An unknown error occurred How do you edit this?
- 79. • Ask! Developers, support people, testers How to get information
- 80. • Ask! Developers, support people, testers • Test the software How to get information
- 81. • Ask! Developers, support people, testers • Test the software • Look at the text strings in the code How to get information
- 82. ‘Unknown error’
- 84. ‘TRANSLATION_DICTIONARY_PARTICIPANT_UPDATE_FAILED’: ‘Failed to update participant translation dictionary’
- 85. ‘PARTICIPANT_TRANSLATION_DICTIONARY_UPDATE_FAILED’: ‘Failed to update participant translation dictionary. The dictionary could not be added/edited/removed for an unknown reason’
- 86. ‘PARTICIPANT_TRANSLATION_DICTIONARY_ADD_FAILED’: ‘Your dictionary could not be added.’ ‘PARTICIPANT_TRANSLATION_DICTIONARY_ADD_FAILED’: ‘Your dictionary could not be edited.’ ‘PARTICIPANT_TRANSLATION_DICTIONARY_ADD_FAILED’: ‘Your dictionary could not be removed.’
- 87. ‘PARTICIPANT_TRANSLATION_DICTIONARY_ADD_FAILED’: ‘Your dictionary could not be added. Refresh the page and try again’ ‘PARTICIPANT_TRANSLATION_DICTIONARY_ADD_FAILED’: ‘Your dictionary could not be edited. Refresh the page and try again’ ‘PARTICIPANT_TRANSLATION_DICTIONARY_ADD_FAILED’: ‘Your dictionary could not be removed. Refresh the page and try again’
- 89. ‘UNKNOWN_ERROR’: ‘An unknown error has occurred. Try to restart your app. If that does not work, contact Support’
- 91. • Ask! Developers, support people, testers • Test the software • Look at the text strings in the code • Ask again • What happens right before the error occurs? • Does the problem affect more than one thing? • Is there a risk of breaking anything or losing data? • What can the user try? How likely is that to work, in percent? How to get information
- 92. Don’t focus on rules, but think about this: • Find ways to predict and prevent problems • Give users the information they need to move on • Keep the users calm Key take-aways
- 97. Thoughts?
- 98. Thank you – keep in touch! @cphcharli https://www.linkedin.com /in/charlottebclaussen/