Everything You Need to Know About Creating Smooth Login Experiences
The best login experience might just be the one you don’t notice much at all!
Designing a login flow is a key part of many UX (User Experience) projects. Here’s what you need to know about best practices for login experiences, including accessibility and security.
While innovations such as Touch ID and Face ID are changing the ways in which we log in to our services, they are a long way from being fully ubiquitous across devices and platforms. Login screens are an incredibly ubiquitous part of our digital experiences ━ users self-report authenticating 15 times in an average workday. Well-designed login forms will continue to be a crucial part of the UX designer’s role.
Login forms are so commonplace that they might seem like a no-brainer to design. Despite a lot of standardization of the UX of logging in, there is surprisingly a lot of room to improve many of these experiences. Here are the most important considerations:
The elements of a login screen
The Kit and Ace sign-in screen contains all of the basic familiar elements ━ email address field, password field, a forgot-your-password link, and a sign-in button.
Across web and mobile experiences, there are key basic elements that are required for a login screen to be effective. These are:
- Username/email field.
- Password field.
- Forgot-password link.
- Login button.
Along with these there are some additional elements that can be incorporated, including:
- Show password option.
- Keep me logged in option.
- Social media/other account log in option.
Whether these elements get incorporated or not will depend on context ━ for example, whether the service supports login via social media accounts.
General best practices
Successfully logging in to their account is extremely unlikely to be your users’ primary task. People are hoping to post an update, access personalized content, complete a purchase, or perhaps read their email. Logging in is a means to an end, as a user is often trying to achieve a sub-task within a broader goal.
With this in mind, it is of utmost importance to make logging in smooth and easy. Additional roadblocks to your users’ task will increase the risk of abandonment of their task, which is bad news for your digital experience. For example, one UIE (User Interface Engineering) study of an online retailer found that 75 percent of e-commerce shoppers did not complete their purchase once they requested their password.
Here’s what to keep in mind when designing:
- Allow people to explore and understand the experience’s functionality and content without requiring them to log in. Nielsen Norman has written extensively about the frustrations that login walls pose to users, and how they violate the reciprocity principle. For e-commerce sites, allowing guest checkout is crucial to preventing cart abandonment.
- Clearly differentiate login functionality from the create account or register functionality. Many experiences still do not adequately differentiate these, causing users to try to log in via the registration form or vice versa. They should be visually different, and use clearly differentiated language, such as ‘log in’ and ‘register’ rather than ‘sign in’ and ‘sign up’.
- Show the login form fields immediately on the site, rather than hiding them behind a button or on a separate page. Not showing the fields adds an additional step for users.
Vimeo hides the login form fields in a modal that pops up when you click the ‘Log in’ option at the top of the page.
Contrast this with Facebook which has the login form fields always visible at the top of their homepage.
Designing an accessible login experience
Considering accessibility when designing a login screen will make the user experience better for everyone and ensure that no user group is excluded from accessing the app or website. Twenty-two percent of the adult population in the United States lives with some type of disability, according to 2015 figures from the Centers for Disease Control and Provention. Visual, cognitive, and motor disabilities may impact how someone experiences a website or app ━ for example, if someone is color blind or using keyboard-only interactions.
Some simple ways to consider accessibility include:
- Ensure the size of form fields and touch targets, such as a login button, is adequate. The WCAG 2.0 guidelines recommend a minimum touch, target size of 9mm by 9mm, with additional surrounding inactive space.
- Appropriate color contrast is an important part of visual accessibility. Test the design using an app such as Colour Contrast Analyser, and by using Photoshop’s built-in tools.
- Specifying the order of keyboard-focus interactions as part of the UX work can ensure that these are not forgotten during development. Once there is a live build, testing the login page using the keyboard only will make sure that the experience of users who rely on keyboard interactions is covered.
Photoshop has built-in tools that will show you what a design looks like to someone with protanopia-type or deuteranopia-type color blindness ━ a great way to test designs for visual accessibility.
Finding a balance between security and usability
In the UX of login experiences, there is a fundamental tension at play between security and usability. Password protected accounts and logins exist to keep information associated with your unique identity private. Trouble logging in, for example, like forgetting a password, is a very common and very frustrating experience that results from this tension.
Approaches to working with this challenge include:
- Where appropriate, consider a ‘show password’ option with the default set to masking the password. This can increase user confidence that they are not mis-typing a password, particularly on mobile devices. However, this option may not feel secure to users in certain contexts, for example, like banking applications.
- Use specific error messages which lets users know whether the username or the password is incorrect. While some argue that this is not a secure best practice, the counter-argument is that registration forms can be used to figure out what emails have accounts registered to them.
- Consider offering options to log in using other sites, for example, like social media. While some people will not want to use this option, others will like to reduce the number of accounts and passwords to remember.
MailChimp offers a show/hide password toggle that users can control.
Log in and get going!
Login screens are a fundamental part of many user experiences, and the best ones are so quick and painless we barely notice them. While the core elements of a login page are deceptively simple, there are many aspects to consider in making them a smooth and pleasant experience. General best practices, accessibility, and security are all key to a well-designed login that lets your users get on with posting their photos, reading their email, and buying that sweet new shirt they need.