Form design in Cosmos
In case management applications, forms are a crucial element to design well. Work can only advance if users take action on the tasks required. Pega designers typically use the following guidelines for forms:
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:
- The contact’s personal information
- Their current residential address
- Their contact methods
- A description of the purpose of the claim
One topic at a time
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.
Keep it concise
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.
Provide clear context
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.
Note: Fields may additionally allow for a custom More information action that opens additional content in a popover for review if selected. Use this action sparingly.
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).
Form component selection
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.