A look at “Incorrect password” messages in Apps
UX of handling errors
I am one of those people — I always forget passwords, no matter how many technics I use to remember them. Every time I need to access sites or Apps from a new place there is a lot of stress and self-shaming involved. Seeing the error message each time makes me want to give up all technology at once (or at least the particular App). Any App has an opportunity to make it less frustrating or much worse just with this small “wrong password message”.
I love collecting UX solutions, micro interactions and UX messages that I come across as a user and I’d like to share some of the examples and my thoughts with you.
I look at the “wrong password” messages from several perspectives:
- Are they helpful in knowing what happened
- Are they clear about my next steps
- Are they friendly and comforting
So let’s say, I got the password/email wrong (again!)….
Pop-up notifications
The most common way that I’ve seen so far is to instantly show me a pop-up notification that disables the screen until I react. It gives bad news, so I instantly feel “Oh no!” tension and want to get rid of it really quickly.
There are 3 components in this kind of notification:
- A notification heading
- A notification text
- A confirmation button text
Notification heading
Some headings are just adding stress to the already unpleasant situation:
In the Coursera example, I instantly feel bad seeing that “Sign In Failed” — this wording is like all is lost and there is no hope. Rosetta Stone and Kijiji sound a little better in their headings, but still, highlight that I’ve made an “error” and that add negativity to the situation. Facebook puts the reason for an error in the headings — “incorrect password” and though it is still not positive, at least it shows clearly what happened from the start.
But could headings be more positive or at least neutral? It turned out they can:
In Netflix example, the heading “Sign in” is just stating the process that is happening — and instantly I feel a lot better, at least no judgement here. Instagram is doing an even better job for me with “Forgotten password?” as it suggests the reason for the error in the heading. That’s right, why stop waste time at just stating the error fact when we can move to the solution as soon as possible? Duolingo takes all the responsibility by saying “We couldn’t log you in” in the heading — and that takes the guilt from my shoulders and feels nice. Twitter asks (or even begs if you read this dots with a certain intonation) to “Please try again…” and that makes me feel like they try to emphasize with the fact that I’m having an issue here.
What if we go further and ask if we even need the heading? At the end of the day, we all know what is happening the moment the message comes up. And that is possible too:
LinkedIn doesn’t show any heading — and still, the meaning is all there and for me, without heading it looks more human and less official. Like a message that I would get from a friend.
Notification and button texts
When it comes to the text of the notification, the first common pattern is to just basically repeat the heading again. I’m also noticing how this kind of texts usually put all the responsibility at me by just saying “you” like they are not present in the interaction.
The button text here has no special meaning or call to action — by pressing OK I’m just confirming that I saw this message. So maybe there is no obvious value in having this button?
Sometimes texts resemble human conversations more — they say “Sorry” to empathize with me, they say “we” to let me know that we are together in this. I personally like this format much better as it makes me feel supported. The danger here is to make these texts too long trying to explain all that happened and next steps, so I wouldn’t read the whole text:
The texts here takes all the weight of communicating the next steps too and there is nothing left for the button to do. So buttons again become just a confirmation (in the case of SoundCloud a confusing confirmation as it is “Cancel”) or repeat of what was already said in the text like in Netflix.
The other way is to assign each part of the notification an informational role, for example, the heading states the reason of the issue, the text offers a solution and button(s) indicate to next steps:
In Evernote and Instagram examples, there is no empathy and human communication signs, but there is a clear and actionable structure.
Disappearing pop-up notifications
We noticed that usually confirmation buttons don’t have any real value but require additional action from the user. So the next question would be — what if we get rid of these buttons and let the pop-up disappear automatically?
In Reddit pop-up notification just shows up, with a very short and clear message and disappears — we all know what to do next. I also like the little picture of Reddit mascot as it is a way to show empathy without words and makes me smile. In Air Canada a pop-up with an exclamation point pops up and goes, stating the reason and next step — the same as we see in most pop-ups, but here I don’t need to interact with a button to make it go away. It definitely saves time and nerves.
On-screen messages
Do we actually need pop-ups at all or it is enough to let us know about the error just there, on the same screen?
In these cases, the message is usually very standard and short. The goal becomes to make it visible and stand out and this is when colours, fonts and position step in.
Some prefer messages that don’t jump at us and look like a part of the whole picture. In Starbucks and Spotify examples messages have the same font colour as other text and blend in nicely. The indication that something went wrong is a colour change of other elements: the line becomes red in Starbucks and an email becomes red in Spotify.
Some choose to make sure the message is visible by adding different background and red colour part of the message like Airbnb, by making the whole message red like TripAdvisor or just by making it different colour like Pinterest.
And still, even in this format, there is a possibility to be creative with texts and make the user feel something. Here are 2 opposite examples:
In Amazon I see a red statement in a red frame “There was a problem” — and I am already thinking the worst has happened like somebody hacked my account. In Udemy I get a friendly casual conversation with very human “Oops!” and encouraging “give it another try”. Needless to say in which case I am trying again with more motivation and comfort.
Is there the best solution?
For sure there is no one best solution for all. I’ve shared my personal reactions as a user — but users are different and the company’s brands are different. For some official, clear and to the point message would work best, for some a friendly funny message with an animated character would be a perfect solution. I just think it is helpful to have as many examples as possible to see all the options when creating. And anyway all the ideas should be tested with users — this is the only way to know the way to go.
Thank you so much for reading! And if you have interesting examples of “wrong password” messages please share with me :)
