Placing the stepper in the same row with the modal title or below it

Question

Our team currently lacks a designer and the developers along with the PO must handle some UI/UX decisions.

We are defining a process that involves a modal that includes a big form split into three steps. The goal is for the user to understand the current step of the wizard-like process. My colleague handling this proposed the following to choose from (first draft, whitespace to be tweaked).

Stepper is shown on the same row

Stepper is shown below the modal title

I favored the second option because the title becomes less visible and there is an inconsistency between top-left and top-right (quite a different height difference between the elements).

I would favor the first option only if vertical space becomes an issue (we are trying to avoid scrollbars in modals).

The rest of the team favored the first option arguing that it looks nice.

I am wondering a designer's perspective when designing such UI.

Answer 1

I only have arguments to support the second option as valid.

A stepper is a visual aid to make the user understand the number of steps a process contains.

• Starting from the basis that it's an element with a clear functionality, its visibility prioritizes over aesthetics, so the "looks nicer" argument lacks a solid foundation.
• If the design is responsive, placing the stepper to the right (first image) in the same row as the title will force the developer to create a jump to a lower row for small screens (second image), which is still a design inconsistency that can be easily solved if the stepper is placed from the beginning in a lower row.
• Although the main functionality of the stepper is to convey the number of steps in the process, it also has a graphic function at a perceptual level. Many steppers serve as a virtual frame to define the area on which they act. In this case, it can clearly be the top virtual frame of the form. (See Gestalt law of closure)

• I understand it's a problem when the team lacks a designer. My advice is, don't be afraid of design, on the contrary, exaggerate any idea. The best way to understand a graphic element is by exaggerating its presence to the maximum, this helps to find the best final option. The contrast is the best ally to find valid arguments precisely because of its function.

• If finally the stepper should be placed in the upper right corner, it's also feasible, but it stops being a stepper as a UI graphic element to become a page index.

Answer 2

If you google Material Design stepper placement, you will see your second option is a better reflection of it.

Also you can think of pulling it out of modal, as well as placing Cancel / Next buttons on left hand side of the form, in reverse order.