Form design in Cosmos

Multi-step forms (or screenflows) allow a user to work through a collection of tasks bundled into a single process. Multiple steps presented as one task help keep a process together for a single user to work through. Use multiple steps exclusively if the user is expected to do this work in one sitting, especially if there are steps with conditional logic.  

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

Forms with multiple steps may also optionally display a form progress indicator. 

An example of a multi-step claim form steps may include:  

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

Whenever possible, try to keep to one topic per step or task. This common practice the decisions for your users and helps people with cognitive disabilities to stay on task much easier. 

Reducing the number of fields on-screen per task or step can also prevent users from feeling overwhelmed. Although it may not always be possible, it is a best practice to stay under ten fields for each step. 

Form fields allow designers to provide context for each field. Context may be helpful to explain the expected format of some data (for example, MM/DD/YYYY for date inputs). 

Designers can also include references to existing case data to help the end user make decisions faster. 

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

Error management in forms is handled automatically. However, you may need to define the error messages and acceptance criteria for individual form fields. 

Try to prevent errors entirely. For example, it is impossible to set a date in the past for scheduling future events. However, when errors cannot be prevented, clear error messages that explain the expected solution must be provided. For example, Your password must be 8 characters long.

It is possible to create validation logic that verifies outside the normal flow of entry, in which case the server returns errors. This validation logic is typically done for very heavy processes that cannot rely on client-side validation. 

Pega supports the unique warning state for fields. You can use this for cases where something may soon become an error (for example, an expiration date that is set that is too close to the current date). 

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

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

Cosmos forms components either use a single column or dual column layout. The types of controls being used determine this layout. Simpler controls, such as a text input or combo-box, use the dual-column layout, whereas 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.