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.
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.
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.
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.
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.
Use headers to separate information.
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. 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
- Any custom control taller than 60px
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.
Last updated: Aug 2019