Do not Use \u2018Sign In\u2019 & \u2018Sign Up\u2019 Together<\/h2>\n\n\n\n
How fast can you spot the difference between \u2018sign up\u2019 and \u2018sign in\u2019 on the image below?<\/p>\n\n\n
![\"registration](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/signin-signup-registration-design.png\")
<\/a>The problem is that \u2018Sign In<\/em>\u2019 and \u2018Sign Up<\/em>\u2019 are quite close. When buttons look too similar and both use the same verb in their labels it\u2019s pretty easy for users to get confused.<\/p>\n\n\n\n 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\u2019t make the mistake, they\u2019ll spend extra time to distinguish the two buttons.<\/p>\n\n\n\n Users shouldn\u2019t have to pause and think what button should they click.<\/p>\n<\/blockquote>\n\n\n\n If you want to provide a good user experience, avoid using \u2018sign up\u2019 and \u2018sign in\u2019 together. Instead, make the button distinct from each other by using different verbs in labels:<\/em><\/p>\n\n\n …and different visual appearance for buttons (colors and styles) to make the difference more evident:<\/p>\n\n\n <\/p>\n\n\n\n When registering a new user, ask the minimum you need to get you started.<\/p>\n\n\n\n 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:<\/p>\n\n\n\n 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:<\/p>\n\n\n However, it\u2019s 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.<\/p>\n\n\n\n For example, Twitter\u2019s login and registration forms do not just look different, but they also have different colors for CTA buttons and proper help text.<\/p>\n\n\n 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.<\/p>\n\n\n\n Many sign-up forms try to prevent mistyping errors by using the “confirm password<\/em>” field when creating a password:<\/p>\n\n\n While the confirm password field seems sensible, using it doesn\u2019t completely solve the problem.<\/p>\n\n\n\n Users make more errors when they can\u2019t see what they\u2019re typing while filling in a form.<\/p>\n\n\n\n Don\u2019t make the user fill in the same field twice! Implementing a \u2018show password<\/em>\u2019 option is a proper way to prevent mistyping errors. You can place a checkbox near the password field. When users click it, it\u2019ll display their input unmasked.<\/p>\n\n\n You should clearly identify and explain form field errors. If a field isn\u2019t completed correctly, don\u2019t 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.<\/p>\n\n\n\n \u201cFor security<\/a> reasons<\/em>, your password must be longer than 6 and shorter than 10 <\/em>characters, contain at least one capital letter, a <\/em>number and a symbol.<\/em>\u201d<\/p>\n\n\n\n This is a typical password requirement, but demanding users to consider all of the field requirements isn\u2019t a proper way of explaining the problem. Take a cue from Mailchimp and indicate user progress with a \u201cpassword strength\u201d visual.<\/p>\n\n\n Real-time validation immediately informs users about the correctness of the provided data.<\/p>\n\n\n\n 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\u2019t only tell users what they did wrong, it should also tell them what they\u2019re doing right. This gives users more confidence to move through the registration form.<\/p>\n\n\n 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).<\/p>\n\n\n\n If you ask users to create a username during registration, most probably you\u2019re dealing with following difficulties:<\/p>\n\n\n\n Why force users to create another set of login details when you can let them do single sign on<\/a> via an external account, such as Facebook, Google or Twitter? This feature can alleviate registration headaches.<\/p>\n\n\n Comparing to the standard registration with email, it has both pros and cons:<\/p>\n\n\n\n Common issues with registration are requiring users to log in immediately after registration. This extra step usually frustrates the user.<\/p>\n\n\n You should design the app so that new users stay signed in immediately after registration (unless security is a real issue).<\/p>\n\n\n\n It\u2019s very important that if users do forget their password (and they will) that this is well handled by the login process.<\/p>\n\n\n\n Make it easy for users to reset their password so they don\u2019t abandon your service. As a starter always have a clear \u2018Forgotten your password?\u2019 link for your login form and this link should be visible all the time (not just after the incorrectly entered password)<\/p>\n\n\n Users will abandon an app\/online service that asks them to provide personal information upfront unless there\u2019s 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.<\/p>\n\n\n It is better to deliver a limited set of features<\/strong><\/em> immediately than nothing at all. Thus, follow a \u2018try before you buy\u2019 strategy<\/strong>. Try before you buy strategy is about giving new users the ability to experience your product so that they\u2019ll 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.\n
![\"Registration](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/registration-form-example.png\")
<\/a>![\"registration](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/registration-form-design-buttons.png\")
<\/a>Try Usersnap for Customer Feedback <\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n
Eliminate as Many Fields as Possible<\/h2>\n\n\n\n
\n
![\"registration](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/registration-form-design.png\")
<\/a>Login forms vs registration forms<\/h2>\n\n\n\n
![\"register](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/register-forms-login-forms.png\")
<\/a>![\"twitter](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/twitter-example-registration-form.png\")
<\/a>Let Users See Their Password<\/h2>\n\n\n\n
![\"password](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/password-registration-form-design.png\")
<\/a>![\"design](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/show-password-registration-form-design.png\")
<\/a>Provide Help<\/h2>\n\n\n\n
User-friendly Error Messages<\/h2>\n\n\n\n
![\"user-friendly](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/userfriendly-registration-forms.png\")
<\/a>Real-time Data Validation<\/h2>\n\n\n\n
![\"registration](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/registration-form-design.gif\")
<\/a><\/figure>\n<\/div>\n\n\n![\"twitter](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/twitter-example-registration-form-2.png\")
<\/a><\/figure>\n\n\n\nThe challenge of Usernames<\/h2>\n\n\n\n
\n
![\"design](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/design-registration-form.png\")
<\/a><\/figure>\n<\/div>\n\n\n
Your site or app should allow users to log in with their email address or phone number:<\/p>\n\n\n![\"design](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/design-registration-form-2.png\")
<\/a>Allow User to Log in Via Facebook, Twitter or Google<\/h2>\n\n\n\n
![\"design](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/design-registration-form-3.png\")
<\/a><\/figure>\n<\/div>\n\n\n\n
![\"design](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/design-registration-form-4.png\")
<\/a>Keep Users Signed In When They Register<\/h2>\n\n\n\n
![\"designing](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/design-registration-form-5.png\")
<\/a>Make Password Recovery Painless<\/h2>\n\n\n\n
![\"designing](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/design-registration-form-6.png\")
<\/a>Bonus. Follow a \u2018Try Before You Buy\u2019 Strategy<\/h2>\n\n\n\n
![\"designing](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/design-registration-form-7.jpeg\")
<\/a>
<\/a>
A try before you buy pattern doesn\u2019t mean you can\u2019t ask a user to create an account. It just means you ask for that after delivering value<\/a> for the user.<\/p>\n\n\n
![<\/a>A try before you buy pattern doesn\u2019t mean you can\u2019t ask a user to create an account. It just means you ask for that after](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/registration-form-tryme.png\"){kind=link}