Form design in Cosmos

Multi-step forms, or screen flows, allow users to work through tasks bundled into a single process. Multiple steps presented as one task help keep a process together for a single user to complete. Use only multiple steps if users need to do the work in one sitting, especially if one or more steps have conditional logic.  

As a guideline, avoid having more than seven steps in a flow. Otherwise, the process can become unmanageable or interrupted in that single sitting.

Forms with multiple steps might also display a form progress indicator. 

A typical multi-step claim form can include the following steps:

1. The contact’s personal information
2. Their current residential address
3. Their contact methods 
4. A description of the purpose of the claim

The following figure is an example of a multi-step form used to collect customer details.

Sample multi-step form

When possible, limit each topic to a single step or task. This common practice consolidates information for your users and helps people with cognitive disabilities to focus on their tasks much easier. 

Reducing the number of fields on screen per task or step can also keep from overwhelming users. Although it might not always be possible, as a best practice, use fewer than ten fields for each step. 

Form fields allow designers to provide context for each field. Context can help explain the expected format of some data, for example, MM/DD/YYYY for dates. 

Designers can also include references to case data to help end users make decisions faster. 

The following image shows a sample form that references case data and offers context for fields.

Example of context being shown in a form 

Like all design systems, the Pega Cosmos design system provides support for required fields. Failure to enter data properly causes an error. As a best practice, avoid adding non-required fields to your forms. 

The system handles error management in forms automatically. However, you might need to define the error messages and acceptance criteria for individual form fields.

Aim to prevent errors entirely. For example, you cannot set a date in the past for scheduling future events. However, when users cannot avoid errors, you need to provide clear error messages that explain the expected solution, for example, Your password must be 8 characters long.

You can create validation logic that verifies inputs outside the normal flow of entry, in which case the server returns errors. Use validation logic for very heavy processes that cannot rely on client-side validation.

Pega supports the unique warning state for fields. You can use this feature for cases in which something might soon become an error, for example, an expiration date that is set that is too close to the current date. 

The following image is an example of a clear error message.

Sample error message for a field 

Pega recommends a series of questions to help guide you toward the right form component for your design.  

In the following figure, click the + icons to see the decisions that a designer must make to use the correct component in a form. 

Cosmos forms components use one of the following layouts:

• Single column
• Dual column

The types of controls in use determine this layout. Simpler controls, such as a text input or combo box, use the dual-column layout. Rich text editors, text areas, radio groups, and checkboxes use a single-column layout. On smaller device sizes, all forms are single-column layouts. 

Check your knowledge with the following interaction.