Designing UX Login Form and Process

by Nick Babich

We go through a login process pretty much every day. However, even though login interactions are so common, they also are one of the trickiest parts to design. It’s vital to ensure that your login page does not create an obstacle to your users. Here are a few things to follow to design a better login process.

Show Input Text Fields

If logging in is required step for interaction with your site or app then it should be the primary feature of the page. Users should’t take any extra steps to figure out how to login.

When registered users come to a site or launched an app, it should be immediately clear where they can login.

Twitter shows login input fields straightforward on the main page of service and this makes it clear for users where to log in.

Twitter for desktop

Takeaway: Rather than providing a ‘Login’ or ‘Sign in’ buttons, it’s better to show the login form upfront, so users can login.

Don’t Use ‘Sign In’ and ‘Sign Up’ Together

How fast can you spot the difference between ‘sign up’ and ‘sign in’ on image below?

Bad: ‘Sign in’ and ‘Sign up’ looks

‘Sign In’ and ‘Sign Up’ are quite close. When buttons looks too similar and both use the same verb in their labels it’s pretty easy for users to get confused. Users might click one instead of the other, and usually this problem frustrates the users who already have an account.

Users shouldn’t have to pause and and think what button should they click. If you want to provide a good user experience in login, avoid using ‘sign up’ and ‘sign in’ together. Instead, make the button distinct from each other by using different verbs in labels and different visual appearance.

Good: ‘Login’ and ‘Register’ are more clear to users.

If you’re focused on conversion — test a variation of your “sign up” button with something that gives, compels, and is tied to your product. This helps prevent the button from being overlooked.

Good: Mailchimp uses same prepositions, but different graphical styles for login and registration.

Differentiate Login from Registration

Many sites and apps use almost the same number of input fields (email/user name and password) for login and registration forms and showing the two side by side:

Bad: two forms side by side

However, it’s very important to clearly differentiate the registration from login. This design decision will help you minimize the chance of users accidentally attempting to log in via the registration form. Again, Twitter’s login and registration forms not just look different, but they also have different color for CTA buttons and proper help text (‘New to Twitter? Sign up”)

Twitter login and register forms

Allow User to Log in Via Facebook, Twitter or Google +

Users are growing increasingly resistant to traditional registration processes. Why force users to create another set of login details when you can let them login via an external account, such as a Facebook, Google or Twitter? This feature can will simplify the process of account creation, but comparing to the standard registration with email, it has both pros and cons.

Pinterest provides login option via social network account

Pros:

Users don’t have to fill out registration form, to create another usernames/passwords

Users don’t have to verify emails.

Users don’t have to remember a new pair of username/password.

Cons:

Not everyone have social media accounts. Some people try to stay away from social networks.

Privacy concerns. Not everyone will be happy to share her profile data.

That is why social media login shouldn’t be the only way people can start using your product. You should have traditional login system running in parallel.

Traditional login system ‘Sign in with email’

Let Users See Their Password

Mistyping password is a common problem during login. And it’s a relatively easy to mistype password when the field is masked (password field is masked for security reasons). People often mistype their password, especially when they are on mobile. Mistyping password for iCloud is my number one problem in Apple iOS — it’s also pretty annoying thing, cause you access the service only after 2-nd or even 3-rd attempt.

Apple iCloud: password mistyping

Implementing a ‘show password’ option is right thing to do. You can place a checkbox or icon button near the password field. When users click it, it’ll display their input unmasked. This is especially good for mobile login pages, as getting the wrong key is all too easy on a small mobile keyboard.

The password is always masked by default. ‘Show Password’ is a user controlled unmasking option.

Use Email Address or Phone number as a Login

If you are using username as a login data, most probably you’re dealing with following difficulties:

Since usernames have to be unique, users might need to spend a few minute before they end up with a proper name, because preferred usernames have already been taken by other users.

Users end up registering with a brand new username that they are hardly remember after a while.

You site or app should allow users to login with their email address or phone number.

Phone, email or username can be used for the login

Keep Users Signed In When They Register

Keep new users stay signed in immediately after registration. And rather than having a ‘Keep me signed in’ option it’s better to automatically keep users logged in to a site or app.

Stay signed in should be a default option, no need to show it.

Warn Users That Caps Lock is ON (Desktops-only)

Show warning message when the user type password in ALL CAPS. Depending on the nature of your product, you can show either e a textual notification or a warning icon next to the password field.

Tell users that Caps Lock is on

Auto-focus The First Input Field (Desktops-only)

When users see a log-in form, you can make the process more efficient by automatically focusing on the first input field. This small feature will minimize interaction cost (prevents users from hovering and clicking). The auto-focus should also highlight the text field so users know that can start typing.

Amazon log-in form

Conclusion

Spending time filling out the login form is an extra work for users. These simple techniques will make your login procedure more efficient, so that users can start enjoying your service.

If you like this article, you might also enjoy Most Common Log-in Problems and Solutions

Thank you!

Follow UX Planet: Twitter | Facebook