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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
Good luck with designing your login screens ✌️