Forms can be painless or painful for visitors. Keep in mind that visitors want to get their tasks accomplished as quickly as possible, and with the least amount of effort. Proper planning and design can maximize task efficiency.
Use this navigation and jump directly to content :
{Usability} {Instructions} {Visitor Support} {Accessibility} {Help} {Feedback} {Error Handling} {Form Submission} {Text Input Controls} {Selection Controls}
Usability—Did you:
-
Do everything possible to reduce visitor effort—visually, cognitively, and physically?
-
Minimize visitor clicks, keystrokes, mouse movements, and scrolling?
-
Avoid asking for any data until after visitors are aware of the benefits?
-
Avoid asking for unnecessary or redundant data?
-
Indicate which elements are required and which are optional?
-
Present input controls in the expected order?
-
Use wizards and control panels appropriately?
-
If employing control panels, chunk the input elements by category?
-
Specify an appropriate tab order and initial focus, when appropriate?
Instructions—Did you:
-
Provide adequate instructions so that separate help is rarely needed?
-
Accurately label each form control, and place each in close proximity and visual connection to the fields it explains?
-
Make documentation apparent but unobtrusive?
-
Use a consistent vocabulary?
-
Include the title attribute on form elements to provide concise instructions on rollover?
Visitor Support—Did you:
-
Practice defensive design, so that the form is so intuitive and easy to use that little additional support is necessary?
-
Try to be brief and salient, telling visitors only what they absolutely need to know to accomplish their tasks?
-
Provide obvious documentation for probabilities, not possibilities?
Accessibility—Did you:
-
Whenever possible, place labels to the left of controls, or associate the label and its control with the
<label>
tag? -
Surround related form elements with
<fieldset>
tags and include the<legend>
tag for labeling? -
Avoid populating controls with instructional text as the default value?
-
Avoid using list boxes when multiple choices are possible (i.e., using the multiple attribute)?
-
Avoid setting the default value for a single yes/no checkbox to “yes”?
-
Use the title attribute to provide tooltips on rollover?
Help—Did you:
-
Use contextual help whenever possible?
-
Provide a hot-linked table of contents or site map, and a search function for larger Help systems?
Feedback—Did you:
-
Provide feedback, particularly for long waits and errors?
-
Use modeless, rather than modal, feedback whenever possible?
Error Handling—Did you:
-
Provide error messages that are helpful, clear, non-technical, concise, polite, tactful, non-accusatory, apologetic, and visible?
-
When a server-side error is encountered, either redisplay the entire form or just the subset of controls that are in error?
-
Display an error message on the same page as the field that needs to be corrected?
-
Remember that successful resolution of a problem builds stronger customer loyalty than delivering a product that performs flawlessly?
Form Submission—Did you:
-
Use the appropriate control to submit a form?
-
Avoid telling visitors not to click a Submit button twice?
-
Avoid using Reset buttons?
-
If you do use a Reset button, verify that the user intended to click it?
-
Position buttons in close proximity and visually connected to their form elements?
-
Position the safer or more positive action button on the left, and the riskier or more negative action button on the right, making sure that default focus lands on the safer of the two actions?
-
Confirm risky actions?
-
After submission, reassure a visitor with a response page that re-displays the entered information?
-
Verify completeness and format of all entries as much as possible before submitting the form to the server?
Text Input Controls—Did you:
-
Use
<input type="text" />
for one-line text input, or<input type="password" />
for a one-line text input with the entered characters hidden by asterisks? -
Specify a size and
maxlength
that roughly correspond? -
Display relevant field formatting and punctuation, such as dashes within dates?
-
Use the
value
attribute to specify a default value if 80% or more of the audience can use the default? -
Avoid using the
value
attribute to display instructions for the field? -
Use the
<textarea>
tag for multiple-line text input? -
Use
wrap="soft"
,"hard"
, or"off"
to determine whether carriage returns are used and whether they’re saved with the<textarea>
field? -
Use
<textarea>
to display informational text that needs to scroll?
Selection Controls—Did you:
-
Use
<input type="radio" />
,<input type="checkbox" />
, or<select>
for a limited number of choices? -
Filter out those options that become irrelevant because of earlier choices?
-
Use
<input type="radio" />
for a short list of mutually exclusive choices? -
Use
<input type="checkbox" />
for a short list that allows multiple choices? -
Align checkboxes and radio buttons vertically?
-
Visually chunk related radio buttons and checkboxes?
-
Use
<select>
for a longer list that would cover too much screen real estate if all the choices were displayed at once? -
Decide whether or not to place the most common choices at the top of the list?
-
Use
size="1"
for a drop-down list, and a size with a value greater than 1 for a scrollable list? -
Use
<optgroup>
to chunk related options within a select box?
Don’t forget to look at “All In One Design Checklist” after this article.
There have been 10 comments | Subscribe to Comments | Jump to Form »
Click
Your site is a refreshing change from the majority of sites I have visited. When I first started visiting web sites I was excited by the potential of the internet as a resource and was very disappointed initially. You have restored my enthusiasm and I thank you for your efforts to share your insights and help the world become a better place.
Keith Bell
I’m interested to know why you think this is undesirable?
Mert TOL
@ Keith Bell :
Hello Keith,
If the submission takes more than just a second or two, the visitor is left wondering if the click actually registered. At the same time, she’s afraid to click a second time—after all, she’s been warned of dire consequences if she clicks that second time.
There are two user-friendly ways to avoid causing our visitors this kind of angst:
First: Immediately reassure visitors with feedback that the form is in the process of being submitted, often done with some type of small animation. This is a great way, under any circumstances, of reassuring visitors that something is indeed happening.
Second: Use JavaScript to disable the Submit button after it’s clicked, thereby preventing a double submission.
Dale Watkins
I agree @Mert. Simple animations and some javascript to disable the button and/or display the animation will work wonders.
Frankly, I’m working on a cattle-prod plugin for jQuery that discourages people from clicking a submit button twice.
Josh Cagwin
This is great. Forms are something that more attention should be given too.
Lindsey
I was looking for something like that these days. Thank you very much for your brilliant checklist. Also, your “All In One Design Checklist” very useful for beginners, veterans and experts too. I love your style. Thank you.
Debbie Gillespie
This better forms checklist is dandy! It is concise yet includes everything a forms creator needs to know when designing accessible forms. Style is great!
Gary Miller
Clear, concise and very informative. Thanks for sharing!
Caroline Jarrett
Great checklist.
I was particularly pleased to see the points about reducing visitor effort, and avoiding unnecessary data. These are vital but are often overlooked as designers stress about visual details.
Users are far more likely to bail out of forms because of invasive or unnecessary questions than because they didn’t like the choice of label placement.
Best,
Caroline Jarrett
Fernando Medeiros
Thanks for sharing!!!