<p>The problem with signup form is that users have to take time out of thier day to fill out information that they are not very keen to filling out in fact  to them it’s quite annoying </p><p><strong>Also they need to fill out sensitive information </strong></p>

Problems With Forums 

<p>Allowing signup through social media platform is one great way of easing a lot of customers concerns about the time and the sensitive data </p>

Allow Signup Through Social Media Platforms 

<p>Another important thing is to make sure it doesn’t take too long, have the forums be short and if they take too long or too many fields split the amount of time needed </p>

Keep Forums Short Or Switch It To Multiple Steps 

<p class="ql-align-justify">The rule of thumb is that labels should be aligned to the top left of the design to provide easy access and information, also it makes for a smooth scanning process </p>

Labels 

<figure><img alt="" src="https://miro.medium.com/max/500/1*AGVb1fo0-VMMzjSwo8cuvw" width="692" height="255"></figure><p data-selectable-paragraph="">How many people like filling out forms? I think, not many. It’s not what users want from the service — they just want to buy tickets, chat with friends and so forth. And signing up is somehow a unavoidable evil they have to deal with. So what’s the problem with submitting forms?</p><OL><LI>It’s time consuming.</LI><LI>Complicated forms can be hard to figure out.</LI><LI>Forms may ask for the information users are afraid to share — credit card details, phone numbers, addresses.</LI></OL><p data-selectable-paragraph="">Forms are crucial for business success and they may lead to low conversion and clients abandonment. But it’s also the place where users struggle the most. So how a designer can help in this case? How to design a really great form? Here are some advice.</p><h2 data-selectable-paragraph="">Allow Sign Up and Log In via social services — Facebook, Google etc.</h2><p data-selectable-paragraph="">A social sign-in is an extremely powerful tool which facilitates the fields completion. Remember to assure people that their social data is secured and explain what information you need.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*ymKywenHRghEOArnl6DIq" width="400" height="600"><figcaption dir="auto">Image credit: New York Times</figcaption></figure><h2 data-selectable-paragraph="">Save entered data</h2><p data-selectable-paragraph="" dir="ltr">One of the most useful features in forms — remember input data a user has already filled in. In case something goes wrong, the user doesn’t need to re-enter all the information again. This function is specially useful for long forms. <a href="http://garlicjs.org/" rel="noopener ugc nofollow" dir="ltr">Garlic.js</a> allows you to automatically persist your forms’ text field values locally, until the form is submitted.</p><h2 data-selectable-paragraph="">Keep form as short as you can or split it into multiple steps</h2><p data-selectable-paragraph="">Add only essential fields in your form — it’ll save time and reduce errors. If a field is optional, it’s better not to show it at all. Limit the form to only 1 or 2 optional fields, and clearly mark them as optional. Also remove any confirmation fields but those you really need. If you can’t avoid a long form, split it into multiple steps and group the related fields.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*UW3XEa1trBcfIRmFxBD3O" width="549" height="474"></figure><h2 data-selectable-paragraph="">Auto-focus the first input field in the form</h2><p data-selectable-paragraph="">Autofocusing guides users to the starting point of your form. Emphasize the first field with an accent border color, background color or both.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*l7N2xZSEut1Ivqtf7u-Gg" width="500" height="548"><figcaption dir="auto">Image credit: Udacity</figcaption></figure><h2 data-selectable-paragraph="">Avoid checkboxes for Privacy Police agreement confirmation</h2><p data-selectable-paragraph="">Instead of checkboxes use text with links about acceptance of the terms and policies. UPDATE: in some cases (in the EU for example) checkboxes are only allowed instead of auto-accept, so it’s better to check with legal (thanks </p><p data-selectable-paragraph="">).</p><figure><img alt="" src="https://miro.medium.com/max/500/1*HyigeoOfUYvZd0s2YVqkY" width="378" height="378"><figcaption dir="auto">Image credit: Coursera</figcaption></figure><h2 data-selectable-paragraph="">You can use one form for Sign Up and log In (but be careful)</h2><p data-selectable-paragraph="">It’s a good point to create one universal form for signing up and logging in. After entering email and password, the service checks if the email is already in it’s database. If yes, you will log in, if not — the service will create a new account for you. But take attention, that this approach has some issues — if you enter wrong but valid email, the service will create an account with this email.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*07KvRZGXjXTGoc2uN5MSZ" width="525" height="525"><figcaption dir="auto">Image credit: Bookmate</figcaption></figure><h2 data-selectable-paragraph=""><strong>Present fields in a single column layout</strong></h2><p data-selectable-paragraph="" dir="ltr">Keep users in the flow by sticking to a single column to avoid reorientation.. (Exceptions: short and related fields such as <em dir="ltr">City</em>, <em dir="ltr">State</em>, and <em dir="ltr">Zip Code</em>).</p><figure><img alt="" src="https://miro.medium.com/max/500/1*CxN7mBQycf1ZGZrr6c3JY" width="692" height="692"></figure><h1 data-selectable-paragraph="">Provide clear heading</h1><p data-selectable-paragraph="">A good design starts with a text, a good form starts with a title. Short and smart CTA shows users the benefits of completing this form and motivates them as well. For trustworthy, show that the user’s information is secured, provide security badges.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*UgYZl9USRT-9dnO2wjqdY" width="354" height="354"><figcaption dir="auto">Image credit: New York Times</figcaption></figure><h1 data-selectable-paragraph="">Setup the input</h1><p data-selectable-paragraph="">An input field is a basic element of any forms. A simple input consists of several parts — Input Field, Label, Placeholder.</p><h2 data-selectable-paragraph="">Input Field</h2><mark>Generally, a textfield has 6 stated — Default, Hover, Focus, Error, Success and Disabled.</mark><figure><img alt="" src="https://miro.medium.com/max/500/1*lUn_xT2WgAkCo2MBQ3IRB" width="692" height="692"><figcaption dir="auto">Textfield states</figcaption></figure><h2 data-selectable-paragraph="">Label</h2><p data-selectable-paragraph="">A good thumb of the rule is to use top aligned labels as they are quicker to read. In short forms it’s OK to use meaningful icons instead of labels. Another way is using floating labels like in Material Design. Labels should have a short and clear microcopy. A sentence case or a title case — it’s your choice, but keep consistency in the label naming. Group related labels and fields — place labels close to the fields they are related to.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*Pr6F72QczW2EnBi-Q5BLA" width="692" height="692"><figcaption dir="auto">Fields labels</figcaption></figure><h2 data-selectable-paragraph="">Placeholder</h2><p data-selectable-paragraph="">Placeholders are hints that help users to understand what type and format of data can be entered. Avoid using placeholders as labels thus it makes the form compact. It works good for short forms with 2–3 fields, but not for longer forms. When the user enters information into the field, the placeholder disappears and the user may not be able to check if they enter the right type of data.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*LaH9Ei-lMx_gnTRPzA4Rz" width="692" height="692"><figcaption dir="auto">Avoid using placeholders as labels</figcaption></figure><h1 data-selectable-paragraph="">Be careful with the password field</h1><p data-selectable-paragraph="">I pointed out the password field because it has its own constraints and tricks.</p><h2 data-selectable-paragraph="">Let users see their passwords</h2><p data-selectable-paragraph="">It helps users to check their passwords before submission.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*8frr6fen-Km3PYlIao_L0" width="692" height="692"></figure><h2 data-selectable-paragraph="">Show the password strength</h2><p data-selectable-paragraph="">Good passwords are hard to guess. Display the users how strong and secure their password is and if they need to make it more complicated.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*6h1jFdR7Q4477nlRX3B4X" width="600" height="600"><figcaption dir="auto">Image credit: Dropbox</figcaption></figure><h2 data-selectable-paragraph="">Show the password requirements before submission</h2><p data-selectable-paragraph="">If your service needs specific requirements for passwords, show them before submitting the form.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*-bTA1G2460iGKt2M_JbG3" width="600" height="600"><figcaption dir="auto">Image credit: MailChimp</figcaption></figure><h2 data-selectable-paragraph="">Warn users that Caps Lock is ON</h2><p data-selectable-paragraph="">It helps to prevent such a common error as suddenly pressing Caps Lock key of Shift key.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*UbeMy7Cgvjvh00cqH5vvm" width="378" height="378"><figcaption dir="auto">Image credit: Privat24</figcaption></figure><h2 data-selectable-paragraph="">Design a ‘Forgot Your Password?’ flow for log in forms</h2><p data-selectable-paragraph="">People often forget their password (and so do I), so make it easy to remind or recover the password.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*iWpOM24Yjgm9Vzd1FGVC1" width="538" height="538"><figcaption dir="auto">Image credit: Bookmate</figcaption></figure><h1 data-selectable-paragraph="">Create powerful buttons</h1><h2 data-selectable-paragraph="">Name buttons properly</h2><p data-selectable-paragraph="">Instead of using a general Submit label, a form button should describe exactly what the user is doing in their task — Create Account, Log In etc.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*UEGbWB2bzpyvXqqi5ncNv" width="692" height="692"></figure><h2 data-selectable-paragraph="">Make the button disabled until all the required inputs are completed</h2><p data-selectable-paragraph="">This is another way to visually validate inputs before submission.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*KqQfBdr-nUtuxCfkocsqO" width="692" height="692"></figure><h2 data-selectable-paragraph="">Use primary and secondary buttons properly</h2><p data-selectable-paragraph="">If you have two buttons — primary and secondary, you should visually differentiate them to reduce potential errors. Being more important, the primary button should look more noticeable.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*P3o6JLRbBrntL2ZLGQGj4" width="692" height="692"></figure><h2 data-selectable-paragraph=""><strong dir="ltr">Avoid <em dir="ltr">Reset </em>and <em dir="ltr">Clear </em>buttons!</strong></h2><figure><img alt="" src="https://miro.medium.com/max/500/1*rTlJlLyO9l8ybQwUdwq7c" width="692" height="692"></figure><h1 data-selectable-paragraph="">Think about error prevention</h1><p data-selectable-paragraph="">Error prevention is one of the most important parts of a good form. Think how the system can prevent and fix common errors, instead of just showing users error messages.</p><h2 data-selectable-paragraph="">Input Automation</h2><p data-selectable-paragraph="">Automating the user’s input prevents their mistakes by cutting down the fields they need to fill out.</p><OL><LI>Auto-fill city and state textfields based on ZIP code or geolocation data.</LI><LI>Select the card type from the entered credit card number.</LI></OL><figure><img alt="" src="https://miro.medium.com/max/500/1*9d33NuqJk02CT5zSehu61" width="692" height="692"></figure><h2 data-selectable-paragraph="">Format Your Fields with Input Masks</h2><p data-selectable-paragraph="">To fix input problems use input masks on formatted data fields. Input masks automatically insert the correct format in the field.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*-XuWwJ7682sE_SddwSyVb" width="692" height="692"></figure><h2 data-selectable-paragraph="">Field Constraints</h2><p data-selectable-paragraph="">Another technique to control user input is to add field constraints. Allow numbers only for phone &amp; ZIP code fields, for examples.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*SGFBI8tT7hj4BOZWhes6V" width="692" height="692"></figure><h1 data-selectable-paragraph="">And remember about the errors validation</h1><h2 data-selectable-paragraph="">1. Use inline validation</h2><p data-selectable-paragraph="">Avoid error summaries, place error messages next to inputs. Show error messages one field at a time.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*Onf5EAvPhBpJbiaed3SZE" width="692" height="692"><figcaption dir="auto">Image credit: LinkedIn, Asos</figcaption></figure><h2 data-selectable-paragraph="">2. Use a clear microcopy for the error message</h2><p data-selectable-paragraph="">It should tell users why their information gets rejected and how to fix it. The tone of your error messages should feel polite and professional.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*u_xzwx0oZos2mKldel00l" width="692" height="692"></figure><h2 data-selectable-paragraph="">3. Validate fields with multiple requirements before submission</h2><figure><img alt="" src="https://miro.medium.com/max/500/1*qigGas5R_HmmAzM4wkKcN" width="525" height="525"></figure><h2 data-selectable-paragraph="">4. Highlight error fields with color, icons and text</h2><p data-selectable-paragraph="">Make the error message clearly visible, use different ways to emphasize it — color, text and icon.</p><figure><img alt="" src="https://miro.medium.com/max/500/1*B60dFRYES7wtcfdbxnowI" width="410" height="410"></figure><h1 data-selectable-paragraph="">Conclusion</h1><p data-selectable-paragraph="">As we can see, a good sign up form is a tricky thing, it isn’t just a nice UI design. To improve users experience, a designer needs to think about all the details of the process. A properly made form can increase conversion and decrease clients abandonment.</p>

How many people like filling out forms? I think, not many. It’s not what users want from the service — they just want to buy tickets, chat with friends and so forth. And signing up is somehow a…

product

Product & Design

<p>How many people like filling out forms? I think, not many. It’s not what users want from the service — they just want to buy tickets, chat with friends and so forth. And signing up is somehow a unavoidable evil they have to deal with. So what’s the problem with submitting forms? </p>

<ol><li>It’s time consuming. </li><li>Complicated forms can be hard to figure out. </li><li>Forms may ask for the information users are afraid to share — credit card details, phone numbers, addresses. </li> </ol>

<p>Forms are crucial for business success and they may lead to low conversion and clients abandonment. But it’s also the place where users struggle the most. So how a designer can help in this case? How to design a really great form? Here are some advice. </p>

Allow Sign Up and Log In via social services — Facebook, Google etc.

<p>A social sign-in is an extremely powerful tool which facilitates the fields completion. Remember to assure people that their social data is secured and explain what information you need. </p>

<p>One of the most useful features in forms — remember input data a user has already filled in. In case something goes wrong, the user doesn’t need to re-enter all the information again. This function is specially useful for long forms. <a href="http://garlicjs.org/">Garlic.js </a>allows you to automatically persist your forms’ text field values locally, until the form is submitted. </p>

Keep form as short as you can or split it into multiple steps

<p>Add only essential fields in your form — it’ll save time and reduce errors. If a field is optional, it’s better not to show it at all. Limit the form to only 1 or 2 optional fields, and clearly mark them as optional. Also remove any confirmation fields but those you really need. If you can’t avoid a long form, split it into multiple steps and group the related fields. </p>

Auto-focus the first input field in the form

<p>Autofocusing guides users to the starting point of your form. Emphasize the first field with an accent border color, background color or both. </p>

Avoid checkboxes for Privacy Police agreement confirmation

<p>Instead of checkboxes use text with links about acceptance of the terms and policies. UPDATE: in some cases (in the EU for example) checkboxes are only allowed instead of auto-accept, so it’s better to check with legal (thanks </p>

You can use one form for Sign Up and log In (but be careful)

<p>It’s a good point to create one universal form for signing up and logging in. After entering email and password, the service checks if the email is already in it’s database. If yes, you will log in, if not — the service will create a new account for you. But take attention, that this approach has some issues — if you enter wrong but valid email, the service will create an account with this email. </p>

<p>Keep users in the flow by sticking to a single column to avoid reorientation.. (Exceptions: short and related fields such as <em>City </em>, <em>State </em>, and <em>Zip Code </em>). </p>

<p>A good design starts with a text, a good form starts with a title. Short and smart CTA shows users the benefits of completing this form and motivates them as well. For trustworthy, show that the user’s information is secured, provide security badges. </p>

<p>An input field is a basic element of any forms. A simple input consists of several parts — Input Field, Label, Placeholder. </p>

<p>A good thumb of the rule is to use top aligned labels as they are quicker to read. In short forms it’s OK to use meaningful icons instead of labels. Another way is using floating labels like in Material Design. Labels should have a short and clear microcopy. A sentence case or a title case — it’s your choice, but keep consistency in the label naming. Group related labels and fields — place labels close to the fields they are related to. </p>

<p>Placeholders are hints that help users to understand what type and format of data can be entered. Avoid using placeholders as labels thus it makes the form compact. It works good for short forms with 2–3 fields, but not for longer forms. When the user enters information into the field, the placeholder disappears and the user may not be able to check if they enter the right type of data. </p>

<p>I pointed out the password field because it has its own constraints and tricks. </p>

<p>It helps users to check their passwords before submission. </p>

<p>Good passwords are hard to guess. Display the users how strong and secure their password is and if they need to make it more complicated. </p>

Show the password requirements before submission

<p>If your service needs specific requirements for passwords, show them before submitting the form. </p>

<p>It helps to prevent such a common error as suddenly pressing Caps Lock key of Shift key. </p>

Design a ‘Forgot Your Password?’ flow for log in forms

<p>People often forget their password (and so do I), so make it easy to remind or recover the password. </p>

<p>Instead of using a general Submit label, a form button should describe exactly what the user is doing in their task — Create Account, Log In etc. </p>

Make the button disabled until all the required inputs are completed

<p>This is another way to visually validate inputs before submission. </p>

Use primary and secondary buttons properly

<p>If you have two buttons — primary and secondary, you should visually differentiate them to reduce potential errors. Being more important, the primary button should look more noticeable. </p>

<p>Error prevention is one of the most important parts of a good form. Think how the system can prevent and fix common errors, instead of just showing users error messages. </p>

<p>Automating the user’s input prevents their mistakes by cutting down the fields they need to fill out. </p>

<ol><li>Auto-fill city and state textfields based on ZIP code or geolocation data. </li><li>Select the card type from the entered credit card number. </li> </ol>

<p>To fix input problems use input masks on formatted data fields. Input masks automatically insert the correct format in the field. </p>

<p>Another technique to control user input is to add field constraints. Allow numbers only for phone & ZIP code fields, for examples. </p>

<p>Avoid error summaries, place error messages next to inputs. Show error messages one field at a time. </p>

2. Use a clear microcopy for the error message

<p>It should tell users why their information gets rejected and how to fix it. The tone of your error messages should feel polite and professional. </p>

3. Validate fields with multiple requirements before submission

4. Highlight error fields with color, icons and text

<p>Make the error message clearly visible, use different ways to emphasize it — color, text and icon. </p>

<p>As we can see, a good sign up form is a tricky thing, it isn’t just a nice UI design. To improve users experience, a designer needs to think about all the details of the process. A properly made form can increase conversion and decrease clients abandonment. </p>

How to Design Great UX for Sign Up Form

Problems With Forums

Allow Signup Through Social Media Platforms

Keep Forums Short Or Switch It To Multiple Steps

Labels

CURATED BY

CURATOR'S NOTE

Related collections

More like this