In this blog post, I want to explore the login process in depth. I will share my tips and a checklist for designing and developing accessible and user-friendly login forms and login pages.
Some might think of login screens as a mere stepping stone to the ‘main event’. I want to convince my fellow developers — that this overlooked ‘stepping stone’ can be one of the most crucial aspects of a user’s journey, so it is important to ensure the user doesn’t “slip” on it.
I actually prefer to think of the login process as the front door of an app. In many cases, the login form is the very first thing users interact with, making it a crucial first impression. This first interaction sets the tone for the entire experience.
It is critical not only for new users but also for returning customers, who might go through that ‘gateway’ over and over again, following the login flow every single day. History of web development has shown that businesses might lose a large number of high-intent users if the login process in their app is not user-friendly. I will talk more about this research later in this article.
Why do first impressions matter? Google research showed that it takes just 0.05 seconds for users to form an opinion about a website, which determines whether they like your site or not and whether they’ll stay or leave.
Sound suspiciously fast? Check it yourself. Here are two real-life websites that offer radiology services. I’ve found them online to demonstrate my point here. For lots of people, just a glance at these business home pages will be enough to decide where to do their next X-ray image.
(Websites used in the gif: www2.pnwx.com and i-med.com.au)
Another research study showed that an overwhelming number of users, 88%, won’t return to a website after a bad experience. It would be very unfortunate if the overlooked login process contributed to this fatal for your business experience.
In this article, I will also talk a lot about the accessibility of the login process. Consider this: no matter how splendidly your app or website is designed, if users stumble at the entrance, their journey ends before it even begins. And just like a physical space, this digital entrance must be accessible to everyone, regardless of their abilities or circumstances. So, while the first design impression matters — the accessibility of the login process is a nonnegotiable piece.
One more critical thing to consider is security. When visitors to your website are greeted with an experience that’s both user-friendly and secure, they’re more inclined to feel at ease providing their personal details. This sense of trust comes from a straightforward, hassle-free process that reassures them their information is in good hands. On the other hand, if they encounter a website that’s difficult to navigate and seems sketchy, especially when it’s asking for their personal information, they’re likely to back away. No one wants to risk their privacy on a platform that doesn’t seem to care about security.
How do we develop the best possible login process?
Even when integrating a third-party library for the login process, it is still vital to meticulously review the checklist and guarantee that all essential aspects are addressed and everything important is present.
I want to clarify that I call it the login process instead of the login page because the truth is that the login journey from start to finish is usually quite complicated.
Few yers ago I was analysing the UX of Slack’s login process. Have a guess how many different screens (or screen variations) a user can see if he is trying to log in to Slack and he forgot his password, or say, entered a non-existing email? I counted 30 pages. This is quite a process if you ask me.
For easier breakdown, I prefer dividing the development of the login process into subprocesses and categories:
Sign In (Ideal straightforward login scenario for different types of sign-in)Sign Up (this will include different ways to sign up)User forgot their Password/ EmailFront-end form validationsServer-side responses and errorsMulti-factor authentication (MFA)The user is having trouble with MFAOther notificationsEmail/ sms communicationEnsure securityEnsure accessibility
To ensure the best user experience, I will go through the list and see how we can improve each of those steps. (Oh my, this article is getting big, but stick around. It will pay off. Literally. Check this blog post later: “Metrics to Measure the Return Of Investment of Web Accessibility”)
Sing Up and Sign In
We aim to make our user’s life easier. So how can we do that?
Leverage Social Logins. Implement options for users to sign in using their existing Google, Facebook, or Apple accounts. This can be as simple as adding a “Continue with Google” button on the login page, streamlining the process for users who prefer not to create a new account. Additional tip: use Social Login UI guidelines to improve usability and accessibility. For example, here is the screenshot of Google’s guidelines:
Source: https://developers.google.com/identity/branding-guidelines
Skip Password Confirmation. Requesting users to confirm their password might seem like a good way to prevent mistakes during sign-up. Yet, this actually lowers the form’s conversion rate due to its complexity. Users must enter their password twice, and if there’s a mismatch, they face an error without knowing where they went wrong. This often leads to restarting the process, increasing frustration. A practical, user-friendly, and accessible alternative is to include a “Show Password” toggle, allowing users to view and correct their entries on the spot.
Adopt Multi-Factor Authentication (MFA) Wisely. Make MFA User-Friendly. For a user who prefers to use something other than an authenticator app, offer the option to receive MFA codes via SMS. Additionally, introduce the “Remember this device” feature to skip MFA on trusted devices, making regular logins more convenient. Make MFA optional if possible. Remember, not everyone has a mobile phone, and in some organisations, mobile phones can be forbidden altogether (such as certain government or financial institutions). So, offer a variety of authentication methods like email codes, security questions, and hardware security keys, use adaptive MFA based on risk assessment, and provide backup codes for emergency access, accommodating users with different needs and restrictions.
Rethink Password Complexity. Simplify Password Requirements where possible. Instead of requiring a mix of uppercase letters, lowercase letters, numbers, and symbols, encourage users to use passphrases. For instance, “#1-BlueSkyMorningCoffee!” is easier to remember than “B$1uC@ffe3!” and is often more secure due to its length. Make sure users can use autogenerate password functionality on their devices (I personally get so frustrated when I have to create a strong password myself, let alone enter it manually twice! Please don’t do that).
Use Email Over Username. Simplify the registration process on your site or app by requesting an email address instead of a username. Users often struggle to remember usernames. Using an email or phone number streamlines the login process, allowing users to quickly return and access their accounts without the hassle of remembering multiple usernames.
Simplify Registration with Multi-Step Forms (Wizard-type)
Minimise extra controls in the registration process by requesting only essential information. If additional details are necessary, organise them into a multi-step form. This approach helps users tackle large amounts of information more manageably, focusing on one category at a time. Ensure the form is user-friendly: label each step clearly based on its content, facilitate smooth navigation between steps, and offer a summary of the information provided before final submission.
Implement Biometric Authentication. For a mobile app, integrate Touch ID or Face ID for iOS devices and fingerprint or face recognition for Android devices. Banking apps often use this technology, allowing users to access their accounts swiftly and securely without typing passwords.
Privacy Policy and Terms of Service Links. Ensure that users are informed about your privacy policy and terms of service, especially how their data will be used and stored directly from the login and sign-up pages.
Security
While I am not a cyber security specialist, implementing best security practices is essential for the login process. I believe every software developer should be familiar with the basics of cybersecurity, but to be extra safe, additionally, consult on this topic with professionals. Meanwhile, you can:
Implement CAPTCHA Integration: To prevent automated scripts from performing brute force or spam sign-up attempts, integrating CAPTCHA on sign-up and possibly on sign-in after several failed attempts can be helpful. If you decide to use it, make sure you provide accessible CAPTCHA alternatives. Check my other article: “What future CAPTCHA will look like?”
User Input Sanitisation: To prevent SQL injection and other forms of attacks, ensure that user input is properly sanitised on both the front end and server side.
Rate Limiting on Authentication Requests: Implement rate limiting to protect against denial-of-service attacks and to manage the load on your authentication servers.
Session Management: Detailed planning around session management, including session expiration, renewal, and secure cookie handling, is crucial for maintaining security post-login.
Educate Users on Security Best Practices. Create a series of short, engaging videos or articles that explain why security measures like unique passwords for different sites are important, and how to use a password manager effectively. Include these resources in welcome emails or as part of the account setup process.
Forgot Password?
Unfortunately, users forget their passwords alllll the time. According to a recent study at the University of Oxford, over 20% of users report forgetting a newly created password within two weeks. That number climbs to over 70% after just a few months.
Here is an example of the ‘forgot password’ flow that became so popular that it might be as well considering an industry standard:
Step 1: User forgets password.
Step 2: User clicks the “Forgot password?” link.
Step 3: User enters email and requests password reset flow.
Step 4: User opens the inbox and clicks the password reset link.
Step 5: User creates a new password, that matches an elaborate validation formula
Step 6: User confirms new password.
Step 7: User is redirected to the original login page.
Step 8: User enters username and new, strong, secure, and very long password.
Step 9: Often there is an extra step: user goes through a multi-factor authentication
…All to set up a complex new password they’ll likely forget again in a few days.
According to Jared Spool — probably the most influential and respected specialist in the User Experience field — about 10% of your active users will pass through the password reset flow each month. Of those, 75% will drop out partway through the multistep process.
In other words, you might be losing 7.5% of users each month due to the complicated login process.
What to do instead?
Streamline the Password Reset Flow. Enhance Password Reset Experience. When a user clicks on “Forgot password?” and enters their email, send them a link that takes them directly to a page where they can enter a new password, without the need to answer security questions or re-enter their username.
Use Clear, Supportive Messaging. Use friendly and clear language in the password reset email, like “No worries, we’ve got you covered! Click here to set up a new password and get back to enjoying [Service/Product Name].”
Offer Help and Support Options. Include a prominent “Need help?” link on the login page, leading to a support page with FAQs, live chat, and a phone number. This ensures users can quickly find assistance without getting frustrated or abandoning the process.
Prioritise Accessibility. Ensure All Users Can Navigate the Process. Ensure that all parts of the login and password reset process are fully accessible (scroll to the accessibility cheat sheet at the end of this article).
A11y practical checklist.
Here’s my detailed cheat sheet to help ensure the login process is accessible to everyone.
Design and Wireframes: Start by planning a clear, logical layout that’s easily navigable by all users, including those using screen readers. Consider using wireframing tools that support accessibility features to test your designs early on, such as the Able plugin in Sigma or Stark in Sketch.
Contrast and Colour Use: Ensure sufficient contrast between text and background colours. Avoid using colour as the only means of conveying information. Keep in mind that more than 8% of your users can be colourblind. Use a colour and contrast checker for peace of mind. I use this one: https://webaim.org/resources/contrastchecker/
Pro tip: keep an eye on how different elements look when you toggle the theme from light to dark, especially SVGS.
Text Hierarchy and Readability: Use semantic HTML — headings, lists, and other HTML elements to structure content for easy navigation. Ensure text size and spacing are conducive to readability.
<button>Good Button</button>
<div>Bad Button</div>>
Keyboard Navigation: Ensure that the login process can be navigated using a keyboard. This is crucial for users who cannot use a mouse due to physical limitations. Also, I love the fact that you can easily test this accessibility as many times as you need during the development stage.
Screen Reader Compatibility: Ensure that all elements of the login process are readable by screen readers. This includes clear labeling of input fields and error messages. I use the built-in feature in Mac OS called VoiceOver to make the initial test. However, make sure that you double-test your app with the actual screen reader users.
Simple and Clear Instructions: Use straightforward language for instructions and error messages. Avoid jargon or complex terms that might confuse users. Consider Flesch–Kincaid readability tests and aim for a score less than 60.0 (so 10th-grade students will understand your instructions)
Visible Focus Indicators: Implement distinct visual cues to show which element has keyboard focus. This aids users with visual impairments in navigating the form. In HTML and CSS, focus indicators can be customised using the :focus pseudo-class. For example, define a specific outline, background colour, or border style for focused elements. Here’s a simple CSS example that creates a custom focus style:
a:focus, button:focus, input:focus {
outline: 2px solid #ff0000; /* Red outline for focused elements */
outline-offset: 2px; /* Adds space between the outline and the element’s border */
}
This code snippet would apply a red outline around links, buttons, and input fields when they receive focus, making the focus state visible and distinct.
Error Identification and Feedback: Provide clear, easy-to-understand feedback when users make errors, guiding them on how to correct them.
Alternative Authentication Options: As discussed earlier, allow multiple ways to authenticate, such as biometrics or one-time passcodes, to accommodate different users’ needs.
ARIA Landmarks
Use ARIA (Accessible Rich Internet Applications) landmarks to help users navigate more complex login forms or processes. These landmarks can help screen reader users understand the structure of your page and navigate to different sections more efficiently.
Example:
<nav role=”navigation”>
<! – Primary navigation links ->
</nav>
<main role=”main”>
<! – The main content of the page ->
</main>
<aside role=”complementary”>
<! – Sidebar content that supports the main content ->
</aside>
Continuing improving
Revisit your login process yearly to ensure it is still up to date with the best security, user experience, and accessibility practices.
And the last one: the mantra of any user experience specialist is to test, test, and test again.
NNgroup states that with the help of 5 users, you can detect up to 85% of errors on your website. To gather comprehensive feedback, engage a diverse group of users, including people with various disabilities, in testing your login process.
Thank you for reading this far!
I hope you can now agree that the login process is more than just a functional necessity; it’s a pivotal moment that shapes the user’s perception and experience of your digital space.
By prioritising accessibility and user-friendliness in this crucial interaction, we open our doors wider to a more diverse audience and pave the way for a more inclusive and welcoming digital world.
If you’d love to make comments, ask questions and further discuss this topic, you are very welcome to join our friendly group of accessibility allies on Linkedin: https://www.linkedin.com/groups/14252310/
We organise free online and onsite events, talks and workshops on web accessibility.
If you would love to learn more about web accessibility and inclusive web, follow my blog on Medium or contact me via LinkedIn.
Thank you for sharing this article with your fellow developers and product owners. Let’s make the web accessible to everyone!
Building better logins: a UX and accessibility guide for developers was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
