30 Tips for Signup Flows (So That Users Stop Cursing You)

Attracting traffic to a website is not an easy task, and making visitors stay there is even more difficult. And for this, the website must be not just good, but very good. Otherwise, among the billion sites, there will probably be one that belongs to your competitors.

According to Forrester Research, I would assume that about 11% of people worldwide (not only in the US) leave websites if it asks too much information, and when the registration process is too complicated. And eMarketer reports 88% of all users intentionally leave website registration information blank or insert false information.

Getting newly registered users is vital. If you have customers, you have money. And knowing all this is so basic and fundamental, that seems all companies try to do everything to develop the perfect user registration process. It turns out, most companies suck at it.

Well, making a complete registration process is difficult, but some keys help to build a better registration process.

We’ve made a checklist for designing the ideal registration process on your website. Keeping that in mind will help you not to lose people and to make their experience more pleasant.

Tip #1 

Right time

Please pay attention to timing when you ask users to make a registration. The main point here is to build trust and never require users to sign up as their first interaction with your site. Asking them to make a registration in the first place can scare them away. It’s like a relationship. It is strange to ask a girl to marry you on a first date, right? You have to give her clear reasons why to do it and satisfy her during the relationship to make her agree. This is what we will talk about further.

Tip #2

Clear Reasons

Always make it reasonable to create an account, do not propose to register when it’s unnecessary. Make sure you are considering the user when collecting information.

It’s always better to explain what benefits the user will get from registration. Like here, they told what happens once you register, they gave clear reasons and now it’s not so “scary” for a visitor to make this step. You have some special offers for registered users? Great, tell them about it. You have a super useful mailing? Awesome, let them now!

Atlassian sign up form

Tell the girl that you will be a good husband and give her clear reasons.

Tip #4

Copy & Microcopy

Have more informative texts. Do not write for yourself — you already know what to do. All your work is dedicated to a user, you wanna make his life more comfortable. Explain what is going right now, what you want him to do next, help him navigate the situation.

Tip #5 

‘Sign In’ and ‘Sign Up.’

How fast can your users spot the difference between ‘sign up’ and ‘sign in’? It’s quite easy for users to get confused. You don’t want users to click one instead of the other. Because when they do it, that’ll freak them out. They don’t want to think, don’t want to waste time to solve your quests.

Screenshot of the Menu bar

And don’t bother your girlfriend, don’t make her think deeply about your actions, do not use ambiguous phrases. That will make her think. And only God knows how she will interpret your words and actions.

Screenshot of the menu bar

Tip #6

Keep It Minimal

Don’t distract visitors. They can pay to much attention to the background, primary and utility menu. So if you make all this disappear during registration, all that left for users is to fill it input fields and press “Submit”.

But you should remember this:

  1. Some regular users can open registration form by mistake, so keep a “Sign In” button, just in case.
  2. Give users answers to questions they probably can have before they sing up. Make a “Help” button (or phone number) for potential users.

Tip #7

Company and Benefits

Tell users what they’re getting out of registering on your website. Because no one wants to do this. So you have to tell them why it’s worth it. Pay attention to the advantages of the company, how it stands out in the market. Make the user feel selected by joining your company.

Show your girlfriend you’re one of a kind, make her feel privileged next to you. Help her understand how great you are, because you are;)

Tip #8

Make It Faster

If there’s an option for saving a required input field for after registration is complete, do it! Apply lazy-registration principles and ask for additional information later.

Sign up form

A wish to know your users more is a good thing, but it may be annoying for them. When you want visitors to fill in name, email, zip code, pet’s name and greatest childhood fear, it can make them wanna leave. 86% of visitors say they don’t finish the registration process because it’s too detailed and inquiring.

The highest conversion rates have pages that limit their forms to 2–3 fields. Impressive, that pages got 50% more conversion rates by reducing form from 4 fields to 3.

Try to use progressive profiling. It’s when you break the registration process into multiple stages. It’s much easier for users to commit with a short form, instead of with a longer one. It’s easier for people to complete a task if they have already made even small commitment.

Asana registration form

Only one field, no visual distractions. This is a high conversion strategy. Even if the next page has more fields to fill out, and it has, it’s still much more likely that users follow through.

Don’t ask a girl to marry you at the beginning, ask her to be your girlfriend first, then start living together. Let her understand what’s waiting for her next.

paypal registration form

Tip #9 

One-Click Registration

Allow your users to register and log-in through a third party social media platform.

The social media route can let you obtain data on customers that you may not have been able to retrieve before, so it’s possible to have fewer form fields with higher conversions.

Social authentication (or social sign-in) help visitors to make a fast sign in using Facebook, Twitter and even an Apple ID or Google account. 77% of users want sites to offer one-click registration (according to Marketing Pilgrim). This gives you a double advantage. You help users make registration faster, and you gather more valid data about them.

mailchimp registration form

Tip #10

Use Waterfall Flow

  • Keep the column of input fields with labels above the area, not side-by-side.
  • Create a flow from top to bottom.
  • If many input fields — divide them into steps.
  • Give users a visual cue about steps.
  • Try to not exceed four steps in total.

Tip #11

Adaptive Placeholders

Adaptive placeholders examples

Make clear for users what is going on when they want to sign up. What fields are required, what they do correctly, and what has to be edited. It’s very convenient for the user and saves his time and nerves.

Because you wanna input all info correctly when you have finally decided to marry and standing right in a registry office. It will be terrible if the registry office employee does not immediately tell you about an error.

Tip #12 

* Let autofill guides your precious

Don’t make users’ lives more complicated. Help them to enter their data correctly the first time:

  • For phone input fields — fill in the dashes.
  • For dates — add the slashes and so on.
  • Make the transition from one field to the next automatically.

Tip #13 

Do not use usernames only

So as usernames have to be unique, users might need to spend a few minutes before they end up with a proper name, which they can easily forget. Offer multiple options for login (Phone, email, or so), rather than just username.

People make dozens of registration per year and remembering all usernames is impossible. Is it Karen_Smith or SmithK or maybe KarSm541)876hd? Don’t torture them, give some options instead.

Every girl wants a unique nickname, but that doesn’t mean you will not call her by name.

log in form

Tip #14 

Do not repeat fields

Optimise field that must be entered twice for confirmation (email addresses, passwords).

Users can be annoyed if you ask them the same question several times.

You can auto-fill some fields with an app that is programmed minimally for those questions that you must ask twice.

If visitors must enter age or address in the “general information” section and the “housing form”, make both your and their lives easier. Make the answers they gave previously appear the second time.

If your girlfriend agreed to be your wife, will you do better if you propose her a couple more times? No, she will just send you to hell.

Tip #15 

Highlight required fields

Make sure to highlight required fields clearly. Use colours or labels for telling users about the necessity of fulfilling.

Do you know what’s one of the biggest nightmares of e-commerce websites? Such attributes as contact information, credit card information, billing and shipping address. Companies that have a lot of different products and have big orders need this info from client to dispatch products. Yes, the majority of users will fill in all the info, so as those fields are mandatory to complete the checkout process. But don’t expect people to do it if you will make a mysterious labyrinth out of this process. Make this process logical and understandable for the user, this will increase the conversion rate.

Tip #16 

Check in time

86% of users don’t finish registration process if it takes too much time. So if after a user fills in a long form and after submitting you tell him to do it again because his password doesn’t contain a symbol, he will freak out. That means you have to say to a visitor about the mistake as soon as he leaves the field, not after he presses the Submit button.

Mobile phone with a sign up form on its screen

You can use validators to validate your customer’s input when they type it.

Using inline validation can increase the success rate by 22%, decrease completion times by 42%, and increase satisfaction by 31%.

Tip #17 

Show/Hide password

The users make fewer mistakes while they can see what they are typing. Make an option when the user can see and hide the password whenever he wants.

Tip #18 

Strength Password Meter

Allow the user to see the level of security in real-time and with visual helpers. Password strength is an important thing, and you want your users to be secure. So help them to see how strong their password is and help improve it if needed.

old dropbox screenshot with the password validation

Tip #19 

Password constraints upfront

Show password constraints upfront and update it in real-time. Don’t let them see it after they click “Submit”, don’t waste their time making this operation over and over again.

password validation during sign up

Tip #20 

Avoid complex password rules

Do not define a maximum length for passwords. Avoid complex password rules.

Security is vital, but don’t turn the creation of password into rocket science. Usually, users have some options of password, and if you make too complex password rules, the visitor can probably forget such password. So don’t ask them to use numbers, punctuation marks and instance of caps, make it easy. Just show them how strong their passwords are, and it will be users’ decision to strengthen it or not.

password validation form

Also, if you’re asking a user to confirm their password by typing it in again, don’t wait until the entire form is filled out to ensure they’ve typed it in correctly both times; let them know right away before moving on to another form field that their passwords do not match.

Don’t make things too complicated, your love ones don’t like that.

Tip #21 

Forgot password

Recovering passwords should be available on any login process.

Ever go to what you thought was a brand new site, only to find out you’ve apparently not only been there before but actually registered with them? If you’ve tried to register again with the same email address, you know it’s quite impossible to get to the next step unless you somehow remember the password you selected. A Janrain study reveals that 45% of consumers will leave a website after forgetting their password or log-in information. I’ve definitely been in that camp when a password reset option isn’t clear and simple. Unless your user can complete their end goal without registering for your website, make it easy as pie for them to reset their password, so they don’t abandon your site.

Log in form

Tip #22

Validate Using Pink! Or at least Color Theory

Red, green, and yellow are instinct colours. Using these creates a simple anti­-confusion solution for your users.

Tip #23

Provide guidance

Show users the proper input format to save time and reduce guesswork. Mark fields that must be inputted with red, and show what the user has done correctly with green.

Registration form, two examoples

Tip #24

Manage errors

Do you feel this pain? Then remember:

  • If there’s a problem, briefly and visually pronounce it and tell how to fix the issue.
  • Do not scold the user if he did something wrong.

Users always will fill in the form with mistakes, and it’s normal. If the form is filled incorrectly, show them in which field they have an error and explain how to fix it. Mark it with bright colours to make users find the issue faster. The best variant is when the website automatically scrolls to the field with a mistake.

registration form — example of fields validation

So you have to talk to your girlfriend, tell her what is wrong, and how you want to act in a situation. If you do not say a word, she will think things are not working and leave.

Tip #25

Grant Access Immediately

  • Once users register, log them in immediately.
  • Do not force users to confirm their email address before being able to log in.
  • Grant users access and then indicate to them that they need to confirm their email address within a specified time frame.
Cat in a costume blaming for getting him in and getting him out

Tip #26

Split Up

  • Split up the registration process into several completely discreet interactions.
  • Each interaction should only ask for what is needed on an immediately need-to-know basis.

Many e-commerce sites combine registration process and checkout process. That means user have to spend more time, and there are more chances for them to get frustrated. Divide this process into smaller, clearly labelled steps.

Registration form in the internet store

If you plan to make a big wedding, you probably can die if you try to do all this in one day. So it’s better to do it in separate days; otherwise, you will get extra exhausted.

Tip #27

Delete Registration Form

(*Can be performed only by professionals. Please do not repeat without proper preparation.)

  • Use just one unified form/page for credentials.
  • If the email and the registered database then ask to enter the password and log in.
  • If it doesn’t match the sign-up form copy appears.
  • The page copy should be clear enough to identify the steps needed to register or sign in.
Scheme how to creat one screen for registration and log in

But. Keep in mind security issues.

Tip #28

Anonymous Access

Allow users to have some timely or functionally limited access before asking them about the registration.

And also allow users to make a purchase without registration. Of course, it’s better to register now if they are going to return later to check order history, account or shipping info. But what if the user is in a hurry? Or he wants to buy from you only this one time?

So I guess it’s better to see a transaction completed, then just get more info about potential clients. But of course, it depends on your goals and tasks.

Tip #29

Friction-based Signup

If needed use already prepared blocks with answers or the list of solutions in the dropdown. This will increase speed and free users from guessing.

You can add this feature from the backend to display an introductory text for users so that it was clear for them what kind of info you require. People may (and often do) fill in incorrect data, so save them from it.

Friction based sign up form

Tip #30

Mobile-Friendly Signins, Signons, Registers

In 2020 you have no excuses if your mobile version is not done well. More then 50% of traffic comes from mobile devices, and Google ranks sites according to their mobile suitability. You want users to visit your websites and register there regardless of their location and time, so make it easy for them.

Your mobile version has to be convenient and straightforward, it has to have all functions and content as a desktop version. Optimize it, make it simple and logical, make a clear structure and add call-to-action. That’s a way to success.

– Desktop –

website example

– Mobile –

mobile view of a website

So what?

Remember that you do all this for your users. Make it comfortable for them, don’t add unnecessary fields and blocks, don’t take too much their time. Love your users, and they will love you back (maybe), that’s for sure (not sure).

0
0
vote
Article Rating
Founders Guideshttps://creattiv.net
My name is Reza Barauntu. I am a Web Developer, Business adviser, Consultant, Web Designer, Idea generator, Technologist, Web guru, and LifeGroup and Community Leader at Life.Church Online. I design and develop experiences that make people's lives simpler. Follow us on Instagram @founders.guides
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

Sponsor

Discover

Latest

The Best Website-Ready Images to Launch Your Online Presence

A beautifully designed website needs beautiful images to match. Check out the best stock photos for websites, high-quality images to use across sites.

A Checklist to Improve Your Product UI (With Examples)

This story is less about design trends and fashion, and more about foundational design principles, which are often forgotten. Here is a...

11 Reasons Why Most Entrepreneurs Fail

CREATTIV.NET - Entrepreneurs starting new businesses is what drives the economy, innovation, and job creation. However, about half of those new businesses fail in the...

USA Cities Animated | Abduzeedo Design Inspiration

Today I want to share some really cool illustrations but they are not just beautiful, they are also animated. The work was done by Latham...

Parsing complex JSON in Flutter

I have to admit, I was missing the gson world of Android after working with JSON in Flutter/Dart. When I started working with APIs in Flutter,...
0 0 vote
Article Rating
0
Would love your thoughts, please comment.x
()
x