Simple Rules for Designing Web & Mobile Forms
Forms allow communication on the internet and enable commerce. They provide the opportunity to collect and aggregate value. Forms should be designed well.
This is a practical post, with evidence-based suggestions. The recommendations following are specifically for “forms”, but could be applied to designing digital products broadly. Here are 22 rapid-fire rules.
Maintain a clear line of sight (single column layouts are superior to multiple columns)
Survey participants completed the linear, single-column form (n = 356) an average of 15.4 seconds faster than the multi-column form (n = 346). This was significantly faster at a 95% confidence level.
Provide inline validation.
Adding inline form validation in one study led to: a 22% increase in success rates, a 22% decrease in errors made, a 31% increase in satisfaction rating, a 42% decrease in completion times, and a 47% decrease in the number of eye fixations. 22% more people making it through your forms is worth the effort.
On aligning labels: top alignment is best.
Top alignment allows for the fastest completion times, and more of a correlation between label and input.
Communicate form errors with top placement, visual contrast, and associating responsible fields.
When there is an error on the form submit, we want to clearly communicate: what the error was at the top of the form, and the field that was responsible (make labels bold and highlight the form field). "There was an error" is not sufficient.
When possible, radio buttons are better than dropdowns.
Survey participants completed the radio button form (n = 354) an average of 2.5 seconds faster than the form with select menu buttons or dropdowns (n = 354). This was significantly faster at a 95% confidence level.
Use input length as an affordance. Hint at what the content should be.
If most of the input content will be the same, you can use a consistent input and form width.
Group relevant content together, but use as little visual elements as possible.
This gives the user an idea of what information is meant to be grouped, but adding too much visual distinction can distract the user and increase the completion time.
On mobile, offer field focus/zoom.
Text manipulation on mobile remains difficult. Improve the user's experience by offering field zoom and making it easier to edit text.
If information takes time to obtain, tell the user before they start completing the form.
Forms are best when all the information necessary is already known. Hard to obtain information should be collected ahead of time in order to optimize time to completion.
Disable Submit after a user submits the form.
To prevent multiple submissions, disable the button after it was selected.
Reduce the number of fields as much as possible.
Imagescape reduced their contact form from 11 to 4 fields, gaining a 120% conversion increase.
Enable a clear path to completion by enabling smart defaults.
Smart defaults (setting a default and allowing the user to update) is a quick way to get user's through the form and speed up the time to completion.
On CTA Copy: Using My instead of Your increased CTR 90%, in one study.
The only thing we did was to tweak one word in the copy – we changed the possessive determiner “You” to “My”. After running the test for three weeks, the treatment button copy, “Start my free 30 day trial” had increased CTR by 90%.
Making the style of the primary CTA different (shape, color) from the form itself may help increase conversion.
In this case, we were able to increase sales via product pages – not just click through rate (CTR) – by 35.81% by changing the color and shape of the call-to-action button.
Requiring Phone Number decreases conversion by 39%.
ClickTale designed a solution to explicitly call out that the phone number was optional. This one word change nearly doubled conversion rates (from 43% to 80%) and it decreased the 39% fallout down to only 4%.
Submit isn't as good as Go for CTA copy.
Carefully select your CTA copy for submitting forms, be contextual.
Don't use CATPCHAs, they're ineffective and they reduce conversion rates.
A study by Stanford University found that Captchas will cost you a drop in subscribers / leads of up to 30%. Use Google's reCaptcha, hidden fields, or other automated solutions instead.
When using a secondary action (like cancel), use a clear visual distinction, and don't break the "single line of sight".
Primary actions should be aligned with the form inputs (so you can look down the left side and see a clear path to completion). If there is a secondary action, make it visually distinct, and not within the line of sight of completion.
Minimize the help and tips required, but when necessary, consider a dynamic help system.
We want to minimize the need for help and tips as much as possible, but if necessary, we want to do it in a way where it doesn't interrupt the flow of the form.
Markup: set the tab order using tabindex to ensure proper tabbing.
Tabbing is useful from a usability perspective on web and mobile. A tabindex attribute will help users complete the form in a timely manner.
Markup: use label, and fieldset where possible, not just input
A label tag is clickable/tappable and associates the input with a label for screen readers. Fieldsets are useful to group content together for accessibility.
After successful completion of the form: provide feedback in the context of the form.
Celebrate the form completion! And let users know (in context of the form) what has happened now that they've submitted.
This ends the rapid-fire list of form suggestions. A question you might have: oh my, do I need to use all of this? Every item on the list? No. Apply these rules contextually, as they make sense for you and your product. Apply it to more than just forms too! Now go forth and design!
Cheers and Godspeed.