Form design

Form design

Well-designed forms are a crucial component of any web application. Follow best practices of form design, supported by tools in Pega, for the most success.

Basics

A basic form should be in a one column layout, with labels on top. Strongly related fields are grouped together on one line. Fields are an appropriate width for the content. Research shows that this is the best default form design to optimize for speed. This should be the starting place for all form designs.

Example of a basic form

In some cases, a one column layout is not the best way to lay out the screen. Designers should use two or three column layouts when:

  • There are a lot of fields (>25) on a single screen, and real estate is at a premium.
  • Specific fields don’t have strong associations.
  • Speed is not a primary need.

Using a two column layout is preferable to using a three column layout.

Use a two column layout when you have >= 6 fields to show. Do not use a two column layout to display one line of fields.

Don’t mix two and three column layouts on the same screen. You can mix one column & two column, or one column & three columns.

Example of a two column form

Use a three column layout when you have >= 9 fields to show. Do not use a three column layout to display one line of fields. If a two column layout would suffice, use that.

Form layouts

Same line grouping

Some items in a form are more closely associated than others. Examples of this are:

  • First and last name.
  • Date ranges.
  • City/state/zip in an address.
  • Currency type and amount.

When you have this type of data, make the grouping more clear by having them on the same line.

Example of a grouping two items on one line in a form

Avoid multi-column layouts with this kind of grouped data. As seen here, “Start date” and “End date” are now on different lines.

An example of what not to do, where grouped items are broken up.

Headers

Use headers to separate information. Under a specific header, don’t mix one column and multi-column layouts.

Good example of using headers to separate information Bad example of mixing one-column and multi-column layouts under one header

Required fields

Required fields should be shown before non-required fields. Having required fields at the beginning of the process makes sure that users don’t miss them. Avoid mixing a required field in with many non-required fields. If a field is strongly recommended (but perhaps not strictly “required”) it should be as near to the beginning of the form as possible. This reduces the chance of a user skipping it.

Example of putting required fields before non-required fields

Long and wide fields, and grids

When reasonable, put long and wide fields under short ones. Long and wide fields can hide other fields by pushing them below the fold. When possible, put these at the end of your form. Longer/wider fields should go below less long/wide fields.

Long and wide fields include:

  • Text areas.
  • Rich text editors.
  • Simple grids.
  • Maps.
  • Any custom control taller than 60px.

Any list with more than 5-10 items in it, and/or has paging should always be at the end of the form. This is to prevent keyboard traps and infinite scroll.

Example of wide fields under other fields in a form

Tab order

The default, and recommended, tab order is Left -> Right, Top -> Bottom. Never tab back and forth from one header area to another.

This is the preferred tab order, as it lays fields out predictably, and groups tightly related fields into one line.

Example of tab order from top to bottom

This layout has two distinct header areas, and the user tabs down the entirety of one before moving to the next. Use this when you have shorter header areas of similar length, and space is at a premium. Also notice the dividing line between the two areas, which makes it more clear to a user that they are two different areas. Provide visual separation like this when possible.

Example showing tabbing down one header area, and then to another header area

This layout is a two-column layout with correct tab order. Use this when space is at a premium and there are many fields under a particular header. Refer to the guidelines about choosing one or multi column layouts for more guidance.

Example of tab order from left to right, then top to bottom

Form and form element widths

The maximum width of a standard form should be 720px. There are some cases where the form must be wider (accounting for tabular data) but generally 720px maximum will suffice.

With 14px padding on all sides of the form, these are the recommended field widths:

  • Small: 110px
  • Normal: 220px
  • Wide: 692px

Use a field width that is appropriate for the content meant to go in it.

  • Small fields are generally 8 or less characters. Zip codes, abbreviations, etc.
  • Long fields are expected to have >16 characters. Street address, comment areas, etc.
  • Standard field width should be used most of the time.

Last updated: Aug 2018

Next: Icons