MOCKUP #1 - TELLING USERS THEY INPUT AN EMAIL/USERNAME WHICH DOES NOT EXIST IN THE DATABASE
This scenario shows a server-side response that the email or username that the user entered does not exist in the database. The count of login attempts left will start at 9, but then decrease by 1 each time user has a failed login attempt. The "Email or Username" input field border should be styled with
This scenario shows a server-side response that the email or username that the user entered does not exist in the database. The count of login attempts left will start at 9, but then decrease by 1 each time user has a failed login attempt. The "Email or Username" input field border should be styled with
style="border-color: #a94442;" in this scenario.NOTES:
- For both Mockups #1 and #2, the technique of telling the user what exactly isn't matching correctly, whether it's the "Email or Username" field or the "Password" field does have some security ramifications. Many sites will tell the user which of the two fields went wrong, such as MailChimp and Quora.
But this technique also has a major downside: it might allow a third part application to know that an particular email, person, name is registered on a site or app. Sometimes UIs need to be made less convenient in order to communicate more clearly to the user or, in this case, to alleviate fears. For example, this solution is not recommended for online banking (security reasons) or services where users might be concern about their membership status (privacy reasons).
We need to decide whether or not we want to do this. From a usability standpoint, we've just helped users figure out which of their emails or countless usernames they used on your account, and can get logged in sooner. - Note: Whatever decision we take on this "failed login attempt" alert design, we also need to revisit the entire forgot password flow and user experience (e.g., having a separate spike ticket).
Log In or Create an Account
MOCKUP #2 - TELLING USERS THEY INPUT IN THE WRONG PASSWORD TIED TO AN EMAIL/USERNAME WHICH EXISTS IN THE DATABASE
This scenario shows a server-side response that the password that the user entered was not correct for the associated email or username. The count of login attempts left will start at 9, but then decrease by 1 each time user has a failed login attempt. The "Password" input field border should be styled with
This scenario shows a server-side response that the password that the user entered was not correct for the associated email or username. The count of login attempts left will start at 9, but then decrease by 1 each time user has a failed login attempt. The "Password" input field border should be styled with
style="border-color: #a94442;" in this scenario.Log In or Create an Account
MOCKUP #3: REMINDING USERS THEY CHANGED THEIR PASSWORD - THE SYSTEM RECOGNIZES THE EMAIL/USERNAME AND KNOWS HOW LONG AGO THE PASSWORD HAS BEEN CHANGED
This scenario shows a server-side response that the password that the user entered was not correct for the associated email or username due to the fact that the password was recently changed. This alert is preferable to show, if possible, for when a user had changed their password within the last 30 days. If such an alert is not technically possible, the more generic Mockup #2 alert could be used. The count of login attempts left will start at 9, but then decrease by 1 each time user has a failed login attempt. The "Password" input field border should be styled with
This scenario shows a server-side response that the password that the user entered was not correct for the associated email or username due to the fact that the password was recently changed. This alert is preferable to show, if possible, for when a user had changed their password within the last 30 days. If such an alert is not technically possible, the more generic Mockup #2 alert could be used. The count of login attempts left will start at 9, but then decrease by 1 each time user has a failed login attempt. The "Password" input field border should be styled with
style="border-color: #a94442;" in this scenario.Log In or Create an Account
MOCKUP #4 - ALERTING THE USER THAT THEY HAVE BEEN LOCKED OUT OF THEIR ACCOUNT DUE TO 10 FAILED LOGIN ATTEMPTS
This scenario shows a server-side response that the user has locked themselves out of their account after 10 failed login attempts (whether that was due to wrong email/username or password entry). After 60 minutes have passed since the 10th failed login attempt, this alert would go away and the login screen would be enabled again. Both the "Email or Username" and "Password" input field borders should be styled with
This scenario shows a server-side response that the user has locked themselves out of their account after 10 failed login attempts (whether that was due to wrong email/username or password entry). After 60 minutes have passed since the 10th failed login attempt, this alert would go away and the login screen would be enabled again. Both the "Email or Username" and "Password" input field borders should be styled with
style="border-color: #a94442;" and the disabled attribute should be added to each of the input fields in this scenario.NOTES:
- Even if the user enters the correct email/username and password combination on the 11th try, this alert should still be shown and the input fields should be disabled.
- All IP traffic should be allowed through, so in that case, this alert should not be shown and the fields should remain enabled.
Log In or Create an Account
For security reasons, you have been locked out of your account due to 10 failed login attempts.
You'll have to wait 60 minutes before trying again.
You'll have to wait 60 minutes before trying again.
MOCKUP #5 - NOT TELLING THE USER WHICH FIELD HAD WRONG ENTRY, BUT STATING THAT THE USER WILL BE LOCKED OUT OF THEIR ACCOUNT AFTER 10 FAILED LOGIN ATTEMPTS
This scenario shows a server-side response that the email/username and password combination is incorrect. The count of login attempts left will start at 9, but then decrease by 1 each time user has a failed login attempt. Both the "Email or Username" and "Password" input field borders should be styled with
This scenario shows a server-side response that the email/username and password combination is incorrect. The count of login attempts left will start at 9, but then decrease by 1 each time user has a failed login attempt. Both the "Email or Username" and "Password" input field borders should be styled with
style="border-color: #a94442;".NOTES:
- This is the most "secure" approach: There's a specific reason some sites do not say which field is "wrong" - If a hacker knows the email/username is present in the database, then they already have a victim and just need to focus on a password. While, with just a warning that something is wrong, the hacker won't even know if the user exists.
Log In or Create an Account
Your email/username or password is incorrect. Please check your login and try again.
For security reasons, after 9 more failed login attempts you'll have to wait 60 minutes before trying again.
For security reasons, after 9 more failed login attempts you'll have to wait 60 minutes before trying again.