How to write Error Message, good and friendly to users.

"The website crashes?"

Have you ever been ... I'm going to press to pay my favorite item. Fill out all credit card information with excitement. But then a message bounced up that "An error" ... a short word That changed the excitement into immediately irritability "Where to miss?" "What to do next?" These questions ran in the head. But the screen has only an answers without an answer Finally, you just sighed and pressed off that face ... If you don't want customers to experience this type of experience on your website or application, this article is "scripture" that will change the Error Message that used to be a "villain" destroys the experience into a "assistant" that impresses customers unbelievably.

Why is the useless error message that is still dialogue?

Many people may think that the error message is just the "small part" of the system, but in truth it is "indicators" that we care about the user's experience (User Experience) how much the Error Message problem that covers and does not help users often caused by these reasons.

1. Written by programmer for programmers: in the world of software development Notification messages are often created for developers to understand the system error, such as "Error Code: 502" or "Null Pointer Exception" which is useful in the development team. But for general users It is no different from an alien language that is more confusing than understanding.

2. Overlooking the importance of UX Writing: Many organizations dedicated to the design (UI) to be beautiful, but forgot that "words" or "text" are all part of the design, no UX Writer or person responsible directly. Causing this part to be unfortunately neglected

3. Hurry until there is no time to pay attention: in the development process that has to compete with the time to write a good error message is often seen as the last "just enough", allowing us to get a prefabricated message that is unconscious and not really designed to help users.

Understanding these causes is the beginning of creating a better experience. And is an important foundation for UX/UI improvements that will help add a lot of conversion to your business.

[Prompt for illustrations: Cartoon showing a programmer is shrugging one shoulder. With a box of "Error: 0xdeadbeef" floating, while the other side is a user who is confused and confused]

Just "error" one word ... can destroy the business more than you think

You may think, "It's just a small notification message." But in reality the impact of the bad Error Message is violent and damaged in many dimensions.

- Conversion Rate Dang: This is the most obvious effect. When users encounter problems (such as not filling in form, paying unsuccessful payment) and does not receive clear advice on how to fix They will immediately give up their intentions. That means the loss of sales and business opportunities in front of the eyes.

- The user lost confidence (Loss of Trust): Websites that communicate do not know about Make the user feel that the system "Unreliable" and "non -professional". They will start to not be sure whether the information is safe or not. And this hesitation that made them choose to use the competitors' service instead

- Increase the burden to the Support team: When the user cannot solve the problem They will flock to contact the customer service team with repeated questions, "Why can't you apply?"

- Break the image of the brand: bad experience Will be remembered and told If the user feels frustrated every time you use it The opportunity for them to come back again is almost zero. Making everything easy to access is therefore important. Which you can learn more from the checklist, making the web easily accessible (Web Accessibility)

Letting the Error Message that is not quality, float in your system. It is no different from the trap that keeps the customers one by one.

[Prompt for illustrations: The image graph shows the Conversion Rate. With the frowning icon of the user at various points of the graph]

Formula (not) secretly writes error messages for lovers: tell the problem + point the solution + use human language

The good news is to change the bad Error Message into a top assistant, not difficult. We have clear principles and can be used immediately. By seizing 3 important hearts: "What happened? Clearly told " , " What do you have to do next? Tell to clear " and " speak in the brand's language " Let's see the details.

• Clear and straightforward (Be Clear, NOT VAGUE): instead of saying that "Incorrect information". Specify that the information "which part" is incorrect, such as "incorrect password" or "This email is in the system."
• Let the solution are not a solution: this is the most important part. Don't just say that it's wrong. But must also tell the solution, such as instead of saying that "The password is too short" to change to "The password must be at least 8 characters."
• Using human language (USE Human Language): Avoid technical vocabulary or error code that users do not understand, such as changing from "SMTP ERROR 5.1.1" to "email, the recipient does not exist. Please check again. "
• Be Polite and Empathetic: Remember that the user is frustrated. The use of a soft language and feels like someone can help reduce tensions, such as "Oops! It seems that the password is not correct. Try again. "
• Put in the correct position (Contextual Placement): Show the error message near the problem point, such as showing it under the incorrect information immediately (Inline Validation) instead of showing together at the top of the form.

A good source of information that designers around the world adhere to the guidelines. Error-Message Guidelines from Nielsen Norman Group and the Communication principles from Material Design , which emphasize the importance of clarity and help to users.

[Prompt for illustrations: beautiful infographic Summary of good Error Message writing formulas, designs in 3 clear parts: 1. Icon icon (tell the problem) 2. (Use human language/brand)]

Examples from the real thing: Change "can't pay" to "almost successful!"

In order to be clearer Let's take a look at one of the E-Commerce application cases that want to improve the Error Message on the payment page.

Case: The user fill in the wrong credit card number.

Old (before):

When the user fills the card number wrong and pressing the button "Confirm payment" the screen will load again and then the red text at the top: "Transaction Failed. Invalid card details."

What is the problem?

• Users do not know what "Invalid Card Details" mean. Card number is wrong? The expiration date? Or CVC wrong?
• The message is far from the filling channel. Causing the user to sweep the eyes of where
• The language looks formal and cold. Did not give a feeling of help

New (After):

The team has improved the experience. When the user fills the information in the card number and pressing to another channel The system will check immediately (Inline Validation) and if wrong There will be a message under that channel: "Oops! Credit card number is incorrect. Try to check again. " With the red frame around That data channel

What is the result?

• Can be fixed immediately: The user immediately knew that the problem was at "Credit card number" and can be fixed before pressing the payment button.
• Reduce confusion: Red frames and adjacent text makes it easy to understand. You don't have to guess random.
• Feel better: Using the word "Oops!" And ending "" Make the text look friendly and reduce the feeling that you "make mistakes"

This small improvement causes the number of users who are not successful payment decreased significantly. And also helps to enhance the positive experience that makes customers feel good about the brand as well These good experiences are important components of Micro Interactions that impress.

[Prompt for illustrations: Compare images of the beforeh, the smartphone on the left, showing an ambiguous and scary Error Message on the right (Afterline value validation that is friendly and clearly indicating the correction]

Checklist ready to use! Resurrect your Error Message to be useful.

Now you want to go back to explore the Error Message on the website or app. Of yourself, right? Try using this simple checklist as a guideline for "Audit" and "improve".

CHECKLIST Writing Error Message:

1. [] Clearly, what happened: The text described the problem directly and the general user immediately understood? (Avoid code or technical vocabulary)
2. [] Tell the solutions that can be done: the next step, the next step for the user can solve the problem by yourself?
3. [] Polite and use the tone of the brand: friendly language Do not blame the user And in line with the brand personality?
4. [] Tighten and get the message: as short as necessary Not prolonged to be annoying?
5. [] Show in the right position: The message is placed near the error point for easy fix?
6. [] Is there an appropriate design: using color or icon to attract attention and communicate the severity of the problem? (Such as red for error, yellow for Warning)

Try bringing this checklist to check every Flow. Important usage, such as applying for membership, login, filling in form, and payment. Investment is effective today. Will help change the annoying stumbling points into an opportunity to build good relationships with users in the long run. And don't forget that the 404 page is an error message that we can design and be useful as well.

[Prompt for illustrations: Large checklist image on the tablet screen With a person's hand ticking in each item Is a picture that looks in the product and inspires]

Questions that people tend to suspect (FAQ) about UX Writing for Error Message.

I have compiled a popular question that was often asked about this. With a clear answer and actually used

Question: Should we put Humor in an error message?

Answer: Depending on the "situation" and "brand personality". For non -serious errors, such as filling in a slight wrong information in an unimportant form. Using a cute or funny message May help reduce tension But for serious errors and high impacts such as failure payment Or the loss of important information "Do not" use funny messages Because it will make the user feel that you don't care about his problems Should use a language that shows more sympathy and serious solutions

Question: Who is the person responsible for writing error messages between Designer, Developer, or PM?

Answer: In the best team It should be the duty of "UX Writer", especially if this position should be a "shared responsibility". Designer will determine the context and experience (such as it should be a pop-up or Inline Text?), Developer will tell all the possible technical conditions, and the most communicating skills in the team (maybe PM or Markter should be written and modified. By adhering to the principles mentioned above

Question: How do we know that the error message written is "good enough"?

Answer: The best way is "Testing with real users" (Usability Testing). Try to have users try to make the Task that will cause the error and notice that they can understand and solve the problem from the message you can write. Reduced or not

[Prompt for illustrations: Image icons, question markers (?) And light bulbs (!) Alternating in a clean pattern pattern. Convey the question-answering questions]

Summary: Change the "stumbling point" to "the point of impressing"

At this point, we would have agreed that Error Message is not just "notification message", but it is an important "conversation" between your system and users. It is an opportunity to change the moment of confusion and irritability. To become a time when the user feels "Oh, understand" and feel that someone is helping beside

Writing a good error message based on the principle "indicates the problem + pointing the solution + using human language" will not only help reduce the rate of the web and increase the success rate, but it is also an important investment in creating. "Trust" and "loyalty" to the brand in the long run as well.

Don't let the small message These destroy all the great experiences you intend to create. It's time to go back to inspect, resurrect and change all your Error Message into a good assistant for users today!

If you need an expert to help design the user's experience (UX) and create text (UI) that is not only beautiful. But can still communicate efficiently and change the user into a customer to consult the Vision X Brain team. We are ready to help upgrade your digital products to the next level.

[Prompt for illustrations: The user's image is satisfied with a satisfactory smile while using the mobile application. With a checkmark appearing on the screen Convey the success and smoothness of use]

‍