Build An Awesome Form
As a rule of thumb, only ask what you absolutely need to know. Short form increases the conversion rate. Oftentimes you only need an email or username and password as you can always ask for more information and prompt people to fill out their profile later when/if you really need it. Always ask yourself: “is this piece of information so valuable that it’s worth risking the possibility that users might leave your site?” If you are going to ask for information that might be difficult for the user to gather, let them know about it before sending them to the form.
When creating the survey, keep in mind your goal for the form. What do you want to achieve? Use crystal-clear instructions, a big, clear Call-to-Action and highlight the preferable action. The Call-to-Action (CTA) should be direct, clear, short and informal: “Sign me up!”, “Tell me more!”. Don’t use multiple CTAs and avoid secondary actions altogether. Instead, make sure the user can focus on one thing at a time to make the process as smooth as possible. If you are creating a payment form, offer and clearly state multiple methods to pay. This way there are fewer obstacles for the customer. Credit cards, PayPal and also Bitcoin are widely used methods but think about what works best for your customers. Enabling SSL is simple, effective and gives your visitors peace of mind. Don’t give the user any reason to question your commitment to security.
Not all users require all possible options all the time so provide additional options and logical jumps when you can and where it’s appropriate. Keep in mind that many users interact with a form by “tabbing” between the fields via keyboard commands. Make sure this works as expected. Especially multi-column layouts may conflict with expected tabbing behavior so might want to consider not using multiple columns in the first place. When using mobile versions, they can be a simplified or totally different from the web version. Make use of functionalities like “locate”. You can also use predictive search and drop-down menus (just don’t place them in random order).
Titles and tips are best used inside and prefilled in the input box, for example, “Password: minimum 8 characters”. Validation is also best done inline so the feedback is instant and the user will most likely get it right on the first try. Inline validation is especially helpful when you are checking for the availability of the desired username or that their birthday is realistic. You can also suggest valid inputs but if you want to use a default selection for some questions, use them for radio button lists but not for checkbox options.
Provide clear, actionable resolution in as few steps as possible and clearly communicate an error has occurred by using colors, symbols, top placement and visual contrast. Avoid requiring the user to re-enter their details if the error occurs only in a couple of fields. There is no reasons users have to re-accept the terms or opt out of marketing messages just because of a small typo. If at all possible, let the computer, not the user, handle the information formatting (for example, removing the spaces, dashes or parentheses from numbers). Help and tips are most useful when you ask for unfamiliar data, the users may question the relevancy of the data or when there are preferred ways of providing the data. Also, you might want to link to Terms and Conditions. Always make sure that the text is easy to read and doesn’t exceed 100 words (in total). Don’t link to outside pages.
However, you sometimes need a longer, more complex form. It helps the user if you divide a longer form into sections so the user can scan them. Each section, for example, “address”, “payment information”, “login information”, should have 4–5 fields. Again, think critically if you really need separate fields for street name and street number. And instead of three drop-downs for a birthday, offer a calendar view. Try to avoid optional fields, especially if the form is already quite long. If you want to include them, you can mark them clearly with the note “(optional)” so it’s easy to see when the user scans the form. Also, for long forms, show the progress bar and use encouraging success messages to tell when the user has reached a milestone.
Font-sizes and subheadings will help you create structure and hierarchy, but make sure your field follows a logic that is easy to follow. A form is a conversation, not an interrogation, so you might want to use sentences instead of a word. Never use all caps. It’s helpful to show how the information within the form is related but use minimum visual elements necessary to communicate that as you should always remove all unnecessary clutter such as banners.
Of the alignment of the labels:
- Top Aligned Labels work when the data being collected is familiar, because the completion time is minimal. However, they require more vertical space which might make the form look longer. Spacing or contrast is vital to enable efficient scanning.
- Right Aligned Labels offer clear association between label and field, require less vertical space but are more difficult to scan.
- Left Aligned Labels are best when data required is unfamiliar. They require less vertical space but the association between label and field is less clear.
- Since left and right aligned labels require horizontal space, they might not work when you have long labels or for all languages.
Close and open questions have their pros and cons. Close questions, where the options are restricted, offer data that is easily converted into quantitative data. If the rating scale is used, there’s also ordinal data available. With these questions, the data is obtained quickly and the questions are easy to answer but they lack detail since the responses are fixed. Open questions allow people to express what they think in their own words. You can use field length and character count to hint users to provide a longer answer. The in-depth answers provide rich qualitative data, but it’s time-consuming to answer the questions and to code and categorize the data. Also, not everyone can express their feelings well in writing. Therefore, it’s good to use a combination of open and closed questions.
With closed questions, you’ll use checkboxes and radio buttons. Checkboxes are used when there are lists of options and the user can select as many as they want, including zero, one or several. Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. Make sure the radio button options are both comprehensive and clearly distinct. Present the group of choices and clearly separate them from other groups on the same page. If you have a long list, you can use subheadings and logical chunking. Make sure the user can understand what will happen if they check or don’t check the particular box. Let users select an option by clicking on either the button/box itself or its label as it’s faster to click when the area is bigger. Use checkboxes and radio buttons only to change settings, not as action buttons. Don’t change the settings until the user clicks “OK” to confirm it.
Sometimes actions like submissions, calculations or file uploads require some time to process. Provide feedback when the action is in progress. It might be a good idea to disable the “submit” button once it’s clicked to avoid multiple sendings. After successful completion, provide a success message to let the user know.
Sources:
- How to Build An Awesome Form by Kuba Chrześcijanek
- 7 Web Form Usability Tips by Hannah Wright
- Designing Web and Mobile Forms by Chui Chui Tan
- Questionnaires by Saul McLeod
- Sensible Forms: A form usability checklist by Brian Crescimanno
- 5 Online Payment Form Best Practices by Hannah Wright
- Checkboxes vs. Radio Buttons by Jakob Nielsen
