Improving User Experience: Redesigning Error Messages for Better Clarity and Helpfulness

Some tips and practical examples on how to write better error messages to help the user.

‍

THE PROJECT

Making it easier to understand the errors in the data software. Redesign and reformulation of error messages to help the user with useful hints..

THE STRATEGY

Get an overview of the current state. Search for best practices, tips and revision of error messages. Work and discuss together to get redesigned error messages and more structured and useful messages for users.

WHY YOU SHOULD CARE

B2B platform design: Sorting through all the existing messages and taking them to a new level helps to take UX maturity to the next level and improve the software.

TIME FRAME

Two weeks sprint

ROLE

UX Writer, UX Researcher

‍

The current error messages are not helpful for the user in any way. They are not structured, they all look different. They are quite chaotic. Some can be helpful, others just show an error code without any explanation. Some give tips on how to solve the problem, others just say: "Sorry, there was an error" - here even the dot is missing.

So how can this be done in a structured and user-orientated way? How can you help the user to solve these problems?

‍

A deep insight into the theory: We rarely think about error messages, but errors are everywhere.

My task is to find a way to improve the existing error messages and make it easier for the user to understand the problem.

The first step: search for all error messages to get an overview of what is present in the current implementation. I found a few different messages that are not consistent in any way.

The second step: find a theory on how to write good error messages. An article and a book that were the most interesting for me:

"Designing Better Error Messages UX" published by Vitali Friedmann (22/08/2023).Yifrah, Kinneret (2017): UX Writing & Microcopy.

Here I have briefly summarized what is important when writing error messages in the UX:

We rarely think about error messages, but errors are everywhere. Some very helpful hints while reworking error messages. Some of them are quite obvious, but there are also very interesting tips:

You should never rely on color alone and always complement the error message with an appropriate icon next to the error or in the input field.

Try to guide the user to the solution: The output should be possible when you review the error message.  

To ensure accessibility, it is important to not rely solely on color to convey information. Lastly, provide guidance to the user to help them find a solution.

When writing, avoid sounding like a lawyer. For example, instead of saying 'This field is mandatory, please fill it in', simply state the requirement without any negative connotations. Instead, provide clear and concise instructions. Similarly, avoid using language that implies error or failure, such as 'Error! Please correct this field'.  

Write using general professional vocabulary and avoid technical terms such as validation/verification, legal, error serial number.  

Worst case: Combining technical terms with legal terms and terms of error and failure. For example, instead of saying 'Media ID validation failed', say 'Media ID check unsuccessful'. Validation error: this user does not exist in the system.

‍

Rewrite: Give some examples for helpful error messages

Now the practical part begins - working on the existing messages, writing a theoretical guide for the design system and improving the existing error messages.

It is important to start by putting theory into practice. The heading should always contain a description of the error. This is followed by the reason why the error occurred. And the third part is the suggested solution, which should help the user to rectify the error.

An error message should be clear, practical and as simple as possible. When writing error messages, it is important not to blame the user and instead describe the problem in a service-oriented way. Use a pleasant tone and suggest a solution.

To prevent user frustration and errors, an error message must achieve three goals:

• It should be simple and clear, the user should understand that there is a problem and what the problem is. The red color and the icon show that a problem has occurred. The headline is followed by the reason why the problem has occurred.
• Offer the user a solution. Allow the user to return and complete the process immediately. The third part is the suggested solution to help the user solve the problem.
• It would be best to turn the delay into a positive experience and make it as pleasant as possible for the user.

Ask yourself these four questions:  

• What was the user trying to do when they received the error message?  
• Why did the system react with an error?  
• What actions can the user take to continue and complete the process?  
• If there is no solution, can you offer an alternative action such as contacting the support?

In this way, I have edited the existing texts and tried to make them more eloquent.

Here you can see some bad examples and how they could be rewritten.

‍

‍

‍

Follow these two steps to write the perfect error message:  

• Describe the problem as accurately as possible and give a  
  • I have tried to describe the problem better, briefly but meaningfully.

• constructive suggestion for a solution. If you cannot provide a solution, inform the user how to get help.
  • Sometimes it is not possible to give the user an easy way to solve the problem. Especially in this context of data science, the errors are often not just a missing input field. However, I have tried to point out some ways in which the user can be helped, e.g. by contacting the administrator.

‍

Introduce a new UX text pattern

My next step is to introduce a new UX text pattern into the existing design system. This should help to harmonize all error messages and make them more structured and consistent.

It should include the following:

• Show some good examples - and some bad examples for comparison.
• Provide tips for structuring the messages.
• Guidelines for creation: Especially guidelines for writing error messages - but you should think further: it might also be interesting for success messages, confirmation messages and warnings.
• Explain why it is important - all employees of the company need to understand why they should follow these guidelines.

‍

‍

Sources:

• Friedmann, Vitali (2023): Designing Better Error Messages UX. https://www.linkedin.com/pulse/designing-better-error-messages-ux-vitaly-friedman/?midToken=AQGcHk_W-6a7kg&midSig=0i_ZZKiGzxuGU1&trk=eml-email_series_follow_newsletter_01-newsletter_content_preview-0-title_&trkEmail=eml-email_series_follow_newsletter_01-newsletter_content_preview-0-title_-null-6x48nk~llmfjxz6~s3-null-null&eid=6x48nk-llmfjxz6-s3&otpToken=MTYwNDE2ZTQxMDJjY2JjNmIwMjQwNGVjNGYxY2UwYjU4OWNjZDU0Nzk4YTc4ODYxNzBjMjAyNjc0YjU5NWRmMmZmZDdkZmUxNzZkNmI5Y2I0NDg3ZDEzNTNlZWJmODkyZTIyOTY5ZTNmOGQwNWFlZDExNzBkMSwxLDE%3D (Checked 08.01.2024).  
• Yifrah, Kinneret (2017): UX Writing & Microcopy.

‍

‍