Progress Steppers (Progress Bars) vs Tabs

Question

I'm currently designing an intranet application for my client.

About the application:

1. Users are required to fill in large amount of data (about 20-30 fields, depending). For example, creating a new form to request for a service. This is not a one-time thing as users can create forms as many times as necessary.

2. My team has designed a progress-stepper for the "add page" to break down the fields into separate pages to prevent users from being overwhelmed.

3. Once created, the user will be allowed to "edit" the information and submit again.

Here are some challenges that we faced:

1. During edit, some of my team mates requested for the progress-stepper to be removed, and replaced with tabs instead. Rationale for this is because they have already completed the form and no longer need a "stepper mode" to guide them.

2. The users want to navigate around the forms freely during "add", so this kind of makes progress-steppers redundant, we feel.

3. We have not tested the design, but we are afraid that it might be inconsistent if add page uses steppers and edit page uses tabs. (FYI, the labels for steppers and tabs will be the same but the look and feel will be different)

My main question is: Should I be consistent and use progress-steppers for both add/edit, or use tabs for both add/edit. Or, should I have a mixture of both and allow for Add pages to use steppers, and Edit pages to use tabs?

Answer 1

You can use both stepper and tab combined. This approach, if implemented correctly, can also be useful for improving accessibility as the WAI tutorial on multi-page forms suggests.

"If a form has a known number of steps to be completed, a step-by-step indicator can help users orient themselves. Visually hidden text is used to indicate the current and completed steps. If possible, provide a link to steps already completed, so the user can review them. In this case, any data already entered in the current step should be saved."