Day 11 of 100: A Flash Message(Error/Success) UI
Can we do without feedback in this world of ours? Is it yawning due to tiredness or boredom, moving out of the road at the sound of the horn, releasing the t.v remote when Dad with his strikingly frightening countenance enters the sitting room, responding to the ATM machine when prompted to enter a pin code after you have slotted in your card and so many others. Feedback is inevitable and the same can be seen with computers else we won’t be able to do stuff with full confidence and assurance that all is well or that something went wrong.
Preamble
When you copy files, download a movie, login into a social or email site; you see elements pop up, loading screens scream at you, informing your progress whether positive or negative. For the 11th challenge, I was prompted to craft a great flash message that shows when something goes bad (ERROR message) or when something goes right ( SUCCESS message) when a user is interacting with an app or a system.
It’s very easy to proceed or show a success message/feedback than an error message. In life too, we hardly complain or have issues with progress so far the outcome is satisfactory. All we need is just a statement that confirms that.
But this is not the same for ERROR messages, designers need to communicate the error in the best possible way to avoid annoying the users or get them more frustrated.
So what constitutes a great error message?
Nielson and Norman Group summarized that in an article on error messages that:
Established wisdom holds that good error messages are polite, precise, and constructive. The Web brings a few new guidelines: Make error messages clearly visible, reduce the work required to fix the problem, and educate users along the way.
A good error message:
does not blame the user.
* it’s precise.
* suggests how to fix or what to do next after an error
* has no code — always in a human readable format.
* states clearly that something went wrong.
* visible and highly noticed
* should contain a bit of humor ( not a must though)
Sketch sketch sketch
With the principles listed above I started sketching different ways to show success and error messages for different use cases and chose one.
I ended up choosing one for “searching for channels ” on an assumed subscription based video streaming site.
So looking at the design:
Does it blame the user when an error occurs? No
Is the message precise and reassuring? Yes
Suggest how to fix or what to do next? Yes for both, even the error message gave a “skip’ option too. Incase the user is tired of retrying or wants to just proceed.
No code like “404 error, abcx1000231329 error, etc. It’s human readable.
It’s also very visible and highly noticed.
And lastly a bit of fun with the icons. At least will ease off some frustrated people and reassure others during success.
Let’s all see how we can craft human friendly error and success messages when designing softwares for the never changing humans.
Let me know if you enjoyed it by clicking the recommend button and feel free to share your opinion by commenting too. Thanks for reading through once again.
