For many of us, logging into sites or apps is a part of our daily routine. In fact, we probably do it so often that do it’s almost automatic… until something goes wrong: we forget our password, our user name, the email address we signed up with, or even if we ever signed up at all.

Detailed analysis of a major ecommerce sites found that 45% of all customers had multiple registrations in the system, 160 000 people requested their password every day, and 75% of these people never completed the purchase they started once they requested their password.

Log-in is a big deal — big enough that most sites and apps have started exploring new designs solutions for the problem. Here’s where to start, and what to focus on for the good user experience:

Tell Users What’s Wrong

It’s possible that one wrong combination for a username and password could lead to multiple attempts before successful log in… or frustrated enough to quit. Generic responses (like ‘Your email or password doesn’t match’) don’t provide a meaningful feedback for your users and don’t allow them to fix their problem. Users, who are not logged in, read “One of these two fields is wrong but I won’t tell you which one”, and this reduces conversion rates and engagement.

If log in is difficult, the only thing a user will remember is how long it took to figure out what was incorrect.

You should help a user get through a log in task efficiently and effectively. The response should explain what isn’t matching correctly — the password, or the email address.

The stress of forgetting a username/password combo is alleviated on the MailChimp. If a username does not exist, they tell you before you even attempt retype your password. They detect the problem and offer a link to let the user fix it.

Mailchimp login form. Left: username doesn’t exist. Right: password is incorrect.

The Q&A website [Quora](http://www.quora.com/) takes a similar approach. Quora’s log-in form tells you if no account is associated with the email address you have entered, and it gives you the option to create a new account right then and there: ![](/content/images/2016/04/1-SBnezX8Dj2zJUI4Trbcq5Q.png)

Quora lets you know if there are no matching accounts for the email address you have entered.

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).

It’s ultimately up to you whether or not you want to do this. From a usability standpoint, you’ve just helped users figure out which of their emails or countless usernames they used on your account, and can get logged in sooner.

Remind Users They Changed Their Password

Users can get so used to typing in their old password that they can forget they changed it. And when they get an error message, they’re led to believe they’re mistyped the password.

What users need in this case is a reminder that their password was changed. Instead of giving users a wrong error message, tell them how long ago they changed their password. This message should only appear when users type in their old password. If users mistyped a password, the system should display a regular ‘Wrong password’ error message.

For example, if users change their Google account’s password and try to log in using the old password, Google shows a special message: “Your password was changed X days ago”

Google login form

Solve Multiple Log-In Problems

When faced with multiple sign-in options (such as sign-in via Facebook, Twitter or Google+) on a site or app, people might forget which service they used to sign up (or if they used one at all), and thus hesitate or fail to log in. Worse to come, if someone picks the wrong provider, instead of signing in to the service they’re trying to use, they might end up signing up again, thereby creating a second account.

Multiple sign in options

While a site or app can do its best to match accounts from different services, there’s no 100% guarantee whether a Twitter and a Facebook account belong to the same person. So, in order to solve multiple log-in problem you should keep users logged in until they explicitly sign out. *The less people need to log in, the fewer sign-in problems you’ll have.*

Another good solution is remember users when they return. Quora eliminates the need for you to enter a password when re-logging into service. All you need to do to enter the website is click on your profile picture or name on the log-in screen.

Quora’s one-click log-in page.

Again, these solutions have a downside — they work only for people who return to the website using the same browser. If users sign-in using a different browser or computer, this technique won’t help much.

Design a ‘Forgot Your Password?’ Flow

Just as everyone sometimes forgets where they left their wallet or keys, users will forget their password. It’s therefore very important that this situation should be well handled by the login process. Login forms should offer a ‘Forgot Password’ link to reset the password.

Don’t show this link only after the user clicked on the password field or has already entered a wrong password.
Don’t make users reenter their email address on the forgotten password page if they already entered their email address and then used the forgotten password feature.
Don’t send the current or temporary password via email.

The right thing to do is to send a reset password link on the registered email address. Also, make sure the reset password email is delivered as fast as possible (users might be upset when they’ll have to wait to login because the forgotten password email takes tool long to arrive).

Forgot your password flow for Path.com. Image credits: worklogistics

If users can’t access their email then the options at that point will depend on your type of service— it might make sense for you to have some security questions upfront and use those as an access point. In other words, *make it easy if users forget their password.* #Warn Users Before Locking Their Account To prevent brute force attacks user accounts are often temporarily locked out after a number of failed login attempts. This is of course a necessary security measure, but be sure to warn users before their account is to be locked.

Mailchimp warns users after the third attempt that their account will be locked for 30 mins after 9 more unsuccessful login attempts.

Mailchimp warns users about waiting time before next attempt

Conclusion

As these examples illustrate that even the most common interactions on the web and in apps like logging in could benefit from such simple ideas and design improvements. But try not to generalize these solutions too much. Avoid making them patterns for good error handling. Instead, design your user interfaces and interactions to prevent errors.

Thank you!