Message

A useful communication means which is displayed by words and signals.

In websites and applications, a message play an important role in the development process. It is considered as "feedback" responding to end-users that raises problems and occurrences or gives information/instructions when users do actions. To avoid unclear and incorrect messages, you need to clarify usage of message types and how to display them.

In elcom Platform, messages are grouped into 4 types:

Error
Warning
Information
Confirmation

Each message type has its own style, so it is needed to avoid using an incorrect message type. Also, your message should not contain long content for each message because users often want to scan rather than read so many things.
Message can be displayed as a single one or multiple ones (more than 1 message).

Error message

Informing users about a wrong action that has already occurred.
An effective error message should be brief, relevant, clear and courteous about the followings:

A Problem - Tell which problem has already happened. For example: Your connection is time out.
A Cause - Give reason why it occurred. For example: Your chosen Username already exists.
A Solution - Give a suggestion or instruction to fix it. For example: Please input a valid email format, such as yourname@example.com.

Template

Error
  • Your email address is incorrect. Please input a valid one!
OK

Don'ts in error messages

Blame users - Never use content that accuses users of making an error, this will make users annoyed.

Technical content - Not use technical content whenever possible, such as programming codes. This may make end-users confused when they define the error.

Unknown error - Users will feel your application unreliable if they meet many unknown errors, so try to provide a detailed message about invalid actions.

So many errors - Should avoid a message which reflects so many problems and causes at the same time. An error message should detect one cause.

Warning message

Notifying users of a situation that might cause a problem in the future.
A good warning message should:

Involve risk - Alerts users of something significant. For example: Your laptop battery is low (5%). If you don't plug in soon, it will hibernate in 10 minutes?
Show immediate relevance - Users need to pay attention to the warning immediately. For example: Your account will be blocked after 5 times of incorrect password to prevent hackers!
Be clear and specific - Defines sources of warning, potential occurrences, and what users should do. For example: Your password is not strong enough. It should contain both texts and numbers.

Template

Warning
  • Your account will be blocked after 5 times of incorrect password to prevent hackers!
OK

Don'ts in warning messages

Redundant messages - Do not show unnecessary and unuseful warnings that might annoy users.

Overwarning - Avoid the warning about things which are not significant. Such warnings will make users doubt about security of applications.

Information message

Notifying users of useful and relevant, but not urgent information.
For an information message, users are not required to do actions immediately once receiving such messages. It is considered as a notification that lets users know specific information. For example: Your account has been registered successfully. Please go to your email address to activate your account.
A good information message should be:
Useful - Let users know something new or which has been done successfully.
Optional - Show suggestions (such as version upgrade or new functions) that are not mandatory.
Relevant - Show helpful information that users might not have known.

Template

Information
  • Your registration is completed. Please check your email inbox to activate your account!
OK

Don'ts in information messages

Redundant - Avoids redundant information that users already know.
Unnecessary - Avoids unnecessary content that may make users annoyed.
Immediate - Only suggests performing an action, however it can be ignored.

Confirmation message

Asking if users want to execute an action or not.
A confirmation can be displayed in 2 ways: default browser pop-up or customized popup window. For important changes (for example, deleting a forum that causes all its topics and posts to be lost), the confirmation should be a warning that is displayed in a customized popup rather than browser popup.
A good confirmation message should give the followings:
Obvious result of an action done by the user.
Relevant verification if the user wants to execute the action.
Easy-to-understand question with two or more responses (for example, OK - Cancel, Yes - No).

Template

Confirmation
  • Are you sure to delete this driver and all its data?

Don'ts in confirmation messages

Unnecessary - Avoids unnecessary questions that look like doubt to actions done by the user. For example, "Are you sure to rename the file?"
Annoying - "Funny" confirmations often make users annoyed. For example, there is no change on the form but the user gets the message: "Are you sure to close the form?" when closing.
Redundant - Eliminate redundant notifications for certain actions. For example, the "Delete" confirmation is not needed for actions which can be redone or recovered.

Multiple messages

elcom Platform allows displaying multiple messages at the same time with the order priority: Error - Warning - Information.

Template

Content of the first displayed message type is expanded by default. Each message type can be clicked to show/hide flexibly. The label of each message type is in the format: {Number} Error(s)/Warning(s)/Information. For example: 5 Errors, 2 Warnings, or 1 Information.

Alert
  • 3 Errors
    • - The field "First Name" is required.
    • - The field "Last Name" is required.
    • - Your email address is invalid. Please enter a different address.

    1 Warning
    • - Your password is not strong enough.

    1 Information
    • - Your registration is completed. Please check your email inbox to activate your account!
OK

If there is no problem related to a message type, the corresponding message label is auto-hidden. For example, the Error label is not shown in case of no error.

Alert
  • 1 Warning
    • - Your password is not strong enough.

    1 Information
    • - Your registration is completed. Please check your email inbox to activate your account!
OK

In case there are multiple messages which have the same type:

Alert
  • 3 Errors
    • - The field "First Name" is required.
    • - The field "Last Name" is required.
    • - Your email address is invalid. Please enter a different address.
OK