Effective error messages: Facebook as a UX Case Study
Error messages help people to know the status of the system and help them navigate out of their failed actions.
In this study, I’ll be walking you through my experience with an error message I encountered while I was using the Facebook app.
What’s wrong with it?
You might be wondering, what’s this all about? Why Facebook?
Some weeks ago, I tried logging into my Facebook account. As usual, I was prompted to input my login details (email address/phone number and password) which I did. But while I was inputting my login details, I noticed something. Something very STRANGE! (To me though🙃.)
The short clip below tells you the whole story.
Do you get the gist? Let’s walk through it.
I activated this autofill thingy on my phone that automatically fills in my details for my social media apps. Immediately I was prompted to input my details, autofill did its thing. But for some reasons best known to this autofill thingy, my username was not entered. I didn’t notice this, so I tried to log in and everything in the video happened😶.
“ The greatest mistake is to imagine that we never err — Thomas Carlyle. ”
What happened in the video?
A lot. A lot of things happened. Grab a seat, and let’s do a review together.
1. The error copy
What I did was wrong, I mean who tries to log in to an account without full details? But I don’t deserve this error message. I deserve better.
My approach to writing this copy👇🏼;
Copy: “Phone number or email address is required”
CTA: “Ok” — (if the user didn’t input any details).
There is no need for the word ‘ Parameter ’ or the error code. It is less technical and easier to comprehend that way.
2. What happened to error prevention?😓
The login button is active, even though all the required fields have not been filled. You didn’t notice that? check the image below.
Good UX design is supposed to help users navigate the product (app in this case) seamlessly. I’m not saying Facebook has bad UX but this NN Group article thinks slips (unconscious errors made by users due to lack of attention) can be prevented with good UX design.
I will not be able to log in if the button has been disabled, nor will I have to encounter that 👎🏽error message.
3. Something strange
I noticed that the button is disabled when the email/username input field is active (or selected, as displayed in the image below when I’m typing). But once I deselect it, the button is activated back even though I didn’t input anything in the form field.
I call this STRANGE, what do you call it? (let me know in the comment section).
Done pointing fingers, what is the way out?
The most important takeaway:
The best error message is the one that never shows up.
Errors can’t be prevented 100%. But great error messages can take away users’ dilemmas and help them navigate their way out of slips/errors. This slip could have been easily prevented by disabling the ‘login’ button if all the necessary information is not entered.
I do hope that Facebook (Design at Meta) looks into this. It might look like a minute, unnoticeable, or unnecessary error callout, but, it is what it is — A UX FLAW.
Thanks to Ukpong Godswill, who helped me review this article.
Let me know your thoughts about this study in the comment section below. Peace✌🏼.
