Mirakl Design
Mirakl Design
  • Getting started
    • Welcome to Roma
      • Design principles
  • Design
    • Components
      • Actions
        • Action menu
        • Buttons
        • Button group
        • File download
        • Save bar
        • Tasklist
        • Contextual Toolbar
      • Datalist
      • Datatable
      • Feedback
        • Alerts
        • Activity Loader
        • Badge (status)
        • Empty state
        • Snackbar
      • Form
        • Fields
        • Pickers
        • Selection controls
        • Tree
      • Images
        • Illustrations
        • Icons
        • Media
      • Navigation
        • Hyperlink
        • Page title
        • Sidebar
        • Top bar
      • Overlays
        • Modal
        • Popover
        • Tooltip
        • Side Drawer
      • Structure
        • Global layout
        • Panel
          • Activable Panel
          • Clickable Panel
          • Expandable Panel
          • Panel tabs
          • Totalizer Panel
        • Card
    • Patterns
      • Advanced selection
      • Configure options
      • Displaying data
      • Displaying history
      • Errors
      • Forms
        • Form - Creation mode
        • Form - Edition mode
        • Form - In a modal
        • Error Management
        • Stepper form
        • Onboarding form
      • Loading
      • Progressive disclosure
  • content
    • Writing for Mirakl
      • Grammar and formatting
    • Vocabulary
      • Mirakl products
      • Which verb to use
Powered by GitBook
On this page
  • Overview
  • Guidelines
  • Structure
  • Page Title
  • Progress steps
  • Summary (Optional Layout)
  • Savebar
  • Behaviors
  • Last steps
  • Returning on form
  • Error management

Was this helpful?

  1. Design
  2. Patterns
  3. Forms

Stepper form

Stepper is designed to help users fill a complex or long form. By deviding forms into smaller steps, we reduce users mental load and clarifies information structure.

Last updated 1 year ago

Was this helpful?

Overview

Stepper should be used:

  • For standard, sequenced experiences

  • For complex item creation

Stepper should not be used:

Guidelines

One topic at a time

Do not confuse users with mixed topics within a single step; keep one idea per screen.

Fields must be easy to fill

Provide enough context and guidance

Users need to understand why we're asking for specific information and how we will use that information. Add context and guidance to make the user feel confident.

Structure

Page Title

Therefore, you must not add an "Exit" option in the Save Bar : it will unnecessary duplicate the option and confuse users or make the interface appear cluttered.

Progress steps

  • Keep labels short and consistent (nouns for all steps, actions for all steps).

  • Steps are not clickable. Users must complete each step before going to the next one.

Summary (Optional Layout)

To help users complete forms, a summary can be added to the right side.

Adding a summary to a stepper form can be useful in the following use cases :

  • Provide additional informations related to the form to help users fill in the form (ex : add context to help create a new object)

  • Remind users of informations filled in previous steps of current form

For this layout, Form panel is 640px, Summary panel is 360px with 24px separation.

Responsive : The summary is not necessary for the mobile display. ROMA handle this automatically.

Savebar

Savebar actions are standardized.

  • A third action "Save as draft" can be added depending on needs. It will save informations as it is and exit the form.

When the user clicks the Primary button on the last step of the Stepper, the Async button gets a Loading status.

Save Bar sticks to the bottom of the page to be always accessible in case of scrolling page. If your page isn't scrollable, Save Bar will stick to Panel Content as following :

Behaviors

Last steps

For the last step, Primary Button content changes to "Save" : it indicate it's the final action on the stepper form. When clicked, the Primary Button changes its state to 'Loading' before saving and exiting the form.

Returning on form

If a user exits a stepper form without submitting it, and the form is saved as a draft, when they return, they will start from the first step of the form.

This is because adding a Summary is optional. Therefore, users might not remember the initial steps of the form.

Error management

Errors are managed automatically by Roma.

Users are aware of errors when the color of the relevant progress steps changes.

  • If there are errors within one step of the stepper, the user is automatically redirected to the relevant step.

  • If there are errors within several steps of the stepper, the user is redirected to the first step where there’s an error. The user can then navigate between the steps to solve their errors.

Once the errors are resolved, the user must save the step. If they fail to do so and click on the progress steps component, they will trigger a 'prompt before you leave' modal.

If an input is in an error state, but content is already filled in the Summary panel:

  • The input field remains in an error state until the user makes changes.

  • The content of the input in error is not erased.

  • The content in the Summary panel does not change until the user makes changes.

For onboarding experiences. Use the instead.

Never add an illustration to a stepper. Use the instead.

Use standard form components such as , options, , etc.

Unlike other forms where uses "Back to..." structure, here we use "Exit". It helps users understand this link will leave the form, not going back to the previous step.

Bar with validation steps, only usable within the stepper component

One with Back + Continue actions

Progress steps in error state

An appears at the top of the page, displaying all the errors from the current step.

Error management in forms
Onboarding form
Onboarding form
Back link on Page Title
button group
alert
fields
select
checkboxes
Stepper form with a summary