3 Tips for Designing Better Forms

This is the second installment of “Build Better Forms,” a series in which we review online government forms and suggest some improvements.

As we discussed in our first post, a clear and intuitive form reaps many benefits:

  • lower data processing costs,
  • fewer support requests,
  • higher completion rates,
  • and greater citizen satisfaction.

Let’s run through three more ways you can improve your form:

Keep your intro text short and sweet

This permit application from the Portland Bureau of Transportation begins with a long, uniform paragraph:

dense intro text

It contains important details, like the cost of the permit, but they’re hard to find at first glance.

When users arrive at a form, they often bypass the introductory text or instructions, zero in on the first blank field, and start typing. After filling in a few fields, they may go back and read what they skipped, but you can’t count on it.

Let’s revise this introductory section so the key details are front and center:

concise intro text

While we’re talking about the start of the form, let’s consider the title. It’s often the only thing users will read before they start, so it should clearly state the form’s purpose. “QuickPermit Application to place Portable Storage Container in a Parking Lane” is verbose, but it makes the grade.

Use section headers

Next, let’s look at a form from Pitkin County, Colorado. I can think of a quick fix here to improve readability. Any ideas?

no typographic hierarchy

We can change the formatting of the section names, so they aren’t the same size as the labels.

Especially if you allow users to save their forms before submitting, it’s best not to assume they’ll complete them sequentially. Distinctive section headers organize your form and convey hierarchy more clearly.

section headers

When you include section headers in your form, users can quickly find the section they want to edit and pick up where they left off.

Rightsize your input fields

uniformly-sized input fields

The width of an input field suggests how long an answer should be. When all the input fields are the same width, as in this form, users may wonder, “Have I written too much? Too little?”

Let’s size the input fields so they accommodate only the data we want. (When building a form in Screendoor, we can choose among small, medium, and large inputs for text and paragraph fields.)

rightsized input fields

A rightsized input field hints at an appropriate length for an answer.

Show us your form

Until the next post, you can find more form-building tips in our Knowledge Base.

If you’ve put any of these tips into practice in your own form, send a link to [email protected]. We’d love to see it.

Leave a Comment

Leave a comment

Leave a Reply