Category: design

Forms are prevalent across the web, yet so many are poorly designed. They can quickly become a source of frustration.

Last year, Ann Shivers-McNair and I bonded over our passion for form content and design. So we developed a presentation on making better forms for people, presented at edUi last October.

Forms have been on my mind a lot recently, and I thought it would be useful to unpack the presentation into some of the key principles and considerations for easy reference. And I’ve added and slightly revised a couple based on other things I’m learning. So here goes.

3 key principles

Simplicity. Avoid the complicated and unnecessary.

• Avoid instructions on how to fill out the form
• Make sure every field serves a purpose
• Get rid of any unnecessary fields (e.g. phone number, fax number, birthdate)
• Never require a field if you don’t really need it

Inclusivity. Create forms for everyone.

• Avoid jargon
• Avoid legalese
• Write like you talk
• Be inclusive in your options

Readability. Use logical sequencing and follow conventions.

• Be succinct
• Place field labels above the field
• Left justify, rag right
• Allow for lots of white space
• Use sentence case

Small but mighty considerations

Form names. Make it clear what you’re doing.

• Start with a precise action verb (e.g. “Apply,” “Request”)
• Use an action verb in the link to the form, too (e.g. “RSVP for event”)
• Avoid too many nouns in a row

Optional vs. required fields. Make them intuitive to recognize. (Be aware these conventions are a moving target and may depend upon audience).

• Most fields should be required
• Indicate which fields are optional by saying optional
• Be consistent in how you indicate required vs. optional fields
• Asterisks are a common convention to mean “required”

Name fields. Make them inclusive.

• Don’t limit character length (or if you must limit, make that limit 70 characters for full name or 50 characters for first name or last name)
• Don’t force first-letter capitalization (e.g. charley)
• Don’t prevent capitalization of a second name or within a name (e.g. Bonnie Jean; McClelland)
• Allow hyphens in names (e.g. Sykes-Casavant)
• Use one “Full name” field over separate “First name” and “Last name” field, unless it’s really necessary

Gender fields. Make them inclusive.

• Avoid binary gender selectors
• Allow write-in responses
• Make it optional (when possible)

Selectors. Give clear options.

• Pick a thoughtful default that’s either the most common answer or the first in a logical sequence
• Put the most common options at the top, and for longer lists, use alphabetical sequencing
• Use the right selector for the information you are soliciting (e.g. dropdowns, radio buttons, check boxes)

Question scope. Ask one question at a time.

• Don’t combine multiple questions into one
• Isolate the pieces of information you are asking for
• Use logic to order questions that follow from previous information

Contextual help. Provide helpful hints at the appropriate time. (Be aware these conventions are a moving target and may depend on audience).

• Use field labels to describe the field, and place them above the field
• Use help text to provide an explanation or further information
• Maybe use placeholder text to suggest the type of content you expect
• Be cautious with placeholder text, and don’t use it as a substitute for field labels or help text

Feedback messages. Provide informative messages at the right time.

• Make it clear when there are errors
• Make it clear what any errors are
• Don’t stress users out with error messages before it’s necessary
• In confirmation messages, make it clear what the user just did and what to expect next

The slidedeck

Here’s the slidedeck that these tips were based on. It includes a few more details and a whole bunch of examples.

Hope you find this helpful! Please share comments on other things I should add.