Even though user registration is quite a common thing, it’s also one of the trickiest parts of web design. You need to make sure that your sign-up page isn’t an obstacle for your users by following these tips for designing a better registration process.
Do not Use ‘Sign In’ & ‘Sign Up’ Together
How fast can you spot the difference between ‘sign up’ and ‘sign in’ on the image below?
The problem is that ‘Sign In’ and ‘Sign Up’ are quite close. When buttons look too similar and both use the same verb in their labels it’s pretty easy for users to get confused.
Users might click one instead of the other. Usually, this problem frustrates the users who try to log in because they make the mistake the most. This happens because users scan the screen quickly and assume that the first call to action that catches their attention is the correct one. Even if users didn’t make the mistake, they’ll spend extra time to distinguish the two buttons.
Users shouldn’t have to pause and think what button should they click.
If you want to provide a good user experience, avoid using ‘sign up’ and ‘sign in’ together. Instead, make the button distinct from each other by using different verbs in labels:
…and different visual appearance for buttons (colors and styles) to make the difference more evident:
Eliminate as Many Fields as Possible
When registering a new user, ask the minimum you need to get you started.
The fewer form fields you can get away with in your registration process, the less likely users will abandon it. Consider what information you absolutely must gather:
- One of the things any registration form can do better is to remove the double entry password and email field. There are other solutions for capturing typos.
- From a UX perspective, it’s better to have no optional fields. Assuming that if a piece of information is not required there’s no point in wasting a user’s time. You can always ask further information down the line. But if there are still optional fields in your registration form, make sure to clearly highlight them with label Optional:
Login forms vs registration forms
Many sites and apps use almost the same number of input fields (email, username, and password) for login and registration forms and showing the two side by side:
However, it’s very important to clearly differentiate the registration from the login form and to minimize the chance of users accidentally attempting to log in via the registration form.
For example, Twitter’s login and registration forms do not just look different, but they also have different colors for CTA buttons and proper help text.
Let Users See Their Password
A common problem during login and registration is mistyping a password. And this is fairly easy to do it because the password field is usually masked (because of security reasons). People might mistype their password, especially on mobile devices.
Many sign-up forms try to prevent mistyping errors by using the “confirm password” field when creating a password:
While the confirm password field seems sensible, using it doesn’t completely solve the problem.
Users make more errors when they can’t see what they’re typing while filling in a form.
Don’t make the user fill in the same field twice! Implementing a ‘show password’ option is a proper way to prevent mistyping errors. You can place a checkbox near the password field. When users click it, it’ll display their input unmasked.
You should clearly identify and explain form field errors. If a field isn’t completed correctly, don’t just tell users they made a mistake. Show them in which field the error occurred, and explain the correct way to fill out the field.
User-friendly Error Messages
“For security reasons, your password must be longer than 6 and shorter than 10 characters, contain at least one capital letter, a number and a symbol.”
This is a typical password requirement, but demanding users to consider all of the field requirements isn’t a proper way of explaining the problem. Take a cue from Mailchimp and indicate user progress with a “password strength” visual.
Real-time Data Validation
Real-time validation immediately informs users about the correctness of the provided data.
This approach allows users to correct the errors they make faster without having to wait until they press the submit button to see the errors. However, form validation shouldn’t only tell users what they did wrong, it should also tell them what they’re doing right. This gives users more confidence to move through the registration form.
Real-time validation works especially good for less obvious answers, such as picking a unique username or a strong password. Twitter is an obvious example here. On the screen below you can see that the form informs me that this email is already in use and offer me some options (either to login or recover my password).
The challenge of Usernames
If you ask users to create a username during registration, most probably you’re dealing with following difficulties:
- Since usernames have to be unique, users might need to spend a few minute before they end up with a proper name, because preferred usernames have already been taken by other users.
- Users end up registering with a brand new username that they hardly remember after a while.
Allow User to Log in Via Facebook, Twitter or Google
Why force users to create another set of login details when you can let them sign in via an external account, such as Facebook, Google or Twitter? This feature can alleviate registration headaches.
Comparing to the standard registration with email, it has both pros and cons:
- Pros: Users don’t have to fill out the registration form, to create another pair of username/password and to verify emails, hence can sign up in like 10 seconds instead of 10 minutes. And most important, users don’t have to remember a new usernames/passwords.
- Cons: Since the information about the user is loaded automatically it raises a huge privacy concern and not everyone is likely to be happy to share their profile data. For such cases, you should have traditional login system running in parallel.
Keep Users Signed In When They Register
Common issues with registration are requiring users to log in immediately after registration. This extra step usually frustrates the user.
You should design the app so that new users stay signed in immediately after registration (unless security is a real issue).
Make Password Recovery Painless
It’s very important that if users do forget their password (and they will) that this is well handled by the login process.
Make it easy for users to reset their password so they don’t abandon your service. As a starter always have a clear ‘Forgotten your password?’ link for your login form and this link should be visible all the time (not just after the incorrectly entered password)
Bonus. Follow a ‘Try Before You Buy’ Strategy
Users will abandon an app/online service that asks them to provide personal information upfront unless there’s some form of immediate payoff (e.g. ordering a taxi). In particular, services with low brand recognition must clear a higher hurdle when they ask users to register at the start of the experience because forcing registration too early can cause more than 85% of users to abandon the product.
It is better to deliver a limited set of features immediately than nothing at all. Thus, follow a ‘try before you buy’ strategy. Try before you buy strategy is about giving new users the ability to experience your product so that they’ll personally interested in signup. People are more likely to sign up and provide real personal information if they just knew what sort of product and experience they receive.
A try before you buy pattern doesn’t mean you can’t ask a user to create an account. It just means you ask for that after delivering value for the user.
When you strip every barrier away from signing up, what you get is lots of sign-ups. And lots of sign-ups doesn’t translate automatically to the lots of customers. Customers are the result of a series of events. And creating an efficient registration process is just a first step in this direction.
About the author:
This post originally appeared on babich.biz, written by Nick Babich. Nick is a software developer who’s passionate about user experience.
Emotional Design: For products we remember
Today, it is no longer sufficient to design a product that just works. Products need to have an amazing user experience to stand out from the crowd, to be successful, and to have a user base, who enjoys using them. In a nutshell: products need to be more than mere functional. The designers Don Norman…
10 powerful things you didn’t know about CSS3
Cascading Style Sheets, the next level. CSS3. With an array of increased creative opportunities, CSS3 is much better than its predecessor CSS2, and gives developers that much-desired control on a web page’s look and feel. We took a closer look at CSS3 and want to show you 10 things you might not know about CSS3.
How to build a cloud-based SaaS application
More and more SaaS businesses are taking off the ground today. And it’s great. The SaaS business is a super-fast growing industry attracting more and more people and companies. These organizations are more and more floating applications in the cloud. Scaling in the cloud has some essential benefits and risks as well. In this article…
5 Types Of User Acceptance Testing
This article is brought to you by Usersnap, a user testing tool that helps you to communicate visually. Get a 15-day free trial here. The methodology of User Acceptance Testing (UAT) is pretty straight-forward. The implementation itself requires some in-depth knowledge on the available types of User Acceptance Testing, though. User Acceptance Testing is the…
Developing a SaaS product for a global audience #InsideSaaS
More and more SaaS companies are taking off the ground. Building and selling a product to a global audience has never been easier. With great tools and infrastructure around, even small teams can build a global product. Today’s blog post covers the challenges of developing a global SaaS product and summarizes our lessons learned from…
Hands-on experience with Hugo as a static site generator
A while ago – in April 2015 – we launched bugtrackers.io as a small side project. Since then, the site has grown from a three-pager to a website with dozens of interviews. The increasing number of pages & therefore line of code made us look for ways to improve our internal workflow. We also ended…
Streamline your client approval process
Let clients draw directly in the browser.
Fix bugs in minutes with screenshot & metadata.
Trusted by 1000+ customers worldwide.