From the very start of our day, till the end, we use some kind of login page almost every day. Be it logging into your work computer or one of your favorite social media accounts; it is a feature of modern-day life. Login or registration screens are generally the first steps for a user when experiencing your product. Thus, as a designer, you must ensure that you design these screens as intuitive as possible to offer a seamless user experience. Your login page should not present an unnecessary obstacle to your users. Here are a few tips that will help you in creating a user-friendly login page.

The Login Page Must be Clear

When users come to a website or app and already have an account, it should be immediately clear to them from where they log in. Instead of providing a ‘Login’ or ‘Sign in’ link, it’s better to show the input fields directly so that users can log in directly from a page.

The best example of this practice would be Facebook. The moment you look at its homepage, you instantly know where you need to log in, because of the clearly visible input boxes for email address and password. Even the new signup (create an account) section is clearly visible and distinguished to ease user experience.

Differentiate Login Page From Registration

Unlike Facebook, the login input fields (email and password) are very similar, if not exactly the same as the registration input field on an increasing number of websites. Therefore, it’s essential to clearly differentiate the two and minimize the chance of users accidentally attempting to log in via the registration form. One way to do this is to get users to input their password twice on registration or only show one form at a time. Certainly don’t show the two side by side. 

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. So you can use ‘login’ with ‘sign up.’ This slight variation will provide more immediate clarity for your users.

On Login Page Allow Social Media Logins

Users are always in a hurry; they look for the most convenient, fastest ways of logging into their accounts. Sometimes you see a lengthy signup 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. 

Give an Option to Show Password

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. The error messages must be exact and straightforward; the users must understand their mistakes in one go.

Simplify The Forgot Password Procedure

Sometimes users will forget their password; it’s human. Therefore, it’s imperative that when users forget their password, the login process handles the situation well. As a starter, always have a clear ‘Forgot 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 on 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 don’t send the password via email, or send a temporary password via email. The best thing to do is to send a reset password link via the registered email address. Make sure the reset password email is as instantaneous as possible – there’s nothing worse than having to wait for ages to log in.

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 be a token time limit implemented to ensure hackers can’t take advantage of it. Adobe allows users to toggle this option.

Use The Email Address, Rather Than Username

Usernames are frustrating at times– namely websites asking users to login with a username, rather than their email address. Most users will have one or two main email addresses – personal and professional, however, they may have a lot of 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 log in with their email address.

We hope that these tips will help you in designing your login screens. For more information, you can get in touch with our expert web designers.

Read more on some creative landing page design ideas here.