🍞 Design Guidelines For Toast Messages UX. With practical guidelines to keep in mind when designing toasts and snackbars for notifications ↓ ✅ Toasts notify users about updates, change of state, errors. ✅ Often they include an option to undo or cancel a process. ✅ Their purpose is to not interrupt users from their main task. 🤔 Yet they often turn the interface into a race against time. 🤔 They often appear far away from user’s focus of attention. 🤔 They block nav/content, get overlooked on large screens. ✅ English readers read 250–300 words/min, with 5.8ch/word. ✅ Animate fade in at 200–400ms, fade out at 700–1500ms. ✅ Keep the toast visible for at least 2s, but at most 7s. ✅ Show duration = 50ms × [number of characters] (for English). ↳ 10 words → 10 × 5.8ch/word = 58ch × 50ms → 2900ms. ✅ Consider toasts only for passive warnings or updates. ✅ Keep them visible until the user navigates away (or dismisses). ✅ Better: show a prominent message at the top of the page. ✅ Better: show an updating status in a persistent/sticky header. ✅ Better: show update inline, where the action happened. 🚫 Don’t use toasts for actionable decisions or error messages. Personally, I’ve seen toasts performing fairly well to gently remind users about a successful event (e.g. finished uploading) or change of state (e.g. exported). But for them to be effective, they must be noticed at the time when they appear. However, they perform very poorly to communicate errors, especially when they disappear automatically. In fact, toasts have quite a few usability issues: – Users haven’t finished reading them, yet they are gone – Poor discoverability when displayed on corners of the screen – Very distracting when displayed top center of the screen – Usually appear far away from the action a user has taken – Lengthy messages block large areas of content and nav – Not enough space for detailed help, images, videos – They don’t receive focus and are hard to use via keyboard – They do interrupt the work, especially when frequent For critical and severe messaging that users should act upon, you might be better off without a toast message. For passive messaging, toasts *might* work, but don’t rely on people noticing them. At best, keep them persistent and allow users to dismiss them. And for frequent notifications, consider a sticky status bar or display messages next to the action they relate to. Useful resources: The Problem With Toast Messages And What To Do Instead, by Adam Silver https://lnkd.in/e66rzEuh Toasts Are Bad UX, by Maximilian Schmitt https://lnkd.in/ehthmU7e How Long Should A Toast Appear?, Stackoverflow https://lnkd.in/eiQfjqAc Toasts or Snack Bars? Designing Notifications, by Shan Shen https://lnkd.in/eHinUkRd [continues in comments ↓]
Design guidelines for toast messages UX, with an illustration of appearing toasts.
