On my last post I wrote on how to debug and log error messages using Zend Framework and Firebug. Today I wanted to write on how to properly display messages and alerts to users.

There are different type of messages you can display to a user in a web application. From the typical validation messages, to a dreadful fatal error in your app.  Here are some rules I tend to follow when alerting the users that they must take an action without causing confusion:

• Use the same massaging system to display all messages
• Stick to 3 different types: warning (yellow),  success (green), and error (red)
• On system error, do not display the system error to the user
• Display informative messages when interface can be confusing

Users tend to adapt to applications, but if you are not consistent with your user interface, users will have a more difficult time associating things. That’s why I suggest you stick to one messaging system (format). This will create a balance in the application and users will be less prone to confusion.

Associating color to different types of actions or messages has been used for decades and not just on the web. The clearest example is traffic lights were you see the common red, yellow and green.
So, why re-invent the wheel and introduce new types of messages with weird color associations. Stick to at least these 3 basic colors, and use them accordingly. For example, if you have a fatal error or you want the user to stop the current action use red. To warn or inform the user then use yellow, and last but not least use green for success messages.

On system error, do not display the system error to the user. This rule should be obvious, but for some reason there are still developers that like to show errors or exceptions that the application throws. Always display a user friendly message. Something along the lines of “Sorry, an unexpected error occurred. Please try again, and if the problem persists please let us know”. Remember to log the error, so you can troubleshoot the problem at a later time if necessary.

My last rule is about guiding the users on how to use your application. When I’m creating a new application, I always have some idea on how the user should use a certain feature within the app. This does not mean they will use it how you thought. So why not train them while the use the application. My suggestion is to display messages that will be helpful, especially in places were the application can be confusing, or you want them to follow some sort of path. Never assume the user will be smart enough to figure out how to use your application!

That being said, I developed jAlert, a plug-in for jQuery that will aid you in displaying messages accordingly to the rules I discussed. Feel free to to use it on any of your projects.