2

This is a follow up to this question asking about what should be displayed when a user enters a wrong password.

Here is my current design: when logging into a website if the user enters a wrong username/password, the page displays beneath the password field "wrong username/password" in red. The conses of the linked to question was to keep the "wrong username/password" message there, which I'm fine with. What I'm concerned about is what will happen if the user enters a wrong password again? I don't want the message to blink and I'm not sure how to show the user that the second password is also wrong and it's not just the page is hanging. If it changes colour I was thinking of changing it to yellow for 0.25 seconds. If this is the approach should the first time the message is displayed the colour is different initially or does the colour only change after the first wrong login?

EDIT: I forgot to mention the password field is cleared if it wrong. I'm not sure if this enough of an indicator though, is it?

Improve this question
8
  • Go for simplicity - nothing beats actually telling the user. Anything fancier is not discoverable or leads to frustration.
    – Deer Hunter
    Commented Apr 30, 2013 at 3:08
  • @DeerHunter so you are recommending an alert window?
    – Celeritas
    Commented Apr 30, 2013 at 3:08
  • 4
    If you clear the password field if only the password is wrong, you have a security problem on your hands - actually you are willingly informing the attacker that he can try another password and that his chosen username is correct.
    – Deer Hunter
    Commented Apr 30, 2013 at 3:10
  • A simple red line of text in the same window will do. After all, most users will not see it, thus you may be overdesigning your site.
    – Deer Hunter
    Commented Apr 30, 2013 at 3:12
  • 1
    Why not simply display a message indicating the number of the attempt. IE "incorrect username / password combination" in combination with a "this will be your n-th attempt to login" near the login/submit button.
    – Marjan Venema
    Commented Apr 30, 2013 at 15:15

4 Answers 4

Reset to default
5

I would not go with a different color since it implies it is not the previous error (wrong password) but a new error this time around.

A couple approaches you can take:

  • Animate the password input field to shake/vibrate when the wrong password is entered (eg: mac login window)
  • Remove the password if it is incorrect and highlight the field and show the error message
  • Reload the page and display the error message
Improve this answer
5
  • 1
    Shake/vibrate was the first thing I thought of. Not so easy to accomplish in a web interface though. An alternative in the same vein would be to remove the original error message, show a "processing" spinner for half a second, then show the error message again. Just something to visually "refresh" the message.
    – Koen Lageveen
    Commented Apr 29, 2013 at 19:21
  • @KoenLageveen Yes, it is a bit tricky to implement the vibrate in web (should not be too far ahead though). The spinner thing is a nice touch for the 2nd point though. Thanks!
    – rk.
    Commented Apr 29, 2013 at 19:33
  • For remove the password, I already do this. Do you really think it's sufficient by itself?
    – Celeritas
    Commented Apr 29, 2013 at 20:20
  • Should be sufficient enough. You can do a small test, get a small sample of representative users and have them test out if the visual que is good enough or not.
    – rk.
    Commented Apr 29, 2013 at 20:23
  • 1
    jQuery UI makes Shake/Bounce easy on a web interface. See: jqueryui.com/effect
    – user1308743
    Commented Apr 30, 2013 at 0:02
3

What I do is I remove the error as soon as the user changes the input to the password field. At that point, the attempted password has changed, so that error message no longer applies to that attempt. It's a new attempt.

Improve this answer
1

Combining red error text with a shake animation should be sufficient, this can be done easily with animate.css. They have already implemented shake with css3 transitions. If you make it shake whenever password is wrong, the user should understand. You could also make the error text slide in (still using animate.css), giving another visual clue that the last action was wrong.

Another less intrusive approach is making the borders of the password input field glow red (or appear red). You don't need to remove the password, but instad focus the text (hinting that the user should delete and try again). When the user removes or edits the wrong password, clear the red border. This will make it appear that the user gets a new try, but if the user misses again the border should once again appear red. The red error text can be displayed through the whole process, but if you write "wrong username/password, try again", the user will be further lead to actually changing the input.

Improve this answer
0

Stack Overflow shows their error messages in some good ways (imagine it may be stack exchange in general). When you don't meet requirements for number of characters changed when editing (or something similar), they put the message in a box below the input field. Then if you still don't meet the requirement on the next submit attempt, it moves it to the side of the input field as a floating box/Tooltip. Theirs also does shake a bit.

The processing spinner I think would be one of the best options. It'd be nice to have for your site in the event of slow server response anyways.
Every time an individual attempts to submit, show a spinner of some kind. While the spinner is going, I'd have the error messages removed from the DOM. If the password, etc is still incorrect, then you show the error message again and hide the spinner.

Improve this answer
2
  • Welcome to UX.SE! Please take a look at the faq and about pages to get a good idea on how to answer questions. I'm not sure what you're referencing in your answer re: don't meet the requirements for number of edits. Can you explain that some more? What's the use-case for a processing spinner with an incorrect password?
    – elemjay19
    Commented Apr 29, 2013 at 20:26
  • 1
    Suppose I could've been more clear on that. When you try to edit someone else's answer, they require that you change at least 6 characters.
    – EnigmaRM
    Commented Apr 29, 2013 at 20:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.