Toast messages are a user-friendly way to provide information and feedback in a non-intrusive manner, allowing users to stay focused on their current task while staying informed about important updates or events.
They are often displayed at the top or bottom of the screen, appearing for a few seconds before automatically disappearing.
We have been consistently using the following pattern across products:
Form has been disabled successfully
Form has been enabled successfully
Form has been enabled successfully
Form archived successfully
Form restored successfully
Form deleted successfully
Form moved to trash successfully
Form has been marked as favorite successfully!
Form published successfully!
Since these messages all pertain to successful actions, we have introduced following best practices.
Best practices
-
Emoji for Valueless Content: If the content of a toast message doesn't add any value, it will now display a simple thumbs-up emoji. This streamlines the user experience and ensures that messages convey information effectively without clutter.
This change offers several advantages:
Space efficiency: The thumbs-up emoji occupies minimal space, ensuring that it doesn't obstruct other on-screen content.
Non-distracting: Using a simple emoji is less distracting for users. It allows them to stay focused on their current task without unnecessary interruption.
Error toast auto-close disabled: Disable the auto-close feature for error toasts. This allows users to take their time to read and understand error messages without the toast disappearing prematurely.
To learn more refer to Toastr documentation.
Do's and Don'ts
🚫 Don'ts
✅ Do's
Reference links
https://github.com/bigbinary/neeto-engineering-ui-ux/issues/41