What do you think: unclear error messages, or finding the wrong tone in error messages can lead to frustrated customers? Absolutely! If they believe it\u2019s just a waste of time, and you could create a more flawless process, they won\u2019t choose you again.<\/p>\n<\/blockquote>\n\n\n\n
Learn: if a customer gets stuck, it\u2019s not their responsibility. It\u2019s your responsibility because you didn\u2019t explain the next step to the customer properly. The creation of error messages needs time and preparation. However, in the last couple of years, UX designers figured out some core problems and suggestions on how to handle them properly.<\/p>\n\n\n\n
In this article, we will share some tips on how to create helpful error messages, error messages that are concise, accurate, and efficient!<\/p>\n\n\n\n
4+1 tips to create designed error messages<\/h2>\n\n\n\n
In this chapter, we introduce 4+1 tips to you on how to make designed error messages.<\/p>\n\n\n\n
1. Be crystal clear about the problem<\/h3>\n\n\n\n
The following situation is quite natural: the customer – in this case it’s me – needs to fill out some boxes to end the registration process. It\u2019s a very easy registration, I only need to write down my email address, one username, and a password. However, I quickly realize that there is a barrier.<\/p>\n\n\n\n
I can\u2019t figure out a password that accomplishes the site\u2019s rules. You can say that \u201cby just checking the rules first, I can avoid typing the same mistake again, right?\u201d Well, the fact is they don\u2019t write about any rules at all. When I made the same mistake again and again, the error messages were quite unclear: \u201cThe password is not strong enough\u201d. I started to criticize the site after the fifth consecutive try, which was also not strong enough according to them: \u201cWhat would be if you just write down the reason, and I can fix it immediately?\u201d – At this very moment, I stated this rhetorical question.<\/p>\n\n\n\n
I almost exited the whole site, but then had one more clue. What if the password needs to contain one special character, like a question mark, exclamation mark, or something? That was the problem, and after 5 minutes of continuous rage, I could finally get access to the site\u2019s features.<\/p>\n\n\n\n
This example was a good demonstration of unclear error messages. If they would simply write down this: \u201cYou are missing a special character in your password\u201d, I would not have made the mistake again and again.<\/p>\n\n\n\n They don\u2019t have too many rules when you want to create a password there, but still, there is a minimum and a maximum number of letters that you can use. However, if you don’t succeed at these requirements on the first try, they emphasize these rules under the faulty written checkbox in a crystal clear way.<\/p>\n\n\n\n Also, they use the red color to indicate their newly generated text to notify the customer which will hide further information. They also use a red frame to highlight where you need to change based on their instructions. <\/p>\n\n\n\n Most of the time, if there is an error message, websites display it below, or beside the problematic box. But, what if I tell you that in some situations it is not that accurate? <\/p>\n\n\n\n There are many screen resolutions, and it\u2019s just the beginning. People can use your site via their computer, their tablet, or their mobile phone. A 2021 research concluded<\/a> that 55% of online visits come from mobile users, and just only 43% come from desktop users. Yet, we still care less about mobile users!\u00a0<\/p>\n\n\n\n When we place an error message next to the problematic box, mobile users may not see it at first sight. Just think about it: compared to a 1920×1080 screen resolution, they only have a 375×667 resolution. These are huge differences. Of course, you can create a responsive layout, which resizes things to be accurate on mobile devices as well, but these may not handle error messages sometimes. You need other solutions. <\/p>\n<\/blockquote>\n\n\n\n But what if you place the error message under the faulty written checkbox? It must fix the last-mentioned issue, right? Well, it is, but here comes another danger. Browsers offer auto-filling options to you quite often to make your life easier. This is a great opportunity, and I usually take advantage of this feature. But where is this option located in all browsers? Under the checkbox! So a situation can easily occur, when you don\u2019t see the error message, since your auto-filling recommendations. You may not sense that there is a problem, you may think that it\u2019s just a bug that won’t let you go to the next site.<\/p>\n\n\n\n They indicate the problem at the top of the screen. Of course, this version only works if there are no more checkboxes than just a few to connect the error message with the right field accurately. In this case, no matter what device you want to sign in, you always realize the issue. <\/p>\n\n\n\n Who wants to hear long stories in error messages? Customers don\u2019t need educational tales about how to improve their reading or comprehensive text-analyzing skills, instead, they want solutions! Short, but effective solutions!<\/p>\n\n\n\n I\u2019ve got two issues with this error message:<\/strong><\/p>\n\n\n\n Like, it\u2019s just one thing that customers need to read an essay about the accurate solution, but a non-English orientated person will perfectly know the meaning of \u201cdistorted\u201d or, \u201caccess data\u201d?<\/p>\n<\/blockquote>\n\n\n\n \u201cYour data is not correct. Please, write an existing User ID and password, or create a new account HERE.\u201d (when they click on the \u201chere\u201d CTA, the site navigates them to the signup page.)<\/p>\n\n\n\n This would be so much more accurate. But you don\u2019t need to use sentences either. Moreover, sometimes it is more useful to divide the solution into slices and demonstrate which ones the user solved correctly, and which needs to be looked after again. Let\u2019s see this through an example again, with Electronic Art\u2019s solution:<\/p>\n\n\n\n Here, their requirements are noted in four different columns. They also use cross marks, and check marks to highlight those rules that you already accomplished and those that you haven\u2019t accomplished yet. This works so much better than what we saw in the first example. <\/p>\n\n\n\n In this case, when we want to design errors, we refer to making our customers’ tasks more comfortable. It seems a good idea when the error message directly appears near the wrong input field, but there\u2019s one thing you need to avoid at any cost: Putting the error message in front of the wrong input field! <\/p>\n\n\n\n I just politely ask you: how should the user fix the mistake, if the user can\u2019t reach the input field again? Although, sometimes there is a possibility to dismiss the error message, and then you can write down the given solution to the input field, but then what if you forget the instructions? It is a complete mess and a disaster!<\/p>\n<\/blockquote>\n\n\n\n To reach the local university\u2019s WIFI, you need to write down a password. However, this password is created automatically, from your birth date. Like: \u201cif someone was born on October 1, 1970, then his\/her password is 01-OCT-70.\u201d <\/p>\n\n\n\n Some online services are built on the same simple technique: the password is generated automatically from a combination. If you don\u2019t remember the structure of that combination, the website helps you with an error message where they mention something like the previous example. <\/p>\n\n\n\n That\u2019s all great, but there\u2019s a big chance that you won\u2019t recognize the structure at first sight. So, it is better to always fully look at the error message to follow the structure well. <\/p>\n\n\n\n But, there\u2019s some more. The previous example rarely happens nowadays, as website designers try to look at it very carefully. However, situations can happen when not just an error message pops up, but also a tooltip. <\/p>\n\n\n\n Tooltip is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element.<\/p>\n\n\n\n The thing is, even if you care about the good structure of error messages, and input fields, when a tooltip also comes to the picture the whole area can look like a mess.<\/p>\n\n\n\n In this case, you can\u2019t see the error itself, because of the tooltip, but you can\u2019t exit this info bar manually. You need to move your mouse forward, which sometimes really brings the user to the chain of frustrating events. Try to minimize these tooltips, and only use them when there is no other solution. Also, place exit buttons on the tooltips, so if the user reads the tip carefully can finally focus on the actual error message.<\/p>\n\n\n\n Of course, there are obvious things, which cause no argument at all amongst your potential buyers.<\/p>\n\n\n\n We covered these in the first few tips, we think you necessarily implement those to avoid a constant negative feeling in your customers\u2019 brains. But what if I say that there are a bunch of other elements that can depend on which target groups you try to reach?<\/p>\n\n\n\n It differs how you speak with the older generations online or younger ones. Younger generations may solve complex problems more quickly, and more easily understand correlations, as well. While older ones rather need some more instructions, and more time to figure out the \u201cwhy\u201d-s.<\/p>\n\n\n\n Use technical jargon, or not? What color do you use to indicate the problem? Do you need to indicate the problem in other ways rather than the color?<\/p>\n\n\n\n There are infinitive questions that have no rules in terms of error messages. Even if we bring some tips on how to solve these problems, and share some clues that worked in association with our site, there is some possibility that it won\u2019t work in your case. Why? As I already said, you need to tailor your site based on your potential buyer needs, and in some cases designing efficient error messages also relies on your buyers\u2019 comments. <\/p>\n\n\n\n Like, you can\u2019t send questionnaires all the time, just to get access to some raw data. Don\u2019t ask them for favors all the time, since they don\u2019t want to work for you.<\/p>\n\n\n\n They just want to use your site, because your site satisfies their needs the best. If you are unable to generate a good user experience by just your own, they will end up choosing another site; a site that requires less hard work and more pleasure.<\/p>\n\n\n\n The best way in this decade to understand your buyer’s behavior online is available with online behavior analytics sites. These services analyze both qualitative and quantitative data to understand how your buyers behave, and why they behave in that exact way. Traditional website analytics contain heatmap, conversion funnel, and session recording analytics.<\/p>\n\n\n\n![\"Be](\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Be-crystal-clear-about-the-problem-1024x512.png\"){kind=spacer}
<\/figure>\n\n\n\nLet\u2019s see what Netflix is doing: <\/h4>\n\n\n\n
2. Write the designed error message at the top of the screen<\/h3>\n\n\n\n
\n
Now let\u2019s see Amazon\u2019s solution: <\/h4>\n\n\n\n
4. Explain the problem in a few words<\/h3>\n\n\n\n
\n
\n
What if they would try something like this:<\/h4>\n\n\n\n
5. Try not to hide the input field<\/h3>\n\n\n\n
\n
Let us mention another example here: <\/h4>\n\n\n\n
+1. Measure everything<\/h3>\n\n\n\n
![\"want](\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/02\/Copy-of-banner-01-2-1024x325.png\")
<\/a><\/figure>\n\n\n\nBut how can you get access to their thoughts? <\/h4>\n\n\n\n
![\"Capturly](\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Capturly-conversion-funnel.png\")
<\/figure>\n\n\n\n![\"Struggling](\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/02\/banner-01-8-1024x325.png\")
<\/a><\/figure>\n\n\n\n