0

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

Poup with stepper on the same row

Stepper is shown below the modal title

Poup with stepper below the 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.

1
  • I tried creating a stepper tag, but it seems that I need 3000 reputation for that.
    – Alexei
    Jan 29, 2022 at 8:29

2 Answers 2

2

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)

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.

enter image description here

  • 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.
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.