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.

Please review our documentation on text inputs for clarification on when to use specific fields.

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 column layouts when:

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

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.

Example of a two column form

In our new Cosmos Design System, only one and two column layouts are used for field design. In UI Kit, designers may utilize 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.

Good example of using headers to separate information

Required fields

Required fields should be shown before non-required fields. Having required fields at the beginning of the process makes sure that users do not 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. If long and wide fields are at the top of a form, they can hide other fields by pushing them below the visible area of a webpage. When possible, put these at the end of your form.

Examples of long and wide fields include:

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

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

Last updated: Aug 2019

Next: Form elements