Published on <a href="https://blog.prototypr.io/best-practices-for-designing-mobile-app-error-states-c065d66086b6?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> inapptics <img alt="" src="https://cdn-images-1.medium.com/max/800/1*qffAL-gzU8EMByk5MLKpdQ.jpeg">
You see error states every time things go wrong in your app. It’s like trying hard to do something but experiencing an epic fail.
<img alt="" src="https://cdn-images-1.medium.com/max/318/0*xPvfH-0etvCdBNl2.gif">
Errors are inevitable not only because “the err is human” but also because there is hardly any software developed so perfectly as to eliminate the chance of them. So, errors occur because users make mistakes while engaging with the user interfaces. Or they happen when the app fails. Causes can be different. But the way you mitigate the effects of an error is vital to the user experience.
Fail to handle the errors well and user frustration is ready! We all know what a frustrated user is going to do. Exactly! They are going to <a href="http://blog.inapptics.com/why-people-delete-app/">abandon the app</a>. On the other hand, well-crafted error states and error messages can turn a moment of failure into a moment of joy.
Let’s now take a look at a few best practices of designing error states for a mobile app.
<h3>Think ahead of time</h3>
It’s better to avoid the injury than to clean the wound later on. So, while designing an app, think about all the in-app interactions that might result in error states. For example, it’s usually difficult to properly fill out a form on the first try. It is hard to do so when the internet connection is bad.
For example, if you are going to ask the user to choose a timeframe with the help of the date picker, then make sure to mark the past dates as unavailable. It doesn’t mean you cannot show them. It rather means that you can indicate them as inactive. You will simply avoid causing frustration to your users. Why make past dates selectable if you are going to show an error message afterward?
<img alt="" src="https://cdn-images-1.medium.com/max/467/1*j67M5s4ZVboem--l1JBKEQ.png">
<h3>Find the right place for the validation message</h3>
Form validations are something to take care of. They are like a conversation with the user. If the validation message is not in the right place, it might lead to confusion. Usually, the best place to put the validation messages in is the context of action. Do not think for long: if you want to inform the user about an error here, then put the error message here, not somewhere else.
To make things clear, by “here” I basically mean at the right-hand side of the input or at least below it.
<img alt="" src="https://cdn-images-1.medium.com/max/660/1*sMIyy37l4Cjn6CBIlC0AoA.png">
Or
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*d4n5qxQejDB4IM2G5cweyQ.png">
<h3>Choose the right color for the error message</h3>
Another important thing to take into account on mobile app error states is the color of the error message. There are two main rules regarding this:
<ol>
<li>The error text should be easy to read (in terms of color)</li>
<li>The error text should be noticeable</li>
</ol>
And there are a few color coding tricks you should be aware of:
<ul>
<li>Red stands for error</li>
<li>Green is for success</li>
<li>Yellow stands for warning</li>
<li>Blue stands for information</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/573/1*srq6m3kUUJ7eaO3y_yQ6Bg.png">
<h3>Make your error message clear enough</h3>
While you can say, “the username you have chosen is not valid,” you can also show ways as for how to fix this problem. Maybe a simple hint to try again is better than this? Think about this.
<h3>Never show dead-end error messages</h3>
Dead-end error messages are no good. They provide no useful information for the users. Just like this one:
<img alt="" src="https://cdn-images-1.medium.com/max/338/1*09P-PmEI7FSJMMFgENlF9w.png">
Instead, try giving the user as much useful information as possible. Also, try to be creative.
<img alt="" src="https://cdn-images-1.medium.com/max/333/1*Jt9CU2hDp7nZokwdENBD4g.jpeg">
And never ever show a raw mobile app error state like this one:
<img alt="" src="https://cdn-images-1.medium.com/max/333/1*Tl24Bu5LANsKOLWBc3PBug.png">
Messages like the one above are scary. Most of the time, app users are not developers, they are not tech-savvy enough to understand the context of such a message. Instead, try to tell your users what’s wrong in human words. Don’t try to look like a creepy robot!
<h3>Final notes</h3>
The best scenario would be not having to show error states at all. It is always a good idea to prevent errors from happening. But when they do occur, a well-thought error handling can teach users how to use the app without panic. With this in mind, now go make your app more joyful to use.
Curious to know what users do in your app? <a href="https://inapptics.com/?utm_source=Prototypr%20footercta&amp;utm_medium=footercta&amp;utm_campaign=Blog_footercta_prototypr">Try Inapptics for free</a> and visually see every actions users do in your app, e.g. where they tap, how they navigate, what they did that caused the crash you can’t reproduce and more.
If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.
Follow Inapptics: <a href="https://medium.com/@inapptics">Medium</a> | <a href="https://twitter.com/inapptics">Twitter</a> | <a href="https://www.facebook.com/inapptics/">Facebook</a>
Originally published at <a href="http://blog.inapptics.com/best-practices-mobile-app-error-states/">blog.inapptics.com</a> on January 29, 2018.
Read Next:
<ul>
<li><a href="http://blog.inapptics.com/mobile-heatmap/">Mobile Heatmap: One of the Best Tools to Visualize User Behavior</a></li>
<li><a href="https://uxplanet.org/how-to-effectively-measure-ux-with-google-heart-framework-4a497631d224">How to Effectively Measure UX with Google HEART Framework</a></li>
<li><a href="https://uxplanet.org/why-is-ux-copywriting-so-important-in-product-design-85826b42d1b4">Why is UX Copywriting so Important in Product Design</a></li>
</ul>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c065d66086b6" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/best-practices-for-designing-mobile-app-error-states-c065d66086b6">Best Practices for Designing Mobile App Error States</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Best Practices for Designing Mobile App Error States

Top Stories