0

We have the following login flow:

Screen 1: A user provides a username and clicks Next button. We do not verify whether a user with a given username exists in our database.

Screen 2: We display a provided username (read only). A user provides a password and clicks Sign in button. If combination of a username and a password is not present in our database we return an message "Invalid username or password", clean up password and autofocus cursor on password field.

This, however, seems wrong to me because:

  • We do not provide immediate way to update a username. A user need to click Back button in the Web browser to come back to Screen 1.
  • Cursor focus after displaying the message is on password field, despite the fact that either username or password might be invalid.

How login flow should be improved to make it more usable?

2 Answers 2

2

I could not see any reason you provided to separate the username from the password form. If you would validate username and password independently, that would make some sense, especially if you noticed a username does not exist and offer a flow of creating a new account.

As it seems you aren't, and you cannot validate username/password independently (and I do understand why), the most obvious course of action is to keep it safe and oldschool, and provide username/password fields on one screen. Should authentication fail, the messaging needs to imply that it's either the username or password that's wrong.

Which field to focus once the error message has been displayed? People mostly mess up passwords, especially if they are hidden behind dots or asterisks, so it would be user-safe to focus that field. If you think the user might have mistyped the password, you can blend in a hide/show toggle for the field which would unscramble the password, allowing the user to double check whether the password entered was the one they wanted. This is common for situations where the user doesn't realise caps lock is turned on, they fumble passwords on mobile, or if they use different keyboards from the one active as language (some keyboard languages switch the position of Y and Z, for instance).

If your username is different from an email address, then you need to provide a mechanism to not only recover an account from the username, but also to type in the email address the user registered from to recover both the username and password.

It is also considered good to not hide the "Forgot password" from the get go, as the initial step might already be a place where the user does not remember their access details. This is a common case if someone accesses the service through an email they received and they cannot recall their initial login/password data. In those cases services sometimes rely on tokens embedded in the link that provide one-time access. Security implications dictate that if a person has access to their email and this particular email arrived, it's likely they are the owner. Security level-wise, this depends on the particular service and whether it's wise to allow such access. Financial services or anywhere where a person's identity can be severely compromised usually don't allow token access.

Hope this helps!

2
  • It's best to clear the login form when any one of the field has error particularly when you are not validating the username field. Then why put focus on password field?
    – Dipak
    Nov 8, 2016 at 18:53
  • If you're designing for the majority of users, it's more likely that the password is wrong. Clearing the username won't give the person a chance to see the username and check whether that one was wrong. Here's why clearing is bad. Scenario 1: User enters username/password, messes up the password accidentally and knows about it, you clear the fields and frustrate the user. Scenario 2: User enters a slightly wrong username and the correct password, and then you clear everything and they think it's the password that's wrong. Some more scenarios, not enough characters left. Nov 9, 2016 at 14:05
1

There is no gain in taking the user to Screen 2 without validating Screen 1; instead, it's an annoying user experience. If I'm not an existing user - ask me to sing-up and create an account first.

I presume you use GMail or Outlook.com

EDIT:

Considering your comment below - I will suggest you go with the titles such as:

Existing user? Login (username and password on same screen)

login form

New user? Signup

Signup form

With these option when the credentials still don't match on Screen 2; ask the use if he has forgotten his username/password, and also give him an option to signup in case of new user.

4
  • For security reasons we cannot disclose whether a user exists without password: security.stackexchange.com/a/40697/50107. So the only solution seems to keep everything on one screen, right?
    – dzieciou
    Nov 8, 2016 at 9:52
  • @dzieciou check the edits
    – Dipak
    Nov 8, 2016 at 10:06
  • In your solution where would you focus user cursor after displaying "Invalid username or password"? On username field or password field?
    – dzieciou
    Nov 8, 2016 at 12:44
  • Nowhere. Just show a link of forgot password or ask the user to signup.
    – Dipak
    Nov 8, 2016 at 13:07

Your Answer

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

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