Curated Resource ( ? )

How To Design Better Error Messages UX.

my notes ( ? )

❌ How To Design Better Error Messages UX. With useful guidelines to rethink, rewrite and redesign error messages to help users recover and succeed ↓

🚫 Not all errors have the same impact, so are error messages.
✅ Catalog errors: system failures, user errors, partial, total.
✅ Grade errors by impact: annoying, enraging, critical.
✅ For annoying errors, explain what happened and add warmth.
✅ For enraging errors, explain and provide clear instructions.
✅ For critical errors, own the problem, apologize and resolve.

✅ UIs must support 2 types of errors: slips and mistakes.
✅ Slips: users try to perform one action but do another.
✅ Mistakes: users don’t understand how the system works.
✅ Fix slips ← constraints, autocomplete, smart presets, good defaults.
✅ Fix mistakes ← examples, confirmations, forgiving formatting.

🚫 Never rely on red color alone — always include an icon.
🚫 Avoid auto-scrolling or sudden jumps: use error summary with links.
🚫 Never cover user’s input and errors when users are fixing errors.
🚫 Avoid technical jargon, 'please', 'sorry', 'valid', 'invalid', 'forbidden'.
✅ In forms, showing errors above input, in tables within the row.
✅ Always allow users to override non-critical error messages.

Error messages are often an afterthought, yet they can make or break the experience when things go south. Spending time and effort on crafting helpful, adaptive error messages is probably one of the best investments a company might make to reduce abandonment and drive conversions.

Audit and study where your error messages are coming from. Build a spreadsheet on why they occur, how they are phrased and how they can be rephrased to be more helpful and impactful. Measure how often errors occur, user’s error recovery rate, completion rates and abandonment.

Once you know where your users fail, start iterating and testing new messaging. Even a minor improvement can be enough to guide people on the right path and boost recovery rates. That’s the impact only few features can deliver.

Useful resources:

How To Write Any Error Message, by Rhiannon Jones

Writing Clearer Error Messages, by Amy Leak

Error Message Stop Words, on

Preventing User Errors: Usability Guidelines, by Page Laubheimer (attached illustration)

The Art of the Error Message, by Marina Posniak

Error-Message Guidelines, by Tim Neusesser

Designing Better Error Messages UX, by yours truly Vitaly Friedman

hashtag#ux hashtag#design hashtag#errors

Activate to view larger image,

Read the Full Post

The above notes were curated from the full post

Related reading

More Stuff I Like

More Stuff tagged error messages , user experience design

Cookies disclaimer saves very few cookies onto your device: we need some to monitor site traffic using Google Analytics, while another protects you from a cross-site request forgeries. Nevertheless, you can disable the usage of cookies by changing the settings of your browser. By browsing our website without changing the browser settings, you grant us permission to store that information on your device. More details in our Privacy Policy.