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.

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 do not 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.

Do not mix two and three column layouts on the same screen. You can mix one column and two column, or one column and three columns.

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.

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

Headers

Use headers to separate information. Under a specific header, do not mix one column and multi-column layouts.

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.

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.

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.

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.

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.

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.