How often have you spent more time looking at a registration or login page than the actual website or app? Okay, maybe this is a bit of an exaggeration, but I’m sure sometimes it feels this way.
Let’s face it… registration and login forms are sometimes (or all the time) a pain in the rear-end. As simple as it may seem, designing good UX for login and registration screens is crucial for setting the overall user experience. There isn’t one straightforward way to design this as the purpose of your product, whether it’s social media, e-commerce etc., will dictate the approach and requirements. However, regardless of the context, the login/registration page is essentially the gateway to the real content. Users use your product specifically for that content (not to create an account for fun), so they shouldn’t have to face a barrier to get there.
Main goal: aim for speed and efficiency. Let your users in as quickly and pain-free as possible.
Nielsen Norman Group, a research and consulting firm leading the way in the UX field, created A Checklist for Registration and Login Forms on Mobile, which provides a great starting point for the do’s and don’ts of registration and login design. And while mobile presents different challenges with its size and functionality, it is nonetheless beneficial to consider the following best practices that scale across both mobile and desktop platforms.
Messaging
Let your users know why they’ve landed on this page and the benefits of continuing through. It’s important to encourage action, but keep in mind (again) speed and efficiency, so be clear and concise in your language. You don’t want to overwhelm the user from the get go. This can include the words used in call-to-action buttons. A phrase like “continue with email” could be more ambiguous than just saying “log in with email”. Be conscious of how users might interpret these and go for what is most meaningful.
Aim for simplicity
As a gateway to the real content of your product, getting users through quickly and designing for functionality and practicality will set the right experience for the rest of the product. With that said, there are several things to keep top-of-mind…
Request only what’s required
An email and password is really all users need to log in (unless phone numbers etc. are required for verification), so registration pages should reflect that as well. Any other information such as name, username, or any type of personal details can come after as a profile setup.
Email instead of username
I personally don’t like providing a username when registering an account. I’m forced to come up with a unique username, and even when I have one that I use for other accounts, it may be taken already. An email is much better since everyone’s address is already unique, and this is often required for contacting users anyway in the future, so it’s already a required detail.
Text field placeholders
This applies to any forms, but don’t assume users will remember what a text field is requesting as soon as they click on it. Anyone would appreciate a reminder.
“Remember Me”
This may be a minor thing, but allowing users to save their login credentials can be a time-saver welcomed with open arms. It’s like getting VIP service where you don’t have to prove you’re legit.
Error states
Response to actions taken by users is always necessary. When it comes to error states on a registration/login page, the approach can be divided. A good UX approach is to specify what the specific error is, so users know exactly what to correct. From an engineering standpoint, providing ambiguity is preferred, especially in security-sensitive products. Simply saying “Your credentials are incorrect” without specifying does provide more security but could potentially be a frustrating experience for the user. Either way works. Use your best judgement.
Validation
This is especially tricky on mobile since users are forced to switch between apps to validate their accounts in their email. This can be a real pain point, and arguably it’s a similarly frustrating experience on desktop. This is still required by some companies for various reasons, so whenever possible, allow users to validate at a later time, so they can start using your product right away, or suggest SMS validation. Or better yet, don’t validate at all.
Passwords
Amongst the many bad user experiences I’ve encountered, typing passwords on mobile is one of the worst. It takes significantly longer to type a password on mobile than it does on desktop. Since passwords require typically a combination of upper/lowercase, numbers, and sometimes symbols, users are constantly forced to switch between the various keyboards. While there is no way to get around this, following a few best practices can certainly ease the pain.
Forgot password link
People forget passwords. It’s natural. And especially on mobile devices that are meant to provide convenience on the go, finding passwords you have written down in moments when you forget is a pain. Include a password reset link so users can quickly create a new password.
Show/hide passwords
Not only do people forget passwords, they misspell passwords all the time too because the characters are hidden. The remedy, have a “show” option, so they can see what they’re typing instead of just ********.
Move away from “Confirm Password” fields
The purpose of this field is to ensure users enter their password correctly without any errors when registering an account. However, human errors occur all the time, so what if users enter the same incorrect password twice? This can easily happen if users simply copy and paste the password. I’ve done this many times. It’s not foolproof. Having a “show” option for the password would do the trick and the “confirm password” field would not be needed.
Password strength
For an extra level of security, display the strength of the password as users type in the characters. Show this in real time for an instant response. While this is an important security measure and requires password constraints, it’s also best to minimize those constraints. This may differ with context (i.e. banking website vs social media app), but aim for only two or three constraints so users are not forced to create complicated passwords that they might end up forgetting.
External account login
Some users still prefer to login with the old-fashioned email and password (I know I’m one of these people), but the process can be simplified further with external account logins like Google or Facebook. This eliminates the need to set passwords or follow the practices noted above as it utilizes accounts which users already have set up. So, one less credential to remember, which anyone would be happy about.
Optional login
Having an account typically provides a better experience for users as it offers additional benefits, but often times, it’s required to follow through on specific actions. With that said, make registration and login optional until users reach that required point. Conversion rate increases more when you allow users to see the content of your product and what you have to offer first. If they can’t see this, how would they know if they want it?
Conclusion
Like any part of the design process, there are always different solutions to a problem. While the UX of registration and login has become standardized with various features and components, it’s always a good practice to step back and think about what’s required to provide the best experience for your users. Giving this process a second thought, there’s no reason why you won’t nail the design each and every time.
