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!

by Linn Vizard

posted on 01-26-2018

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.

The future of single tap login is here, but it’s not evenly distributed. Image credited to @lukew.

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:

Along with these there are some additional elements that can be incorporated, including:

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:

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:

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:

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.

Topics: Creativity, Design

Products: Photoshop, Creative Cloud