The success of websites and mobile apps depends on a variety of factors, and UX is not the last on that list. Such a small constituent as a login form usually plays a crucial role when it comes to UX. An attractive login page may turn a first-time website visitor into a loyal friend, while a poor login page design may increase the bounce rate.
A complex login form design isn’t something that today’s consumers expect. In this fast-paced world where time is so precious, people are unlikely to take the trouble to lose time filling out long forms, especially if they are accessing the form from a mobile screen.
Online stores, social media networks, blogs, and online banking websites are all examples of websites and applications where these forms are a necessary evil. Popular and high-traffic websites have started to opt for a simple user login design a long time ago to nudge users into staying with them. Check out these two login page design examples we’ve found on well-known sites:
Source: Facebook
Source: Dropbox
Select the Right Terminology
The terms “sign in”, “sign up”, “sign out”, “log in”, and “register” may cause confusion for non-native speakers. Mistakes are made particularly often when web designers position “sign in” and “sign up” buttons very close to each other.
“Sign in” and “log in” can be used interchangeably.“Log in” is believed to be more technical, while “sign in” sounds more natural (just as people speak to each other). “Sign up” simply means “register’. So it’s better to use “log in” together with “sign up” or “register” to eliminate any confusion.
“Sign out” and “log out” also have the same meaning, but try to avoid combining “sign in” with “sign up”, as there is a high risk that disgruntled non-natives will abandon the site.
UX Considerations
We’ve prepared some handy tips on how to design a login page that will deliver a great user experience.
-
Use an Email Address/Phone Number as a Login
Even though your mobile app/website asks users to create unique usernames when they register, it’s a bright idea not to utilize them as the only login option. Often people simply don’t remember all the usernames they have.
Introduce other login alternatives, such as an email address or a phone number to make the sign-in process as easy as ABC.
Source: Twitter
-
Enable Social Login
There are approximately 2.6 billion social media users today, and you can remove the need to go through a boring process by putting social media login to use. Let people log in via their social media accounts like Twitter, Facebook, and Google and you will win their loyalty.
Source: Uber
-
Warn Users When CAPS LOCK is On
Informing users that CAPS LOCK is active may protect them from unintentionally using of upper case characters. You can display the notification near the input field or even inside it.
Source: amsys.co.uk
-
Tell Users When They Enter a Wrong Password/Username
People tend to forget various things, and they often fail to keep in mind all the passwords and usernames they have created. They may even forget a new password they invented a couple of hours ago. It’s good practice to immediately notify users when they have entered a wrong username or password.
Source: Microsoft
To ensure a positive user experience, add a clear “Forgot your password?” link to the page to help them recover it. You may show this link only if the password is entered incorrectly.
Source: Netflix
Reminding the user of a recently changed password is also a good idea.
-
Keep Users Signed In After Registration
Spare registered users the need to log in each time they visit your website or open your mobile app. Provide them with the opportunity to stay signed in to the account by either adding a checkbox or keeping them signed in automatically.
Source: Evernote
-
Remove the “Confirm Password” Field
Long forms frustrate people and they reduce conversion rates. That’s why successful sign in forms don’t have them at all. A great example to follow, isn’t it?
Source: eBay
-
Indicate the First Input Field with Color
You may also give a hint to the user about where to start from by indicating the first input field with the help of color. This tactic works particularly well for mobile visitors by immediately drawing their attention to the necessary field, thus saving their time.
Source: Targetprocess
-
Remember Return Users
Pre-fill as many “sign in” form fields for return as possible, in order to make the login process completely painless for return users. If possible, ask them to enter the password only.
Mobile Login Forms
To delight mobile users, follow these several pieces of advice.
-
Log In Users without a Password
Some practitioners have started to skip the password step by using alternative authentication methods, such as Google Authenticator, one-time SMS security codes, biometric authentication, and so on.
-
Give Visitors an Opportunity to View/Hide a Password
Grant users an opportunity to make the password visible when they are typing it. This option is extremely useful to mobile visitors whose devices have small screens. Taking advantage of this option, they will make fewer mistakes.
-
Optimize Website Login Page for Mobile
A mobile-friendly design is a must for all of the website. Double-check that the login page looks good both on desktop and mobile screens.
Excellent Sign In Form Examples
Now you know the nitty-gritty of creating a user-friendly login page. To give you design inspiration, we’ve decided to share with you some great examples of a login page.
Source: Dribbble
Source: Dribbble
Source: Dribbble
Source: Dribbble
Source: Dribbble
Source: Dribbble
Source: Dribbble
Source: Dribbble
Source: Behance
Source: Dribbble
Source: Dribbble
Source: Dribbble
Source: Dribbble
Source: Dribbble
Source: Dribbble
Source: Dribbble
Source: Dribbble
Final Thoughts
The login page design has a pivotal importance both for websites and mobile apps. You cannot afford to skimp on it if you want customer recognition and loyalty. In this article, we have cast some light on some vital issues that you should consider when creating a sign in form. Put them into practice and you’ll never regret it. Have something interesting to share with the AGENTE team? Drop us a line or give us a call today.
Please enter your email address in the following format: someone@example.com
