UX Quick Tip: The proper way of handling notifications

Published in User interface, Learning, Mobile, User experience, WebComments

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.

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). This issue talks about the importance of notifications and their style to let users know what's going on.

The problem

title

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.

See the Pen DHkAx by Kristian Poslek (@bojzi) on CodePen.

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.

See the Pen javts by Kristian Poslek (@bojzi) on CodePen.

Icons help convey the message faster. A check mark (tick) usually means that something was successfully done. Combining colors and icons can even help users who don't speak the language or users with disabilities discern what your app is trying to tell them.

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.

See the Pen nGLjC by Kristian Poslek (@bojzi) on CodePen.

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.


Other articles in this UX article series can be found here:

Want to hire us?
Contact us about our design & engineering services!
Share your thoughts
Greetings from our lovely team!
1/4
Achievement unlocked
Resize Master