Progressive disclosure

Reveal gradually information to minimize cognitive load for a more intuitive design experience.

Progressive Disclosure in Forms

Forms vary from simple layouts with few inputs to complex structures with many components. Progressive disclosure helps manage this complexity without overwhelming the user. This approach involves a strategic use of design elements to enhance efficiency and understanding.

Structuring Information in panels

Start by organizing related fields into panels or using panel separators.

This groups related information together, making it easier to understand and follow. Panels not only help in organizing the form but also make it visually appealing and guide users through the information logically.

Before adding a new panel, consider whether new fields can be accommodated within existing panels.

Example of the use of panels in a form that guides users

Dependency Dynamics

Enabling and Disabling Fields

Some forms have fields that depend on each other; the selection in one field can enable or disable another. Clearly show these dependencies using tooltips that appear when users hover over a disabled field. This helps users understand why some options are not available.

Example of the use of disable fields in a form that guides users

Stepper forms

For long or complex forms, consider using steppers. Steppers break the form into smaller, manageable steps, helping to reduce cognitive load. They are particularly useful when user choices affect subsequent options. Steppers ensure that the user remains focused on one task at a time, adapting fields based on previous selections.

Example of the use of stepper form that guides users

Considerations for Stepper Implementation

When considering a stepper, weigh its pros and cons :

Pros of Using Stepper Forms

• Guides Users Through Complex Forms: Steppers are excellent for navigating users step-by-step through complex object creation, reducing cognitive load and ensuring focus.

• Adaptive Fields Based on User Choices: They can dynamically adapt fields and options based on user selections in previous steps.

Cons of Using Stepper Forms

• Not Ideal for Viewing and Editing: Once an object is created using a stepper, viewing or editing it through the same stepper can be cumbersome. It's more effective to use a single-page form for these actions.

• Requires Design of Multiple Interfaces: Implementing steppers necessitates designing both the multi-step creation process and a complementary single-page interface for subsequent viewing and editing.

A single page of an object created through a stepper, allowing users to have a full picture of the object without having to go through the whole stepper

Applying Progressive Disclosure Beyond Forms

We can apply Progressive Disclosure principles when activating options using an Activable Panel. Learn more about Activating Options.

Expendable Panels

Use panels that expand when clicked, revealing more information. This method keeps pages clear and simple, revealing more content only when needed.

Exemple of how exepandable panels allow to reduce cognitive load

Side Drawer overlay

A side drawer can show additional details without overcrowding the main page. It's useful for examining supplementary information without leaving the current page.

Use of Side Drawer to diplay more information about an item

Limited Display with "See More" Trigger

Show only part of the content at first, with a 'See More' option for users to view the rest. This keeps the display clean while allowing access to more information as needed.

Two Ways to Use 'See More':

1. Expandable Wrapper: Clicking the button expands or collapses content within the same section. The hidden content appears directly in the panel where the button is placed.

2. "See More" Button: The button opens more content in a different component, like a modal or a new page.