Login screens are not typically considered exciting parts of any UI, in fact, they are often the least thought about, seen as a mere gateway to get in and out of as quickly as possible. However, a great login UI truly stands out, and makes for a recognizable symbol which can speak volumes about your site or app. Not convinced? However dull a login page may seem to you, a poll conducted by Blue Research indicates that 1/3rd of users frequently leave login pages when unable to recall their credentials. This highlights simply how important nailing down your login page UI design is when it comes to user retention, and usability.
Allow users to see their chosen password
Allowing a user to see the password which they enter is a simple, yet effective way to add functionality to any login UI. This is a feature which can be seen on myriad login screens across many platforms, normally represented by an ‘eye’ symbol. But why include it anyway? The reason lies purely in usability, considering the fact small screens on mobile devices, coupled with imprecise typing from users leads to many, many incorrect password attempts, without them fully understanding what has gone wrong. Jakob Nielsen of the Nielsen Norman Group puts it perfectly in the book ‘Intranet Portals: UX Design Experience from Real-Life Projects’:
“Masking passwords doesn’t even increase security, but it does cost your business due to login failures… and it’s worse on mobile”
Therefore, giving the users an option to see their entered password can reduce failed attempts, or in serious cases, complete lockouts from accounts. This, in turn, contributes to a more consistent result, fueled by a simple login UI fix.
Offer password resets up-front
We’re sure there are many of you out there who have never had to reset a password in your life, so you might not have considered this. However, studies conducted by HYPR in the United States and Canada suggest that almost 78% of all internet users have had to reset their password at least once, in the past 3 months. For this reason, don’t make the option to reset a password hidden away in some dark corner of your program, rather, place it front and center on your regular login UI.
Some applications prefer to offer password resets after a failed attempt at logging in, but this is counterproductive in nature. While it may seem neat to have a state for such a common situation (that being the user getting a password wrong), most of the time, if a user has forgotten a password, they know it, and getting them to enter a wrong one anyway isn’t the most friendly way to ask for a reset, rather, implement it directly into your login UI design.
Use one login screen
A lot of UI designers might be puzzled by this point, since it seems obvious enough to have both the ‘username’ and ‘password’ fields on one screen. However, many high profile applications such as PayPal, Twilio, and Shopify all ask for usernames, and passwords on separate screens. This not only doubles the number of clicks required to log in, but also doubles the amount of time it takes. Since the aim of any login UI should be to get the user logged in, and using the application or site as quickly as possible, this is a counterintuitive step.
Using one login screen, barring the typing of usernames and passwords, allows one-click access into the functional portion of your app or site, and should be adhered to apart from very specific cases, which involve SSO’s. This is further put into context with the following point about asking users if they’d like to stay signed in. Additionally, using just one page allows for a host of additional functionality, like offering social login and offering aforementioned password resets, streamlining the entire login UI design process in one simple step.
Ask users if they’d like to stay signed in
As stated in the previous point, getting the user in and out of the login process as quickly as possible should be your first priority when it comes to login UI. The biggest time sink of any login page will be the user typing in their username and password, and eliminating this step, that’s a simple best practice for login page UI design.
This point comes with a caveat, since it only applies to casual applications, or ones which do not have a lot at stake when it comes to compromised accounts. We wouldn’t recommend offering to keep users signed in when it comes to login UI’s pertaining to banking, identification, or other highly sensitive programs, since this could possibly compromise security, and increase risk. However, for general applications such as social media, games, or other accounts of this ilk, offering ‘stay signed in’ options can convenience the user greatly.
Make ‘Sign In’ and ‘Sign Up’ visually distinct
We’ve all been there, creating a new account only to read the error ‘account doesn’t exist’ only to discover that we are on the sign-in page, and not the sign-up one. However, this is a great place to integrate visual login UI tweaks such as implementing different colours, shapes, and typography to distinguish the two, even when placed next to each other on a login page. Using bold characters for ‘sign up’ is a common, and effective way of doing this, but there are avenues to be more creative with it.
Facebook differentiates them using both button size and colour, sporting the iconic blue for ‘log in’, and a smaller, green button for sign up. Instagram has a button for ‘log in’, while using a hyperlink stating ‘Don’t have an account, Sign Up’ for the alternative. Finally, the Fantasy Premier League site uses distinct shapes, a square button for ‘Sign In’, and an arrow-shaped button for ‘Sign Up’. There are hundreds of ways to show off your creativity in the login UI, and the ‘Sign In’ and ‘Sign Up’ confusion is a spectacular opportunity to show it off.
A login page acts as a gateway to the remainder of your product. It creates a first impression which could stick with the user for times to come, which is why its importance cannot be overstated. Elevate the UI, and the login page will only get better, prompting more users to carry on with the product.