Published on <a href="https://blog.prototypr.io/10-signup-page-do-and-dont-d4bd93ba2c8f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Shir Zalzberg 
“Honestly, they can sell my data to some shady 3rd party” This is the first thought that I have when I come across a signup form I’m not comfortable with.
Sign up forms are not the most likable web pages. They force the user to share personal information that he might not be comfortable with sharing, and as a result these pages usually have very high bounce rates. Whether your sign up form is for a product, mailing list or a webinar, the goal is always the same — have as many users sign up as possible. When we make a signup form, we need to consider what would be the best experience for our users, what will make them want to finish the form and sign up. In this post I will share my top ten tips for creating the perfect sign up form.
<ol>
<li>How many fields do you really need?</li>
</ol>
I’m pretty sure you’ve heard that the fewer fields the better, and indeed <a href="https://www.imagescape.com/media/filer_public/06/94/0694c7f4-8914-4598-8871-b857fbc12737/form_case_study.pdf">Imagescape.com</a> confirmed this in their 2008 research, showing that signup forms with 4 fields or less had the most sign ups. It’s been almost a decade since that research, and today we know that it’s not about the amount of fields but about the significance of those fields. We should ask ourselves “how many fields do we actually need?”. If you need to ask your user something, have a field for it. If a field asks something that you can live without, take it out of the form. Keep questions that you really have a reason to ask.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ulXl4hDUOwfpkoCDV2tTUA.png">
2. Too many fields? Divide them to separate pages.
In some cases, the signup process will require a long form (let’s say 8 fields or more), which the users might find intimidating. In such cases, having a multipage form can be a good option.
Separating your form to several pages also creates better readability. It’s more comfortable to read short segments than look at a crowded screen with numerous fields. A <a href="https://www.formstack.com/report/form-conversion-2015">2015 report by Formstack</a> shows that forms with separate pages got better results by 9% than single page forms.
If you do decide to separate your form, I strongly recommend adding a wizard to inform your users in which stage of the signup they are on. Clarity regarding the signup process will generate more trust from your users, and prevent situations where users feel this form “will never end” and leave it in the middle.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DNY2BPEzKjGBwpc4V2dETQ.png">
3. Stick to a single column.
Computer screens are rectangular, which makes the idea of a form with multiple columns very inviting. So why shouldn’t we use this real estate?
Well.. there are some very compelling arguments for that:
A. It hurts readability. Forms are read from the top down. Having multiple columns hurts that process, and creates confusion regarding the order of filling the fields. B. It makes it so much harder to make a mobile version. After all, most users hold their phone vertically and not horizontally. C. It creates clutter. Our goal is simplicity for our users.
Convinced? Great! Let’s stick to one column.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*06hsAA5hb0aBIT69inCtiQ.png">
4. Field names go above the field (and not inside it, you maniacs!)
Nielsen Norman Group (whom I refer to as the holy saints of UX) <a href="https://www.nngroup.com/articles/form-design-placeholders/">posted an article</a> in which they claimed that placing a field’s name inside the field makes it more difficult to for the user to track his progress, and it slows down the form filling time. Placing the field name above the field makes it easier to read, and promotes faster filling time. Another advantage which we covered already is keeping the form in a single row, which makes it easier to adapt the form to mobile screens.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DRN0YPlK--T6-SPfJxyyZw.png">
5. Say no to the Asterisk sign
Remember those asterisk signs that mark required fields?
Beyond being annoying and make us look for non required fields in the form, they also represent the wrong approach to form design. As you recall from section 1, I asked you “How many fields do you really need?”; If there’s a field that isn’t a must, keep it out of your form. There are several fields that we often think are a must, but they’re actually very easy to let go of:
<ul>
<li>Username- Use the user’s email as a username, that way he will surely remember it.</li>
<li>Confirm password- instead of asking the user to repeat it in two different fields, let your user see the password they wrote with a “show password” checkbox or button. Chances are, no evil villain is standing behind your user waiting to steal his password, and if there is — it means your product is interesting!</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Z9g4DBWgXQjFd7NkWouFkA.png">
6. Don’t hide your instructions.
Your fields might not be as clear as you think they are.
Even a well known field such as “Password” can become tricky. We all came across those forms which ask for a password between 11 to 13 digits, with prime numbers and a capital letter every other digit.
First, avoid complex fields whenever you can. If something isn’t clear, it’s your fault, not the user’s fault. If you can’t avoid a complex field for some reason, keep your instructions clear, and don’t wait for the user to fill it wrong before you tell him there’s a right way to do it. Have clear instructions and place them next to the field, making sure the user understand which fields you’re referring to.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OswIcP7ob1F82yMSxsOnBA.png">
7. Give your users feedback
When we give our user feedback in every field he fills, we gain two things!
First, our user instantly knows if there’s a field he missed or filled wrong. Second, we gain the opportunity to create good interactions with our users, and increase their interest in our product. For example, automatic responses with a touch of humor can spark curiosity, and make the user fill more fields just to see what happens next.
It’s important to keep your feedback clear. If a field was filled correctly, use a known sign for success (check sign, green color, thumbs up…). If the user made a mistake, mark it in a clear way (X sign, red color, exclamation point…). Like I mentioned in section 6, if there’s a problem, we need to have a clear explanation for it.
And one more thing — give your user a chance to do it right. Don’t tell him there’s a problem while he is still filling that field. Let him finish filling the field before you tell him something is wrong.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BEfIwo5gvjmwhvBJ2Nmj6g.png">
8. Use text to convey a clear message.
Using clear text in your form will help ensure the user won’t feel lost or confused. The form header is a chance to remind the user why he is feeling this form, and what he is about to gain. If your header isn’t clear, it might create confusion and increase drop off rates. Use a short, concise sentence that highlights the benefits of signing up. Using a clear text on the “signup” button can have a significant impact on the number of users who click it. Clicking on the “signup” button is an act of commitment, especially when the user shares information he considers private or sensitive. If your user doesn’t have a clear understanding of what is going to happen when he clicks that button, he might just let it go.
When you write the micro copy for a button, make sure it’s clear, and that it clarifies what will happen next.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tSkFBwMDy8jNYjSjUw0QGw.png">
9. Make that sign up button pop! And then make it stand out even more!
Your “signup” button is the most important thing in your form. If a user misses that button, or get mixed up between your buttons, you just lose him. To avoid that, make sure the “signup” button is the clearest object in your entire form. Choose a bright color, contrasted to the background color, and choose the right copy for your button to make sure everyone knows what it is. And finally, is the “signup” button the biggest element in your page? Great, go and make it 10% bigger.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*30ATskYbhORGLMuN8Qu9Yw.png">
10. Enable social media sign up
Let your users skip the sign up form altogether by letting them sign up with their social media accounts. Formstack found that enabling social media sign ups raised the sign up rates by an incredible 189%! Also, social media sign up is more friendly for mobile users, because it requires a single button only.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4DUp-OluWdYeJucYgZwx0g.png">
To summarize
In this article, I offered you a number of simple techniques to improve your sign up forms, many of which were tested by major companies. With that being said, no one knows your target audience like yourself, and some parts of this article might not be relevant? for your needs. Users who sign up for a bank app will probably expect a different experience than those who download a mobile game.
Sign up forms can prove a daunting task for some users. If you stick to a clear and short form which doesn’t leave room for error, or even ask yourselves “what would make me want to stay and finish this form”, you will create a good user experience for you users. Maybe you will even make them fall in love with your product, it will be beneficial for everyone.
I hope this article provided you with new techniques, which are relevant for your needs. You should go ahead, try these new tools, explore different ways to improve your signup forms, and end up making the most of them.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d4bd93ba2c8f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/10-signup-page-do-and-dont-d4bd93ba2c8f">10 signup page do and don’t</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

10 signup page do and don’t

Top Stories