Error Handling on Mobile Devices Showing Alerts

Dialogs, sometimes called alerts on mobile, should be generally used for communicating something important to the user. You may assume that an error in a form qualifies even if that’s the case. Communicating user errors in modal dialogs or alerts is not a good idea for one big reason. The dialog content is not easily accessible. Once you dismiss it, it’s not there anymore and it’s not usually clear how to get it back. Let’s take an example.

On my first launch of a mobile app, I presented with a login wall. I need to create an account or login in order to move on. Login walls are that that’s the subject of another lesson and because of the app violates another one of our guidelines and does not display the password requirements up front. It’s not surprising that on my first try, I get an error that looks like this invalid password. Your password needs to be at least eight characters, including a lowercase letter, an uppercase letter, a number and a special character. The error appears in a dialog that must be dismissed in order to fix the problem. But once I dismiss the dialog, I lose all the information about how the error must be fixed. The error fields are not even highlighted. Even if I can recall that my password was wrong, I may not be able to remember all the different constraints that it had to satisfy. Was it one or two capital letters? Any special characters, especially on mobile, where interruptions are frequent? It’s easy for people to forget even the simplest instruction. If I look away from my screen for one minute, by the time I come back, I may have forgotten even what I was trying to do, to say nothing about which field was wrong and what the password requirements might have been. If users are to follow any instructions contained in the alert, they will need to memorize them. And that goes against one of the ten usability heuristics.

Favor recognition over recall. When you ask people to recall the information, you’re asking them to work harder. The solution is simple. Instead of showing the error in a dialog, simply marked the airfield and showed the error next to it, like in this example, so people can easily refer to it as they’re fixing the problem.

Leave a comment

Your email address will not be published. Required fields are marked *