Forms are indispensable to online and mobile interactions. They’re a means to an end, but you’ll never get to that “end” if your online forms are poorly designed.
People mentally calculate their “interaction cost” when they encounter online forms. The higher the interaction cost (due to a complex, hard-to-read, or poorly designed form), the less likely users are to complete it. Keeping forms brief is essential. Beyond that, there are many steps you can take to make your online forms as convenient for users as possible. Here are 10 steps on how to make your online forms convenient for your users.
1. Help Users with Data Entry Whenever Possible
Autocomplete and auto-fill minimize the number of keystrokes form users must make. Autocomplete makes suggestions based on what the user starts typing into a field, like the first few characters of their email address. Auto-fill users browser data to fill in fields based on previously entered values.
2. Design Forms with Mobile Users in Mind
It’s better to assume that online form users will be using a mobile device rather than a desktop environment with a full-sized keyboard. When you design forms with this in mind, you’re likelier to minimize typing, keep forms brief, and take other steps to make forms convenient.
3. Keep Forms to a Single Column
When you place form fields in a single column, form users can see necessary fields more easily. Single-column forms are faster to complete, too. Multiple columns disrupt the user’s reading momentum, causing the eyes to zigzag, and slowing down form use.
4. Make Form Fields the Exact Size When Possible
When you make certain fields (like the zip code field) exactly the right size, you minimize errors and prevent user confusion. For example, a zip code field with a width of exactly five characters prevents users from wondering whether they need to type in their five-digit code, or their zip+4 code.
5. Alert Users to Errors Immediately
If a user makes an error that makes a field unusable (such as forgetting the “@” in their email address), a pop-up error that appears immediately lets them fix it and move forward. When people fill out an entire form, only to be notified of an error after they hit “submit,” they’re likelier to be frustrated enough to abandon the form altogether.
6. Radio Buttons Are Preferable to Drop-Down Menus
Radio buttons help people complete multiple-choice form fields with maximum speed.
Minimizing typing is important, especially for mobile users. Radio buttons and drop-down menus are two options that minimize typing. Radio buttons should be your first choice whenever possible, because they’re faster to use and less prone to mistakes. Drop-down menus can be reserved for multiple-choice questions where there are more than three or four choices.
7. Masked Input Helps with Long Number Strings
Masked input causes things like phone numbers to automatically appear in the (XXX) XXX-XXXX format when the user starts typing, making it easier to spot errors. Likewise, masked input that divides credit card numbers into chunks of four digits makes it easier for users to enter credit card information without errors.
8. Make the Correct Keypad Pop Up on Mobile
You can use HTML input types to cause the correct keyboard to pop up when a mobile user has to type in information. That way, if you need a user to enter their phone number, you can cause the number keypad to appear rather than a QWERTY keypad. This is another way to help users enter data quickly.
9. Reassure Users You Protect Their Information
People are increasingly concerned about sharing data, and they want direct reassurance that you protect their data, and that you don’t share it with all and sundry. When you include a clear, brief statement to that effect right before the user finishes, you reassure them that their time spent completing the form was worthwhile.
10. Make the “Submit” Button Obvious
Finally, make the submission button both visually obvious and descriptive. It should visually stand out from other field information, and if possible, describe what happens when they click. For example, a button that says “Create my account” is more meaningful than one that simply says “Send” or “Submit.”
The right form software is essential for designing online forms that people willingly complete. PerfectApps allows you to drag and drop custom form elements into place, and there is no programming required. Making mobile-friendly forms is easy with PerfectApps, as is adding features like pop-up error messages, radio buttons, and drop-down menus. You can try PerfectApps for free by signing up for a trial, or if you would rather, you can watch our demo video to see PerfectApps in action.
