Form Length
Better to have form on one or multiple pages?
- Evaluate every question, then ”Keep, Cut or Postpone”
- Perform best practices audit using spreadsheet & breaking up by section & data collected.
Apple check-out system uses dynamic accordion form. Makes use of accordion to collapse sections after you enter form data.
Inline multi-step do not affect conversion, though people were fastest with it.
Are there accessibility issues with accordion forms? Build form out to work with plain HTML, then progressively enhance using code & CSS.
Primary & Secondary Actions (or Next & Previous)
Primary & secondary actions. Should Next be on the right and Previous on left? Depends on how form labels are aligned. If you’re going to use this, be sure there is enough space between buttons so secondary action doesn’t align with your form elements.
Consider changing form labels. Continue & Go back instead of Next & Previous. Take emphasis off secondary action by using a link instead of a button or using more subtle style.
When primary action is inline with rest of form, users performed the most quickly.
How about tab index on secondary actions? Leave out in most cases, depending upon user goals.
Button & Links
Consider button for primary action & link for secondary.
For help differentiating forms from applications, see Forms vs. Applications by Jakob Nielsen.
Mad Libs Style Forms
Questions are layered into paragraphs with blanks. Some sites have seen consistent increase in conversion & completion rates.
“Mad Libs” Style Form Increases Conversion 25-40%
Vast.com uses Mad Lib Style Forms.
International Forms
There are many ways to present forms that collect postal addresses. Relying solely on text inside form fields causes usability issues.
Be sure your forms are tuned to the country your form is targeted towards. Can use automatic-detection based on IP address WiFi, or GPS. HTML5 has geolocation-based API.
Use generic format that covers multiple regions or countries. Example form fields, City/Town, State/Province/Region, ZIP/Postal Code. When it comes to form validation, realize the variations in different countries. Some countries don’t have postal codes, some have numbers and alpha-characters.
More on postal addresses & forms
Flexible inputs for form fields
Use input maps is fine, but don’t change answers while users are entering them. Set expectations up front or modify after entry. Don’t hide form hints in your form fields.
HTML5 allows additional input types
- number
- range (implements slider)
- date (implements calendar)
Two-Column Form Design
People will scroll if there is something to scroll for, if it’s clear your form continues. People will jump right in, skipping help text if they want what’s on the other side.
Scan line for form completion. Left aligned items have a much clearer scan lines. Be careful not to scatter input forms across the page. Draw straight lines as guerrilla metric between different sections of your forms.
When you encounter a form on mobile & enter your cursor, Apple does form field zoom. Android doesn’t so form fields are
In general, it’s a good idea to avoid two-column form designs because of loss of scan line and issues it might cause for mobile devices.
Q & A
Cancel and reset buttons on 1-page forms: Get rid of cancel or reset buttons when you can.
How about help links? Help links can work when content is relevant.
Label position on forms: Use top-aligned for speed and higher completion rates. Also best for mobile, accessibility, etc.
Lightbox use in forms: No concrete data yet, inserting follow-up questions in lightbox can be more successful than full form. Okay for adjustments & additional inputs. Stay away lightbox for a complete or multi-page form.
Auto-populate city and state, based on ZIP code: Read post on auto-populating city and state based on ZIP.