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.

See also

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