More Form Design Guidelines

We cannot get away from digital forms. They are everywhere – at work, home, banks, grocery stores, coffee shops, food trucks, kiosks, mobile apps, everywhere. Yet, so many are still poorly designed.

It’s not easy to design a good form… there are a lot of thing to consider. We have discussed Form Design Best Practices and Guidelines before. Here are some more guidelines specific to entering data…

According to research from the Nielsen-Norman Group, date-entry fields must be unambiguous and support task completion by using the right design pattern. Small design changes can prevent big user errors. Here are some tips:

For a limited number of date options, provide a list of the applicable dates.

In some cases, users will have only few date choices. Rather than offering blank date fields or a calendar picker of limitless options, provides a short list of date options. Any dates that are unavailable have grayed out and disabled. (Alternatively, unavailable dates may not even be included in the list.)

Do not require users to enter special characters to format dates.

Whatever format users chose for entering the date (dashes, spaces, slashes, dots between the month, day, and year components), their input should be recognized. Moreover, left most zeros should not affect the date.

Report errors appropriately.

If a user enters a date that is obviously a mistake, such as 11/81/17, do not make any assumptions. Give the user feedback and provide suggestions on how to resolve the error.

Remove illogical date options.

Prevent users from selecting illogical dates. Obviously, what’s reasonable will depend from case to case: for example, dates older than 130 years will be unlikely for birthdates, but quite acceptable for document dates. Users should be prevented from entering a return date that takes place before the departure date or that is in the past. Make the choices clear by disabling and graying out options that are not available or are illogical pairs.

Preserve users’ work.

If the same date information is required in a separate part of the form or later during a task, then don’t make users enter that date twice.

Keep date ranges consistent.

Avoid shifting date ranges for departure and return pairs. For example, if November—December is shown for departure, do not shift and show December—January for the return date range. The change may go unnoticed and cause users to slip by clicking where the intended date used to be.

If you cater to an international audience, your date format should be clear and understandable.

Date-entry fields are culture dependent and can cause major problems for those who are accustomed to a different format. “10/11/2016” could mean 11th of October 2016 to an American, but November 10th to someone from Europe. Follow these rules of thumb when designing date input for a global audience:

  • Add labels and separate the fields to make it clear which fields are for the month, day, and year.
  • Spell out the name of the month to distinguish it from the day.

Utilize calendar pickers with clearly spelled out names for months.

Some frameworks, such as Bootstrap, provide calendar pickers to support unambiguous date selection.

Date-input patterns are not created equal. Implement design patterns that are appropriate for your context. When designing date-entry fields support text input and consider whether or not you have an international audience. Avoid designs that are ambiguous because they can cause people to become frustrated and annoyed with your site. Follow these guidelines to prevent form abandonment and catastrophic errors.