Written by Fiona Murphy, originally published April 2008

Usability is central to the successful completion of online forms. Whether applying for insurance, completing tax returns, or simply making an online purchase, a poorly designed or confusing form can lead to users abandoning the process. These are some design principles and practices we have found effective when creating effective online forms.

Before the user begins

  • Inform the user of any information needed that they may not have to hand. For example: tax numbers, account numbers, bank details, and such like.
  • Provide an estimate of how long the process will take, and the number of steps that will be involved.
  • Communicate that all of the information they submit is secure.

Filling in the form

  • Clearly indicate all mandatory fields (typically highlight them with an asterisk).
  • Avoid long forms; break the form into sensible steps whenever possible.
  • For multi-step forms, indicate where the user is within the process.
  • Allow users to navigate back in the process without losing any data they have already submitted.
  • Provide clear and obvious calls-to-action, such as Next, Previous, Submit, Cancel, and so on.
  • Be careful where the scroll line falls (for all key resolutions settings); ensure the user is aware of any fields and calls-to-action below the scroll line.
  • Explanatory text should be placed above or before the related field. Users rarely read text placed after or below fields in online forms.
  • For individual elements (such as date input), do not mix drop-down menus and text fields.
  • Provide auto-tabbing where relevant throughout the form.
  • Allow users to tab between input fields from start to finish.
  • Avoid irregular form layouts where users may miss fields.
  • Avoid large blocks of text as task-driven users will ignore them.
  • Tick boxes and radio buttons should be placed in front of their corresponding text, rather than after.
  • Red text and the general use of red in online forms is best kept only for highlighting errors.

Dealing with errors

  • Adopt an apologetic tone when you are highlighting errors.
  • Use plain language to explain the error and what the user needs to do to rectify it.
  • Highlight fields and/or sections where errors have occurred. The more visual impact the better, to ensure your users see where all errors are occurring.
  • Place error explanations beside the relevant field.

After submitting the form

  • Provide a confirmation screen informing the user that the process is completed.
  • Summarise important information that the user has input.
  • Provide a print-friendly version of the confirmation screen, and an obvious print button.
  • Provide an actionable button at the end of the process, such as Back to Homepage.

A well-designed online form will encourage use, ensure successful completion, and maintain a positive perception of your brand.

  • Join Frontend.com

    We are always looking for the world’s top design talent.

    Join Us

  • Two Decades of Thinking

    Read insights and analysis from our team of thought leaders.

    Frontend.com Thinking