10 tips for a better login page and process
5 minutes read
You will more than likely use a login page and process pretty much every day. From logging in to your computer, to logging in to your favourite social media site, they are very much a feature of modern day life. However, even though they are so common place it continues to amaze me that there are still so many badly designed login processes and login pages out there. Ensure that your login page doesn’t present an unnecessary obstacle to your users by following these 10 top tips for designing a better login page and process.
1. Make it clear where to login
When users come to a website or app, and already have an account it should be immediately clear where they go to login. Rather than providing a ‘Login’ or ‘Sign in’ link (the term ‘Sign in’ is probably more common place than ‘Login’, but users generally understand either) it’s better to show the input fields, so that users can login directly from a page.
If logging in is necessary to use the website then it should very much be the central feature of the page. Don’t make users hunt around to login like Evernote on their homepage.
2. Differentiate login from registration
On an increasing number of websites the login input fields (email and password) are very similar, if not exactly the same as the registration input fields (email and password). It’s important therefore to clearly differentiate the two, and to minimise the chance of users accidently attempting to login in via the registration form. One way to do this is to get users to input their password twice on registration (always a good idea since passwords are masked on entry), or to only show one form at a time. Certainly don’t do what AxShare does by showing the two side by side. Many a time I’ve accidently attempted to login to the site via the registration form.
3. Allow users to login with an external account (e.g. Facebook)
Why force users to have to remember another set of login details when it’s now so easy to let them login via an external account, such as a Facebook, Google or LinkedIn account? Of course not everyone is likely to be happy doing this, but it’s a great way to let users easily login to your website or app with an account that they use day in, day out.
4. Use email address, rather than username
This is a particular usability frustration of mine – namely websites asking users to login with a username, rather than their email address. I have two main emails addresses (my personal and work addresses), but many, many different usernames for various websites. Since usernames have to be unique, invariably a preferred username has been taken, so users end up registering with a new username that they are never going to remember. If your site or app does use usernames then like Twitter, at least allow users the option to login with their email address.
5. Let users see their password (if they want to)
A common problem when users attempt to login is mis-typing their password. This is all too easy to do as the password field is of course masked. A useful feature is to allow users to see the password they have entered (if they want to) by providing a show password checkbox. This checkbox should of course be unchecked by default (i.e. the password is always masked by default). This is especially useful for mobile login pages, as getting the wrong key is all too easy on a fiddly mobile keyboard.
6. Tell users if Caps Lock is on
Another simple way to help users enter their password correctly is to warn them if their Caps Lock button is on.
7. Make it easy if users forget their password
Just as everyone sometimes forgets people’s names, or their wallet, or their anniversary (I’d recommend you try to avoid this one!), users will forget their password. Let me repeat that for any security analysts out there. PEOPLE WILL FORGET THEIR PASSWORD.
It’s therefore very important that if users do forget their password (and they will) that this is well handled by the login process. As a starter always have a clear ‘Forgotten your password?’ link for users to use. If you want to keep the login page as clean as possible you could perhaps only show this link on incorrectly entering a password, or on focus of the password field, but ideally it should always be there. Don’t make users re-enter their email address on the forgotten password page and whatever you do don’t send the password via email (a no brainer), or send a temporary password via email. The best thing to do is to send a reset password link via the registered email address. Also, make sure the reset password email is as instantaneous as possible – there’s nothing worse than having to wait ages to login because the forgotten password email takes an eternity to arrive…
If security is particularly important, rather than making users call a help line to reset their password (B2B websites are particularly guilty of this), perhaps ask for some security questions that can be used prior to resetting a password. Just be sensible with the security questions that you ask. For example, the first person that you kissed (which believe it or not I have seen) is probably not the easiest information to recall for most people!
8. 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. For example, if it will be locked for 10 mins after 5 unsuccessful login attempts, warn the user after the third attempt that their account will be locked for 10 mins follow 2 more unsuccessful login attempts.
9. Keep users logged in
Gone are the days of accessing the Internet using a public computer (remember those heady Internet café days!) so rather than having a ‘Keep me signed in’ option it’s better just to automatically keep users logged in to a website or app for a set period (unless of course security is a real issues, such as banking apps and websites). Of course sometimes a computer is shared (such as the family laptop), so it’s still very important that users can easily login as a different user if they need to.
10. Remember users when they return
When a user does have to re-login to their account, ensure that their details are retained where possible. Ensure that browsers are able to pre-populate fields (such as email address) and if possible remember their account details, so that users only have to enter their password.
- New Approaches To Designing Log-In Forms (Smashing Magazine)
- 3 Rules for Painless Account UX: Login (sitepoint)
- Five UX antipatterns to avoid when designing Log-in & Registration areas (90 Percent of Everything)
20th August 2015 @ 9:17 pm
I have no idea why developers so often fail to disable the auto-caps or auto-correct in log-in fields. Sometimes it’s the device, but sometimes it’s not. It’s one of those things that baffles me to no end.
28th August 2015 @ 7:02 pm
Thanks for the article. You say “Don’t make users re-enter their email address on the forgotten password page.” Could pre-populating / remembering the email address make hacking any easier?
4th September 2015 @ 11:40 am
This would only be on someone entering their email address and then using the forgotten password feature. The email address is not remembered between sessions, just passed through to the next page. It avoids the pain of having to re-enter the same email address on the forgotten password page (you’d be surprised how many sites make users do this).
31st August 2015 @ 5:34 pm
While your second point is certainly a valid one, I’m not sure if you found the best example to show. The Axure site shows clear headings and button labels to inform users what fields pertain to which flow. Not trying to taint your point, just saying that I’m sure there are much better examples of what you’re illustrating.
4th September 2015 @ 11:43 am
I used that example precisely because I’ve seen people incorrectly enter their details in the wrong fields on this page, and even done it myself in the past. The problem is that users don’t always read headings and button labels when they are used to using a site, such as Axshare. This is why clearly differentiating login from registration is so important.
22nd December 2015 @ 5:51 am
A great post you cleared all the aspects. Yes user experience is must and if they find it good you will succeed. I have always seen people navigating through websites and hating the fact that it first takes them to the registration page and then to login. Differentiating both these will help a lot and using external sites for login is also a great experience and fast for the users.
16th January 2017 @ 12:48 pm
Thanks, Neil – a helpful reminder. Do you have a recommended resource in terms of pros and cons of 3rd party logins, perhaps helping inform a choice of which to use, if any?
18th January 2017 @ 8:49 am
Hi Joe. Sorry, I don’t know enough about the range of 3rd party login tools out there to be able to recommend one or more. I guess the key when evaluating any 3rd party login tool is that it supports the sort of good UX practice outlined in the article.
5th March 2017 @ 12:09 am
I just came across this helpful article because I have been debating whether to allow users to sign in using facebook and google+ vs using email addresses as username. My goal would be to obtain email addresses and phone numbers so I can stay in touch and properly serve the people using my real estate search. Would you say that makes more sense to use email username rather than the social media login option?
7th March 2017 @ 1:17 pm
In this instance yes it probably makes more sense to use email address as the username rather than social media login. Just make the login process as simple as possible and give users a good reason to sign up in the first place!