UX Quick Tip
The proper way of handling notifications
Whether something goes wrong or just the way you wanted it to, your users will want to know. It’s really bad to show an uninformative message, but if you don’t show a message at all, you can be sure that users will stop using your application.
The problem
What if your car forgot to let you know that your tank is almost empty, or that you turned on the headlights successfully?
Each part of a car’s dashboard is carefully designed and equipped with small icons, lamps and text to let you know at a glance what’s going on with your car at that exact moment. You accelerate, the speedometer lets you know. You pull the handbrake, a little lamp lights up. You pull a lever, and turn signals come to life and let everyone else know that you’re taking a turn.
It’s not just about getting a message across, it’s how you get it across. The turn signal indicator keeps blinking and making a noise (in most cars) to let you know that it should be turned off when you’re done with the turn. But it would be annoying, to say the least, if your headlight indicator would buzz the whole time while turned on.
Lesson 1
Show a message after user interaction
Never, ever omit a message when your users enter, edit or delete data. It doesn’t matter if it’s a plain old contact form or a nifty full-blown web application, you should display a message so that the users know whether their interaction with the application was successful or not.
Lesson 2
Style the message according to type and severity
Messages you show to your users can be of different type and severity.
Usually, you’ll want to differentiate between at least four types of messages:
- Info messages let users know that something happened in the system that wasn’t out of the ordinary or unexpected and usually isn’t tied to user interaction like “Verify your e-mail to unlock all features”.
- Warnings should appear when users are about to do something that is destructive or when the result of an action is unexpected, but isn’t an error.
- Success messages make it obvious to users that their interaction with your application was successful.
- Error messages are used to inform users that something went wrong and help them out.
Severity can be shown with colors. Blue is usually used for info, orange/yellow for warning, green for success and red for alert/error.
Icons help convey the message faster. A check mark (tick) usually means that something was successfully done. Combining color and icons can even help foreign speaking users discern notifications without perfect knowledge of the language.
A great source of icons is Font Awesome located at http://fortawesome.github.io/Font-Awesome/.
Lesson 3
Give enough information
Styled notifications deliver the message, but the extra push comes from having messages that guide users to the solution to a problem they’re having.
A good error message is going to provide users with:
- info that a problem occurred
- the nature of the problem
- ways how to solve the problem.
It’s okay to include a tidbit of technical information (like a short error code) but don’t baffle your users with a message full of programming terms and never show them a stack trace.
The Takeaway
Users want to stay informed while using your web or mobile applications.
Always use the opportunity to show your users well-formed and clear notifications. If needed (e.g. error message notifications), add extra information about the specific nature of a problem and a way to solve it.
Try to keep your notifications simple and straight to the point. Your users will love knowing exactly what is going on and being able to get themselves out of a tight spot.
Quick Tips is a series of short articles featuring knowledge that gets passed around the office daily from seniors to juniors (and sometimes vice versa).
Articles in this UX series:
- Applications should work like elevators
- The proper way of handling notifications (this)
This article can also be found on The Capsized Eight blog.
