The essential guide to enterprise login and sign up UX and UI
Short introduction
I’ve been working as a designer for 15 years. I’ve got many web applications and mobile apps successfully done during these years. I have always been passionate about experiences how I can solve UX and UI problems.
I always felt uncomfortable and confused with logging in or signing up applications. I’d like to find solution making these things much more convenient.
Let’s dive in
One of the most important processes is login, sign up, and forgot password. Here your app’s UX starts. If the UX is wrong the exit page rate will increase not to mention conversions. So the correct UX of login and sign up process is a key. Because filling a sign up or a login form is very painful whether on desktop or mobile devices.The biggest challenge is creating a seamless UX flow for enterprise login and sign up. We need to pay attention to security and don’t make our customers’ life hard.
Alternative methods to sign up or log in
There is a way to register more quickly. Use social logins or google.
This is a good way to improve your process even if there are users who want to register by email.
How to improve?
Communication
Communicate very clearly and shortly. For example, add a short list of benefits what users will get after signing up. Try to use clear and informative texts and button titles which can help to understand what will happen after you fill a form section or press a button. Don’t use inactive buttons.
Don’t use ‘Sign in’ and ‘Sign up’ together
How fast can you recognize the difference between ‘sign up’ and ‘sign in’?
‘Sign In’ and ‘Sign Up’ are quite close. If the button titles are quite similar your users would be confused. This is a very usual problem. They want to click once so don’t let them think too much. Be consistent and use simple but different texts and labels to avoid your users to be frustrated and spending extra and uncomfortable time to recognize what they have to do. Focusing on clear, short, and very simple conversation.
Separate Sign up and Log in
These are different! Don’t use these options on the same screen or page. From a user perspective, it’s very easy to select a wrong option and they will be confused about where they are and what they have to do.
UI Design suggestions
Make sure your UI design has color contrast and legible and understandable. Input fields and placeholders have to be sharp and recognizable. Button colors are different from other colors you use on your site.
Less is more
Use a very minimum amount of information during the whole process to make it comfortable and understandable. Be consistent when using controls. Use social login options to make login and sign up process convenient.
Security
Some companies want to validate their users and pay more attention to security. We believe that we can’t make a good decision about using verification by email or phone. In this case we use both but let customers decide which way they want to be verified. Don’t navigate your users to Log In after verification because they are already registered and it doesn’t make any sense to log in again. Let them logged in and start to use app.
Let people to use TouchID on their handheld devices because it’s reduce the pain.
Password
Security is important on web nowadays. But here is some suggestions how to improve your password creating process.
- Don’t use too many security rules but add a few for minimums and highlight them during password creation.
- Update it realtime
- Add an option to show or hide password.
Sign up flow
Check out the whole sign up flow what we use successfully.
Login, verify and set new password flow
This is the way how our users are using our login flow
Forgot password flow
Check out our forgot password flow
Summary
- Keep it simple
- Less is more
- Be short and informative
- Describe benefits to users
- Use social sign up and log in
- Don’t use duplicated fields
- Use TouchID on mobile devices
- Use alternative login methods (e.g. two-factors)
- For passwords, don’t use too many rules
- Use essential fields only
