Login page is one of the most important parts of the web and mobile app interface. This is one of the most common user touch points with an application. It seems that the login is an insignificant little detail in the application, but such details can form the entire impression of your business. Think of login page as a door on your website or web app: the user must open it and get the best user experience ever. By creating an account on the website, you get the first idea of the business to which you might be giving away thousands of dollars. So, designing a login page can be a very daunting task. There are many small details in login page that can easily ruin user experience or even prevent the onboarding of new users.
A well-designed login page creates a sense of security, while a poorly done page makes you want to turn your back on the business and never return.
When you design a login page, please keep in mind that it is a condition for entering the website – users will interact with it several times. People who want to get inside the application cannot bypass it. That’s why if your page is done poorly, it turns user experience into a nightmare. The user won’t tolerate you for long, as he will find a suitable competitor.
Login form Essentials
Login forms, unlike other elements on the site, cannot be very different and must be minimalistic as possible as you can design. The reason for this minimalism is that people don’t like filling out forms and can’t remember them. Login should be simple and straightforward, not overloaded with detail.
We should, however, analyze what must be presented in the login form, even though it has to be as compact and concise as possible:
- Email, Username or Phone number field;
- Password field;
- Sign in / login button;
- Social login buttons (Google, Facebook, Twitter and other options);
- Reset password button;
- Warning message;
- Show password option;
- Remember me option;
- Link to the registration page.
Modern types of login forms
Let’s also take a look at where modern trends in login form development and design are heading.
The first trend is when the company only requires your phone number, and when you enter it, they send you a code via SMS. This way you don’t have to keep in mind dozens of credentials for different applications and sites. Cool, fast and simple solution, but with one drawback – there is a rather large group of people who do not want to share their phone number with applications. Accordingly, by providing only this type of login, you can cut off some of the users or customers.
With the development of mobile phones, it has also become possible to enter the application such as a fingerprint or face scanner.
Purpose of login forms
Before making a login form in your application, think about what purpose you are pursuing. You can do it by answering the following questions.
How do you want users to visit your site? Immediately or do you want to filter them? Also consider how important security is to you. How important is the login form as part of the application in your case? Should users spend a lot of time on it? Is the login page a part of your brand identity? How to evaluate the quality of a login? How to create a good login?
Online shops, social networks, blogs, bank sites are examples of sites where the login form is super important.
The Do’s and Dont’s in designing login forms
The Do’s
Keep it clear
You can’t be wrong if you keep the login form as simple as possible. A minimum of fields and distractions. The login button should be clearly visible. You can stay away from redirecting users to a new page, but instead create a login form in an iframe (remember about security!).
Make difference between login form and registration page
There is a huge difference between these two. They solve different problems, although seeming to be similar at first. In the registration form, you clearly can have more forms as you need more user data. Basically, you should just separate these two pages.
Social login option
Consider adding a login option through resources such as:
- Google;
- Facebook;
- Twitter;
- Github;
This will require a little effort, but it significantly speeds the user login and registration up, providing a new positive experience in using the application.
Even some social networks use social login on their own – for example Pinterest.
Add forgot password option
This is clearly one of the most useful features to have at the login page. Using dozens of apps every day, people forget their passwords all the time. Just imagine: you forgot your password and the magic “forgot” button is not there! You’d need to look for the support email, wait for someone to process your ticket and send you a new password.
Solving mistype and caps lock feature
It is considered good practice if you add a message to notify the user he’s typing a password in the wrong language or with Caps Lock on. This seems to be a trifle, but very pleasant for the user. This is a very helpful feature for websites that restrict the number of times an incorrect login can be entered before locking the user out.
Remember me option
This function is important to reduce the number of people who will request a password change. It’s a very small detail that solves a big problem. This function remembers user credentials, so when a user tries to log in, he gets in immediately.
Show the password option
Another cool feature is the option to show the password to the user while he is typing it. You can simply help the user and avoid blocking their account.
Ability to change users at login
Another great feature is multiple accounts. It’s very cool when the application remembers the users you logged in. Take Netflix as an example.
Select the right terminology
Often, due to the abundance of terms such as sign up, sign in, login, register and their overall similarity, people get confused. Especially when the buttons are on the same page and look similar.
Sign in and login are very similar in meaning, yet we recommend using the sign in: it’s more natural.
Indicate the first input form with color
You can give a hint to your users where to fill in first by highlighting fields with a discreet color. This works very well on smaller screens where it is not always clear where to go first.
The Don’ts
Connect SignUp and Login form in one window
This is not the best option since it requires the user to figure out which form is suitable for him. Also, if you merge two windows together, you may increase the number of support requests: the users will be lost.
Hidden fields
Often browsers automatically fill in the fields on the login form. Forms with hidden fields the browser cannot automatically fill simply confuse the user.
Asking username instead of email
In some forms, it is customary to ask users for their username instead of email. This practice is neither the best nor very effective: most users forget their usernames as they use different options for different applications. In contrast, email usually remains the same, so it’s hard to forget.
Complicate things where you don’t need to
You’ve probably come across this: every time you enter the site via email, you are sent a code to the email, only letting you in after entering it.
Please use standard cybersecurity tools that have worked well for a long time, such as auth0, instead of sending sms codes.
Also, sometimes tools ask you to enable two-factor identification. Many users do not like when a solution is forced upon them like that. It is better to make it an option, so you can avoid two-factor authentication if you wish.
Beautiful Login Form Examples for Websites and Apps
Mailchimp
Mailchimp login page is similar to their old one, with a few minor changes. The first is that at their login page they share content that is the most valuable. It’s great if you want to keep a person in your system for as long as possible.
The disadvantage of this page is the username-only login and the lack of the social login option. This is a rather serious drawback that greatly affects the user experience and overall app usability.
Yeti login by Darin
Yeti Login by Darin was made quite a long time ago, but it continues to delight us with its relevance and truly creative approach. This project not only showcases beautiful cool animations, but also helps users understand what they are doing when they log in and continue their process.
Animation turns a simple action into a game – and you want to keep playing it. The animation also allows you to remove the frustration of login. Even if you do something wrong, it will be a mere pleasure to repeat all the routine once again.
Paypal
PayPal is one of the most minimal login pages on our list. In this form, everything is extremely intuitive and clear – the user is unlikely to be lost with what to do. A good solution is to make the Sign Up button the same size as Login. The disadvantage is the absence of any warning messages and social login options.
Linkedin’s login page is of a simple design – you won’t find any background images or animations. The cool thing is that the design of the LinkedIn login form immediately says this is a business social network. It’s a simple means to an end, which makes for a perfect page and distraction-free design.
The only thing we would change is to add the Keep me logged in button and some assisting messages – for example, minimum password length.
It gets the job done and offers users validation should they need it. What else do we need from a login form?
The Pocket application page login is about when the classic design does not become outdated and performs well from year to year.
On the page we see 2 standard fields, Email / Username and Password. It’s good the user can choose what is better for him, Email or Username. Also a good point is the hints in the input fields – for example, the password cannot be less than 6 characters.
The login form also adheres to all the principles of good work, namely:
- There is a social login;
- There is a Sign Up button;
- There is an option in case you forgot your password.
As a result, this is one of the best examples of login that we have seen: simple and fast, yet all the necessary elements are there.
Medium
The Medium has one of the most concise and thoughtful logins in our collection. The first thing that catches your eye is the abundance of social logins: google, facebook, apple, twitter. And only at the very end there is a button that allows you to use a regular email.
It is very good that a note is made at the end of the form that by entering the system you agree with the rules of this platform. In the previous iteration, there were graphic elements in the login form, but now the designers decided to abandon this, probably in favor of not distracting the user from the quickest interaction with the application.
Spotify
In Spotify’s login page the first users see is white background, with no illustrations or any other graphical element. Spotify gives users the alternative to login using Facebook, Apple or Google, as well as the option to stay logged in.
What we like about this login form is that it enjoys inline validation in both the username and password fields. Another type of validation pops up above the login form after a failed attempt. A large registration button is also a good solution if the user does not already have an account in this system. Forgot your password link is also clearly visible.
Pinterest uses a modal window as a login, but probably in their case it’s justified, since everything is done very efficiently and quickly.
The structure is standard for good logins. To log in, you need to fill in two fields – Email and Password. There is also an option with social login from two most popular systems, Google and Facebook. An interesting detail is that your avatar appears on the button with Facebook login – it gives a sense of security.
The good thing also is that the designers posted a warning that by logging in you agree to the Terms of Service and Privacy policy – a good protection against possible unpleasant situations.
Instagram also has a very concise, simple, fast login. A special feature is deep integration with Facebook, so if you are already logged into this social network, then the transition to the Instagram page will be very quick and convenient. The downside is probably that there are no other options for social login: being connected to only one social network sometimes interferes.
Another interesting detail: we can see how the developers used the login page to the max to solve the problem of attracting the user to their mobile application and showing how convenient it is to use. Large buttons to download the application and screenshots from phones are evidence of this.
Netflix
Netflix has a simple, but controversial login. However, we must always remember that the main audience of Netflix uses it on their TV, so the login form there may look better.
A good solution in a Netflix form is just 2 input fields. Options to enter email or phone number, hints on how long the password can be, and a Need help button are also there.
It is controversial that the text is gray and poorly readable, as well as the fact only Facebook is represented at the social login. The sign up button is also hard to read.
Dropbox
Dropbox’s login form is located right on their homepage – in the form of a vertical modal that expands when the user is located at the top. The login form takes up enough space on the page and is accompanied by interesting graphics on the left.
The result is a beautiful contrast that clearly splits the screen, and keeps the login form from looking bland. We love that Dropbox has chosen two of the most popular platforms, Google and Apple, as their social login.
Bad Examples
At the beginning of this block, it’s worth saying that when we were looking for bad examples, we used subjective metrics and general guidelines when building login forms. It is quite possible that the companies presented below have their own tasks for their login forms, so in their particular case they solve the task well.
Amazon
The Amazon login form has several significant disadvantages:
- This lack of social login;
- This is a step-by-step login: you enter the email first, the password is in the next window;
- The absence of any warning and prompting messages.
Basecamp
In general, Basecamp’s login form looks rather laconic with the exception of a few details.
The first drawback is the lack of any hints on password length, as well as incorrectly entered email. The second drawback is only one social login option. Third one is the lack of a sign up button.
Conclusion
In this article we have discussed the basic principles of login page design. We learned that even a detail this small can drastically affect the perception of the entire application. We’ve shown both good and bad examples of login forms, and we hope you can use the best practices when building your applications. Follow our guide, use UX tips, and get some inspiration from our collection of the best login form examples to achieve this goal.
About Flatlogic
At Flatlogic, we help businesses to speed up web development with our beautifully designed web & mobile application templates built with React, Vue, Angular, React Native, and Bootstrap. During the last several years we have successfully delivered more than 100 custom dashboards and data management solutions to various clients starting from innovative startups to established and respected enterprises.
You might also like these articles:
10+ Noteworthy Bootstrap Admin Themes Made With The Latest Version Of Vue
Top 19 Bootstrap Developer Friendly Templates for 2020
ETL (Extract, Transform, Load). Best Practices ETL Process And Lifehacks
Top comments (0)