Menu Search
Jump to the content X X

How To Design Error States For Mobile Apps

To err is human. Errors occur when people engage with user interfaces. Sometimes, they happen because users make mistakes. Sometimes, they happen because an app fails. Whatever the cause, these errors and how they are handled, have a huge impact on the user experience. Bad error handling paired with useless error messages can fill users with frustration, and can lead to users abandoning your app.

In this article, we’ll examine how the design of apps can be optimized to prevent user errors and how to create effective error messages in cases when errors occur independently of user input. We’ll also see how well-crafted error handling can turn a moment of failure into a moment of delight. Adobe introduced a new design and wireframing app called Experience Design (Adobe XD) that lets you design interactive wireframes and error states. You can download and test Adobe XD1 for free.

Further Reading on SmashingMag: Link

What Is An Error State? Link

An error state is a screen that is shown when things go wrong. It is an example of a situation where the user is getting something other than their desired state. Since errors can occur in surprising combinations, these states can include anything from incompatible user operations (such as invalid data input), to the inability of an app to connect to the server, or even the inablity to process a user request.

errorstate(10)6
Error state screens. Image credit: Material Design7. (Large view8)

Every error, regardless of cause, becomes a point of friction for your users and blocks them from moving forward in their experience. Luckily, well-designed error handling can help reduce that friction.

Prevention Is Better Than Cure Link

If you design apps, you should be familiar with the most common in-app interactions that could lead to the error state (error-prone conditions). For example, it’s usually hard to correctly fill out a form on the first attempt, or it’s impossible to properly sync data if the device has a poor network connection. You should take these cases into account to minimize the possibility of errors. In other words, it’s better to prevent users from making errors in the first place by offering suggestions, utilizing constraints, and being flexible.

For instance, if you’re allowing people to search for a hotel reservation, why make past dates available and display an error if users select dates that are in the past?

errorstate(4)9
Large view10

As shown in the Booking.com example, you can simply use a date selector that allows users to only choose today’s date or dates in the future. This will force users to pick a date range that fits.

Use a date selector that allows users to choose only today's date or dates in the future. This will force users to pick a date range that fits.11
The date picker in the Booking.com app displays a full monthly calendar, but grays out past dates so users can choose proper dates. (Large preview12)

Error Screen For Form Validation Link

A form is a conversation. Like any conversation, it should be represented by a consistent communication between two parties — the user and your app. Validation plays an essential part of this conversation. Form validations are meant to have conversations with users and guide them through the difficult times of errors and uncertainty. When done right, it can turn an ambiguous interaction into a clear one. Generally speaking, there are four important elements that good form validation consists of:

  • Right time of informing about errors (or success)
  • Right place for validation output
  • Right color for the message
  • Clear language for your message

Right Time (Inline Validation) Link

Form validation errors are inevitable and are a natural part of a user’s data input (since user’s input is error-prone). Yes, error-prone conditions should be minimized, but validation errors won’t ever be eliminated. So, the most important question is, “How do you make it easy for the user to recover from form errors?”

Users dislike going through the process of filling out a form, only to find out at submission that they’ve made an error. It’s especially frustrating when you complete a long form and once you’ve pressed submit, you are rewarded with multiple error messages. And it’s even more annoying when it isn’t clear what errors you’ve committed, and where.

It’s especially frustrating when you complete a long form and once you’ve pressed submit you are rewarded with multiple error messages. And it’s even more annoying when it isn’t clear what errors you’ve committed, and where.13
Image credit: Stackexchange14. (Large view15)

Validation should immediately inform users about the correctness of a provided answer right after the user has submitted the data. The primary principle of good form validation is this: “Talk to the users! Tell them what is wrong!” and real-time inline validation immediately informs users about the correctness of provided data. This approach allows users to correct the errors they make faster without having to wait until they press the submit button to see the errors.

However, avoid validating on each keystroke because, in most cases, you simply cannot verify until someone has finished typing their answer. Forms that perform the validation during the data entry punish the users as soon as they start entering the data.

16
Google Forms states the email isn’t valid when you’re not done typing it. (Image credit: Medium242017) (Large preview18)

On the other hand, forms that perform validation after the data entry are not informing the user soon enough that they fixed the error.

Validation in Apple Store is performed after the data entry19
Validation in Apple Store is performed after the data entry. (Image credit: Medium242017) (Large preview21)

Mihael Konjević in his article22 “Inline validation in forms — designing the experience” examined different validation strategies and propose a hybrid validation strategy: reward early, punish late.

The reward early, punish late approach23
Hybrid — reward early, punish late — approach. (Image credit: Medium242017) (Large preview25)

Right Place Link

Proximity is another important tool. When you’re wondering what place to choose for your validation messages, follow this rule of thumb — always put the message in the context of action. If you want to inform the user about an error occurring in a particular field — show it next to the field. Instant validation is best positioned to the right-hand side of the input, or failing that, immediately below.

Communicate form errors in real time26
Communicate form errors in real time. (Image credit: ThinkwithGoogle27( (Large preview28)

Right Color (Intuitive Design) Link

Color is one of the best tools to use when designing validation. Because it works on an instinctual level, adding red to error messages, yellow to warning messages, and green to success messages is incredibly powerful. But, make sure that colors in your digital interface are accessible for your users. It’s a crucial aspect of a well-executed visual design.

Error text should be legible, with a proper color and noticecable contrast
Error text should be legible, with a proper color and noticecable contrast against its background. Image credit: Material Design29

Clear Message Link

A typical error might state, “the email is invalid,” without telling the user why it’s invalid. (Is it a typo? Is it occupied?) Straightforward instructions, or guidelines, make all the difference. There is no guessing for the user who receives this error, and also no confusion or frustration. You can see in the example, the form informs the user that this email is already in use. It then offers some options (either to login or recover my password).

A form saying that this email is already in use and offers some options30
App Errors: Failure To Load Data (Large preview31)

Okay, it’s time to display an error page to indicate that something has gone wrong. As an example, let’s take a situation when connectivity is down and a user is on a screen that is only available online. You should use this opportunity to make people aware that you know what is happening and follow the model of immediate helpfulness — your error message should be a helping hand for your users. That’s why you should never show:

  • A raw error message. Messages which contain an app’s internal error codes or abbreviations such as “an error of type 2 has occurred” are cryptic and scary.
This error message was written by a developer for a developer32
This error message was written by a developer for a developer. (Large preview33)
  • A dead-end error message. Simply because, such error states don’t provide any helpful information for users.
Spotify error screen just states ‘An error occurred’ and doesn’t provide any constructive advice on how to fix the problem.34
Spotify’s35 error screen just states ‘An error occurred’ and doesn’t provide any constructive advice on how to fix the problem. (Large preview36)
  • A vague error message. The error screen in the example below gives users the same amount of information as the previous one. Users won’t have any clue what it means and what to do next.
Buffer has a well-designed error state, but the copy won’t mean much to users.37
Buffer38 has a well-designed error state, but the copy won’t mean much to users. (Image credit: emptystat.es39) (Large preview40)

Don’t scare users with errors. Also, don’t assume people know about the context of a message or assume they are tech-savvy enough to figure things out. Instead, tell people what’s wrong in plain language. To achieve this, you should avoid using technical jargon and express everything in the user’s vocabulary.

Make your error message both readable and helpful — error states must include concise, polite, and instructive copy that clearly states:

  • What went wrong and possibly why.
  • What’s the next step the user should take to fix the error.
Remote app explains why user cannot see anything, and how to solve this.41
Remote app42 explains why a user cannot see anything, and how to solve it. (Large preview43)

Incorporate Imagery And Humor Into Error States Link

Error states are an excellent opportunity to utilize icons and illustrations, because people respond better to visual information than plain text. But, you can go further and incorporate unique imagery that is branded to match your app, yet still be helpful for your users. It’s a good way to both humanize your message and communicate the app’s personality.

A funny Azendoo error message saying Keep Calm and light a fire44
Azendoo45 uses a memorable illustration and humorous copy which encourage users to solve the problem. (Large preview46)

Humor is the spice of life. A bit of humor never hurts and can help diffuse the frustration of an error. You can find plenty of great examples of humorous error messages at Littlebigdetails47. Here are some of my favorites:

  • Basecamp: when there is a form field error, the character on the left makes a surprising facial expression.
48
49
Image credits: Des Traynor50
  • A cheeky error message is displayed when you type too many full-stops when creating a new account in Gmail51.
A cheeky error message is displayed when you type too many full-stops when creating a new account in GMail
Image credit: Simon Souris52

However, be careful with humor because it may not always be appropriate to use in your error message; it really depends on the severity of the error. For instance, humor is good for a simple validation problem such as a “404 Page Not Found” error. But when a user is losing a significant amount of time due to a failure saying “Uh oh!” is entirely inappropriate.

saying Uh-oh is entirely inappropriate.53
(Image credit: Thomas Fuchs54) (Large preview55)

Comprehensive Checklist Of A Perfect Error Page Link

Perfect error pages are a helping hand for your users and should have the following six qualites:

  1. Error messages occur dynamically, just as the problem appears. This immediately informs users about the problem.
  2. Keep all user input safe. Your app shouldn’t undo, destroy, or delete anything entered or uploaded by user in the event of an error.
  3. Speak the same language as the user. It should clearly state what went wrong and possibly why; what’s the next step the user should take to fix the error?
  4. Don’t shock or confuse users. (The message shouldn’t be dramatic).
  5. Don’t hijack control of the system. (If problem isn’t critical, the user should be able to interact with as much of the rest of the app as possible).
  6. Use a little sense of humor to humanize the problem.

404 Not Found Error Link

The main goal of 404 page is to direct your user to the page they were looking for as quickly as possible. Your 404 page should offer a few key links and directions your user can choose between. A safe bet is to have a “Home” link as a primary action on the 404 page — a quick and friendly way to start over. You can also place “Report this Page” to quickly report that the page is broken, but make sure that the primary action (link to the “Home” page) carries a stronger visual weight.

Your 404 page should offer a few key links and directions your user can choose between56
(Image credit: Dribbble57) (Large preview58)

Cannot Login Link

Login screens are usually relatively minimal, with a field for a username and another for a password. But, minimal doesn’t always equal simple. There are many reasons why a user might be stuck on the login screen. The main rule for a login page is very simple – don’t make the user guess.

Let’s propose solutions for the most common problems using examples from MailChimp59, which does a great job with error messaging.

  • User forgets his username. If you detect that the problem is an unknown username, you should offer a link to let the user fix it. Tell users where they can get it (e.g. “check email from us”) or provide a link to the username recovery.
Tell users where they can get the username or password recovery link e.g. check your email60

Users make multiple attempts to log in using an incorrect password. To prevent brute force attacks, user accounts are often temporarily locked after too many failed login attempts. This is a necessary security practice, but be sure to warn users before their account is locked.

Be sure to warn users before their account is to be locked61

Credit Card Rejection Link

Credit card rejection error page can be caused by (1) errors in the data formatting (typo or missing data) or (2) a card can be declined (expired card or fraud). Gabriel Tomescu62 in his article “The anatomy of a credit card form,” suggested the following strategy for both error states:

For the first problem, you should follow standard real-time inline validation practice and visually indicate an error:

Notify the user with a real-time inline error message63
(Image credit: uxdesign64) (Large preview65)

However, when a card is declined by the payment network for some reason, it usually looks like fraud. You need to clear the data entered by the user. Even then, you still need to notify the user what has happened; the error message should be as clear as possible.

Notify the user what just happened, as clear as possible66
(Image credit: uxdesign67) (Large preview68)

Connectivity Is Down Link

Internet access is not ubiquitous, and offline support should be a crucial consideration for nearly every modern app. When connectivity is down, you should try to provide a rich offline experience. Users should be able to interact with as much of the rest of your app as possible. This means the app should have cached content to provide a good offline experience.

Daniel Sauble in his article69 provides perfect insight on how social, mapping, and productivity apps function offline. It’s totally clear why he suggests that it’s better to cache a little of everything than a lot of some things and nothing of others. Because, when a user opens an app, they expect to see content, regardless of whether they’re connected to the internet or not. If the content isn’t there, they’ll get frustrated and switch to a different app which does a better job of caching the information they want to see.

Make sure your app functions offline as well as it possibly can. Here is some practical advise from Robert Woo70 that can be incorporated almost in every app on the market.

Save the last state. Below you can see two apps made for content delivery. The CNN app provides a better user experience by caching the last view and providing users with the headlines for the articles that were last loaded.

CNN app provides a better user experience by caching the last view and providing users with the headlines for the articles that were last loaded.71
(Image credit: rocketfarmstudios72) (Large preview73)

Provide offline functionality and features. There are features on every app that can (and should) work without an internet connection. Let’s take Evernote as an example. The app is entirely functional offline: you can edit existing notes or write a new one, and the app will sync everything up with the cloud once you’re connected again.

Evernote is entirely functional offline — you can edit existing notes or write a new one, and the app will sync everything up with the cloud once you’re connected again
(Image credit: emptystates74) (Large preview75)

Conclusion Link

The best error message is the one that never shows up. It is always better to prevent errors from happening in the first place by guiding users in the right direction ahead of time. But, when errors do arise, well-designed error handling not only helps teach users how to use the app as you intended, but also prevents users from feeling ignorant. Of course, the error state is one of the least-desirable states to design for. However, if you put a lot of effort into this state, your product will be infinitely more enjoyable to use.

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app80 is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app.

You can check out more inspiring projects created with Adobe XD on Behance81, and also visit the Adobe XD blog82 to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free83.

(ms, il, at)

Footnotes Link

  1. 1 http://adobe.ly/2bs2eXP
  2. 2 https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
  3. 3 https://www.smashingmagazine.com/2016/07/how-to-create-icons-adobe-xd/
  4. 4 https://www.smashingmagazine.com/2016/07/quick-ux-prototyping-with-adobe-xd-shortcuts-pdf-cheatsheet/#comments
  5. 5 https://www.smashingmagazine.com/2016/08/prototyping-for-success/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/08/errorstate10-768x628-opt.jpg
  7. 7 http://material.google.com/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/08/errorstate10-768x628-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/08/errorstate4-600x274-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/08/errorstate4-600x274-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image14-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image14-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-24-opt.png
  14. 14 http://ux.stackexchange.com/questions/33108/how-to-best-show-connectivity
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-24-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image20-opt.gif
  17. 17 https://medium.com/wdstack/inline-validation-in-forms-designing-the-experience-123fb34088ce#.fl86493cl
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image20-opt.gif
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image17-opt.gif
  20. 20 https://medium.com/wdstack/inline-validation-in-forms-designing-the-experience-123fb34088ce#.fl86493cl
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image17-opt.gif
  22. 22 https://medium.com/wdstack/inline-validation-in-forms-designing-the-experience-123fb34088ce#.fl86493cl
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image16-opt.gif
  24. 24 https://medium.com/wdstack/inline-validation-in-forms-designing-the-experience-123fb34088ce#.fl86493cl
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image16-opt.gif
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-08-opt.png
  27. 27 http://thinkwithgoogle.com
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-08-opt.png
  29. 29 http://material.google.com
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-06-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-06-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/08/errorstate9-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/08/errorstate9-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/08/errorstate-2-335x675-opt.jpg
  35. 35 https://itunes.apple.com/en/app/spotify-music/id324684580?mt=8
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/08/errorstate-2-335x675-opt.jpg
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/08/errorstate11-opt.png
  38. 38 https://buffer.com/
  39. 39 http://emptystat.es/post/42539678731/buffer-shows-a-nice-error-state-but-the-copy-wont
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/08/errorstate11-opt.png
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-04-opt.jpg
  42. 42 https://itunes.apple.com/en/app/remote/id284417350?mt=8
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-04-opt.jpg
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image15-opt.jpg
  45. 45 https://www.azendoo.com/
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image15-opt.jpg
  47. 47 http://littlebigdetails.com
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image18-opt.png
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image13-opt.png
  50. 50 https://twitter.com/destraynor
  51. 51 http://gmail.com/
  52. 52 http://simonsouris.com/
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-05-opt.png
  54. 54 https://medium.com/@thomasfuchs
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-05-opt.png
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image23-opt.png
  57. 57 https://dribbble.com/
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image23-opt.png
  59. 59 http://mailchimp.com/
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image26-opt.png
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-00-opt.png
  62. 62 https://uxdesign.cc/@gabrieltomescu
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image22-opt.png
  64. 64 https://uxdesign.cc/the-anatomy-of-a-credit-card-payment-form-32ec0e5708bb#.3i8tpzdy7
  65. 65 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image22-opt.png
  66. 66 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image12-opt.png
  67. 67 https://uxdesign.cc/the-anatomy-of-a-credit-card-payment-form-32ec0e5708bb#.53wocu264
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image12-opt.png
  69. 69 https://uxdesign.cc/offline-93c2f8396124#.6xmbytkso
  70. 70 http://www.rocketfarmstudios.com/author/robert/
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image19-opt.png
  72. 72 http://www.rocketfarmstudios.com/blog/4-ways-to-improve-offline-mobile-apps/
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image19-opt.png
  74. 74 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-07-opt.png
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2016/09/error-state-image-07-opt.png
  76. 76 http://designmodo.com/ux-form-validation/
  77. 77 http://alistapart.com/article/inline-validation-in-web-forms
  78. 78 http://baymard.com/blog/adaptive-validation-error-messages
  79. 79 https://medium.com/@thomasfuchs/how-to-write-an-error-message-883718173322#.6rlptz1gj
  80. 80 http://adobe.ly/2bs2eXP
  81. 81 https://www.behance.net/search?content=projects&sort=appreciations&time=week&tools=387566349
  82. 82 https://blogs.adobe.com/creativecloud/design/
  83. 83 http://adobe.ly/2bs2eXP

↑ Back to top Tweet itShare on Facebook

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

  1. 1

    Nice piece, Nick. I especially like the part on form validation; the Web could really benefit from more attention in this area.

    One thing that also worked for me was to use the submit button as a notification point. For example, sometimes when you have a form that is responsive and therefore a little long on a smartphone, you don’t know exactly when something went wrong when you submit the form because the errors are displayed above. So adding an error icon to the submit button, and a small note above it saying “This form has errors. Scroll up for more info”, would probably reduce the friction and improve the user experience.

    It’s a small tweak, but it does look effective. I’ll probably do a small blog post/tutorial about it and send the link over. Cheers.

    14
  2. 2

    Appreciate the article. To deliver a mobile app in which users don’t make any mistakes, ensure that the elements used clearly states what they are meant for. Say the icon is used for entering email it must have an appropriate and familiar icon as well as the text area must contain the example of the format in which we expect users to enter the details.
    I actually liked the example image which is from the source “Des Traynor” where you have a character guiding you through the details.

    -1
  3. 3

    Well written article! Covers all aspects developers and designers ignore.

    -2
  4. 4

    Pierre LEBAILLY

    September 24, 2016 10:55 am

    Very interesting post…I like it, I twitt it…

    0
  5. 5

    You give very good advice except for one: making error text red. I have always had difficulty reading red. It is very frustrating to have the vary text that I must read in detail in order to decide what to do next to be in form that I cannot read or at least read easily. You can make red the border of the field in error or the error text but please, please leave the text black.

    3
  6. 6

    Great artical :)

    0

↑ Back to top