Display all the errors!

The world of user interfaces is a dreadful one. Trying to account for every possible thing a user can do can be quite tedious, and making your user interface easy to use in all those cases even moreso. The primary thing I see most often, however, is the lack of proper error messages when a user does something wrong. Whenever a user has the potential to do more than one thing wrong at a time, they should be shown all those things they’ve done wrong when they first submit. This seems to be where most developers have trouble. Let me explain.

At the most basic example, we have a hypothetical form which asks a user for an email address and a birth year in order to become a registered unicorn lover. Who wouldn’t fill that out? Anyways, both those fields have very basic validation checks. The emaila ddress checks a basic pattern to look for some name at some domain and the birth year checks to make sure it’s four characters in length (for this example). Now, the user submits the form with some typos: they forgot the period in the domain, which makes the email invalid, and accidentally missed the last number in the year. What happens next?

A bad system will check and see that the email address is invalid and stop processing the form data because the registration can’t be completed. After all, it’s far faster and less resource-intense if you only do one check, see it’s invalid, and stop checking. Ok, good. The user has fixed their email address and submits the form again. BAM! What’s that? Oh, you did this wrong too! Well, gee, thanks for telling me that now. You know, while I was fixing the other thing I could have also fixed that at the same time, but I didn’t know there was anything wrong with it. Thanks for wasting my time.

A good system would have continued the check and looked at the birth year too, seen that it was also invalid, and display both errors at the same time. What’s that? Resources you say? Well, if you think about it, doing that one extra check on the first submission would actually cost you fewer resources. Why? Well, you’re saving an entire page load, man! Allowing the user to fix both of those problems at once, you’re only making them submit the form twice instead of three times, which saves your system one entire page that it doesn’t have to process at all.

              +---------------+---------------+---------------+--------+-------+
              |     Load 1    |     Load 2    |     Load 3    |        |       |
              +-------+-------+-------+-------+-------+-------+ Total  | Page  |
              | Email | Birth | Email | Birth | Email | Birth | Checks | Loads |
+-------------+-------+-------+-------+-------+-------+-------+--------+-------+
| Good System | 0     | 0     | 1     | 1     | x     | x     | 4      | 2     |
+-------------+-------+-------+-------+-------+-------+-------+--------+-------+
| Bad System  | 0     | x     | 1     | 0     | 1     | 1     | 5      | 3     |
+-------------+-------+-------+-------+-------+-------+-------+--------+-------+

Now, what if we were checking a single thing that was a bit more complicated than just being valid? What gets more complicated than a username and password? Tons of websites out there have a zillion different rules that they apply to username and especially password creation to make sure you and make the process literally like pulling teeth. Let’s set up some basic rules for creating a username:

  • Must be at least five (5) characters.
  • May only contain alphanumeric characters, dashes, and underscores.
  • Must begin with an alphanumeric character.

So what if I didn’t see these rules and just type in a username, let’s say “@3r0”? Uh oh… Which error do I display now? They violated all the rules. Well, display all the rules back to them, of course! Don’t leave them sitting in the dark. They obviously didn’t read the criteria that you had hidden off on the page somewhere, so give them a nice big red box that explains it all to them. Why? For the exact same reason I outlined above, that’s why! Likely your first check is going to be that the username needs to be at least five characters long. A quick and easy “is the string length greater than or equal to five” and you’re done. No, you’re not done. If this user just adds another character on because they were told it needed to be at least five characters long, they’re just going to be disappointed when you tell them they still have an invalid username.

So what exactly am I getting at here?

Dsiplay all the errors, all the time!

Just displaying one error at a time is only going to irritate users in the long-run. You should always display all applicable errors to the user so they can fix all of their mistakes at once and hopefully get through your however decent process without pulling out all their hair. No one wants to go into work the next day and have to explain why they no longer have any hair… Don’t be the cause!