If your website requires the user to interact with it in some way, as opposed to simply browsing it, messages boxes are important. This applies to most eCommerce websites, as well as many other websites that have different forms or options for the user to choose. But why are they important?
The last thing you want your users to feel is confused. If they get a message on the screen and they think "what do I have to do with this message” or “where do I go now", the message is pointless. The purpose of message boxes should be clear to the user so they have a better understanding of what they are being notified about, and what they have to do next. In other words, they help you to deliver a good user experience on your website.
There are four different types of message boxes that are used by most websites and front-end frameworks. For example, the Twitter bootstrap includes these four message boxes:
· Information
· Error
· Success
· Message (or warning, or warning message)
Information Message Boxes
Information message boxes are usually styled in a light blue color. They also typically feature an "i" icon, signifying information. They should be used when you want to inform the user about something important or relevant to what they are looking at or doing. It can include help information for the user, or tips and advice that can help them to achieve their objective.
Error Message Boxes
Error message boxes are red and usually designated by either an "x" icon or a "-" icon. They are designed to highlight a problem to the user. This usually applies when an operation or a process cannot be completed, or a field cannot be validated in a form. They are designed to be more attention-grabbing than information boxes as they usually mean that the user needs to take a different action.
Success Message Boxes
The success message box is the opposite of the error message box. It tells the user when an action has been successfully completed. For example, submitting a form or completing a checkout process.
It is very similar to an information message. This is because the user is not being asked to take a direct action -- they are simply being given information. The difference is the success message box is displayed as a direct result of a successful user action, whereas an information box can be displayed before the user does anything. Success message boxes are usually green and feature a tick or check icon.
Message or Warning Message Boxes
Warning message boxes are typically used to inform the user of a problem or an issue, much in the same way that an error message box behaves. The difference is that an error message box highlights problems that prevent further progress. Message boxes and warning message boxes highlight problems and issues, but they usually allow the user’s action to take place despite this.
Submitting a form is an example. An error message would be displayed if an invalid email address was entered, preventing the form from being submitted until the problem is corrected or until a proper email is entered. A warning message box, on the other hand, might be displayed when the user enters a correct email address, but one that has not been confirmed. It would say something like: "Please confirm your email to complete your sign up". In this example, the warning message box told the user there is an issue, but it is one that did not prevent the form from being submitted.
All of these message boxes can be created using simple CSS. If they are implemented for the actions described above, your website will be more user-friendly, and users will have a better understanding of the messages that you want to communicate with them.
