Designing a user friendly login – UX Collective

To ensure your users experience is seamless from the beginning, you should design your login and register screens to be as intuitive as possible. These screens are generally the first step for a user when experiencing your product.

I’ve dug around the web — specifically looking at some of my favourite products and have analysed the UX choices to show the good, the bad and the ugly.

Separate login from registration

It’s easy to mix up ‘sign in’ and ‘sign up’ considering how similar both phrases are.

From a user’s perspective, it could be easy to select the wrong option and potentially start signing up, when instead they intended to sign in. 
I’d suggest using ‘login’ with ‘sign up’. This slight variation will provide more immediate clarity for your users.

Source: Dropbox. Their terminology uses ‘sign in’ and ‘sign up’ which is too similar.

Allow social media logins

Let’s face it — users can be lazy, I can vouch for this ?

Sometimes you see a long sign up form and you’d rather use your Facebook or Google to sign up instead.

With recent controversy around data sharing on social media sites, you should decide how you want to align your product ethically. However, providing your users with these options will simplify their lives, which will make them much more willing to use your product. Win — win!

Source: Airbnb. They allow users to continue with Facebook & Google.

Allow contextual details for login

When logging in, providing your users with more than an email address can make more contextual sense. As an example mobile numbers are heavily associated with your Uber account, as it is primarily a smartphone app.

Source: Uber

On the flip side, consider allowing more than a ‘username’ or ‘customer #’. If the user doesn’t have auto-fill or a password manager it could be difficult to recall this info.

Source: Godaddy. I’ve struggled with remembering my username and customer # before.

Allow users to show password when logging in

Nothing is more frustrating than spending time filling out a form and getting validation that your password is invalid — attempting to enter it multiple times but still getting the same error message. ?‍

It’s ideal if users can toggle showing their password, so that you can pinpoint where exactly their password is error-ing.

Source: Airbnb. They have a subtle toggle to show password.

Keep users signed in

It makes users lives so much more efficient if you can leave them signed in. This obviously is a security risk, so there must a token time limit implemented to ensure hackers can’t take advantage of this. Adobe allows users to toggle this option.

Source: Adobe. By default I am set to stay signed in.

Warn that Caps Lock is on

Similarly to allowing a toggle to ‘show password’, it saves a user time to present them with immediate validation that they have caps lock on. Overall, they won’t be as frustrated as they will be able to pinpoint their mistake more efficiently.

Source: WordPress.

Present immediate rules and form validation

You might waste some of your users time if you wait until they hit the ‘submit’ button before they are presented with errors. It’s more time effective if they are able to acknowledge what mistakes they have made early on in the process. You can implement this by showing validation on input entry or exit. Airbnb handles form validation in this fashion.

Source: Airbnb. Can you tell I love their UX?

Give security warnings before locking their account

Indicate to your users how many attempts they have before their account is locked — this is especially crucial for websites such as banks etc. as customers then have to call the bank to validate that they are not hacking into their own account. 
WordPress doesn’t address this perfectly — they choose to lock the account before giving a warning. However, they do allow for a retry in 20 minutes.

Source: WordPress

Remember your users when they log back in

It’s a friendly approach to remember your users ? They don’t have to re-enter extra credentials and they might feel more inclined to log in again in future. In this example, Google has remembered my account. I have hidden my email address for privacy reasons.

Source: Google

Indicate password strength requirements

It’s important to encourage your users to have strong passwords, as they are less likely to be hacked. I’ve seen a combination of pure text or visual indicators for password length. Personally, I prefer the visual approach as it’s a quick and simple overview. Atlassian utilises this perfectly.

Source: Atlassian. Indicates from Weak -> Very Strong password

Good luck with designing your login screens ✌️

Author: Ally Eastman

Collect by: