When You Are Designing A Login Page, Make Sure Everything Points To The Purpose Of The Page

Logging into something has become one of common daily activity. Whether it's on your mobile devices, you computer or on the internet. While we have biometric scanners and other technologies to reduce the our dependencies on using login passwords, this type of logging in method is still widely used and won't go anywhere anytime soon.

There are only a few of internet services that don't have the feature for users to log in. Since it's one of the common way for members of a site to enter, you need to make the form simple and straightforward.

If your website's login page has its own dedicated page, make sure that it's simple without any unnecessary distraction points and links that forward user to somewhere unrelated. Since that page is created for one sole purpose, a name/email and password field is enough for a simple boarding process.

How Do I Enter?

Sign In or Sign Up?

"Login" or "Sign In"? Or is it "Log in" instead of "Sign Up"?

There are many people on the web, even the experienced ones, can become confused by the above terms. Especially when using the same form labels, some people that wanted to log into their account can occasionally enter a registration form, and vice versa. The confusion may confuse the user even further when they have multiple accounts on different websites using different emails and different passwords.

To prevent this kind of confusion and unwanted account creation, you need to keep your login page and the registration form separated. You may want to create separate pages to easy maintenance. From a design perspective, the forms may look similar, but with different visualization as cues, the forms should appear different. This should tell the user whether he/she is at the wrong page.

And to reduce such confusion a bit further, you may avoid using two similar terms on a single page (your homepage, for example). Like using "Register" instead of "Sign Up".

Email Address Or Username?

Login form - example

Two people may have the same name, but no two people should have the same email address. Email address should be unique to one person, and this is the reason why login forms ask this as a way of authenticating a user.

If you want to allow users to login using their real names, you may put this as an option, not an alternative or mandatory. Email is the most unique information common users should have, and this shouldn't be put aside for whatever reason.

What emails can further do is to allow you as a web owner/webmaster, to contact them when needed. If a user for example, is your client and has troubles in logging into your website, asking for the email he/she used for registration and his/her name is a lot better than asking his/her name or email only.

If you want users to have a different name rather than his/her email on your website, you need to provide a feature in which they can create unique usernames and to customize their profile, after they're logged in. Customization here should also allow users to change their email address password to access their account.

As a safe alternative for a username, many websites have also used phone numbers for the field. Mobile phone numbers are unique, and it's fairly easy to remember and to type in.

And to make sure that people who forgot their login credentials to be able to enter, you need to put a "Forget Password?" or "Reset Password" option. This will open a new field in which the user can enter their valid email address/phone number/others and/or unique name to then retrieve their login credentials.

Why Using Third-Party Login?

Social sign-in buttons

You may have a great website, but not everyone wants to opt to you service by entering information on your registration form, to then confirm their email address, to then access your website. As a whole, it may take them a few seconds to a few minutes. To some people, this is not a problem, but to many others, this may come as a concern.

There are many third-party login feature you can use that are great, similar or even better than yours. Like for example, using Facebook/Google social credentials as a way for your users to log into your site. Offering this option gives user the convenience of choice. People like choices, and as long as they make sense.

When users are active on the web and using internet services, they'll likely have more than one email address and more than one password they need to remember to access a multitude of services they have registered to. Adding another one to remember could be a burden, and using third-party logins could quickly and effectively make your users feel at home without having them remembering additional set of login information.

Should I Use CAPTCHA?

new reCAPTCHA

There are lot of people on the web at any given time. Any of them could land on your website and enter you login page. Since not everyone has good intentions, protecting your website is a must, and that goes the same with your login page.

CAPTCHA is one of the most widely used feature to prevent bots from doing nasty things on your website. Beside making your website safer from potential hackers' attacks and spams, CAPTCHA can also save your server from doing any unnecessary processing.

While CAPTCHA can save, and limit anyone or anything from doing unwanted things on your website, it has also brought some frustration to users. The reason is obvious: it's difficult. The safer a CAPTCHA is, the harder for bots to "see", and apparently that include us humans.

If you do need some safety like CAPTCHA but found that your users are frustrated by it, you may try reCAPTCHA, the "I am not a robot" version that asks users to identify a set of images.

Is There Anything More To Make It Better?

Show/hide password

Better is relative. But for your website's login form, you can indeed make it more appealing and helpful.

Some websites apply additional features to help users when they want to log into their accounts. Some use animations that point users to the specified fields they need to fill. The animations can be a way to silently communicate with users by helping them fill the form correctly by highlighting form elements, directing them to the place they need to be.

To do this, you need to create a flow and engage method for your users to the call-to-action.

Other feature you can add is an option to "unmask" the password field. Some people like their password hidden behind the star "*" sign, even to themselves. But others, especially those that are prone on typing mistakes can benefit from the unmasking password feature. Because the feature allows the user to see their password as they type, it's exceptionally useful to mobile users that use touchscreen devices since tapping on a virtual keyboard is a margin more difficult that typing of a physical keyboard.

There is also a common feature that is widely used, and that is the "Warn If Caps Lock Is On". The Caps Lock button lies somewhere on a keyboard, and a user may have pressed it some times before arriving to your site. When it is on, users will fail to login because password is (should be) case-sensitive. Many people are frustrated because of their multiple login failure and being locked out of their account, before realizing that the Caps Lock is on.

In your login form, you can warn users if the Caps Lock button is on. The alert can be either textual or visual, or both. Most web browsers already incorporate Caps Lock warning.

Conclusion

Registering is one thing, logging in is the next. When registered members of your website wants to enter, you need to make things simple to maximize conversion.

If you have a dedicated page for your login form, you need to design it with mobile users in mind. Never make users overwhelmed with options they'll find useless. And if you want to add some interactivity and feature to your login page, you should make sure that they do what they need to do: point users to the call-to-action, and nothing else.

Make sure everything is simple as they could be. This will ensure your users to go to the right direction and not the other way around. Never frustrate a user, but make them feel right at home.