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.
Frequently Asked Questions
Introducing oneself into the field of UI design requires an understanding of many different facets of design itself. Visual design in particular, as well as an understanding of the user is required to create a functional and beautiful UI that will stand the test of time. Everything from your login UI, to the homescreen must be consistent both logically, and visually with not only itself, but the UI sphere as a whole, for this reason, it’s recommended to dive in and get firsthand knowledge of UI design by playing around with various softwares, and tools.
Prior to the interview, you can study the portfolio, or past projects of the designer and ask them to explain their decisions, or reflect on the design process itself. Focus on small decisions, such as ‘why did you choose this animation for the login UI’ or ‘why was the information architecture laid out like this’ to delve into the more psychological aspects behind every design.
UI designers can provide a massive amount of value to any organization. The proper UI design can improve conversions, but more importantly, keep lasting brand affinity with users. How universal are the ‘like’ button on Facebook, or ‘pin’ on Pinterest, these elements were created by UI designers, and ended up transcending their medium greatly.
Being good at UX design requires an understanding of so many different things, and the ability to focus it all towards an end product. Knowledge of information architecture, visual design, and interaction design is all required. Furthermore, understanding of psychology, development & coding all go a long way as well.