2

I am building a wizard experience to guide a user through a complex setup flow. In the flow, some steps require more space and some require less space. Does it make sense to change the modal size on each step or to keep it the same?

Could you justify the answer with a reason?

2

There's no reason to make the users eyes constantly seek for where the commands for advancing are. Keep them in a stable area of the UI.

If you have a modal that's split among steps, users often think of the modal as a persistent view, with steps embedded.

enter image description here

Using a persistent size keeps the unity of the view, and you can size the modal as needed, relative to the viewport. The most important UI areas are consistent orientation ('How many steps, and where am I?'), and available actions ('How do I advance / go back?'). Keep them steady...

For denser, scrollable steps with more inputs, you can have a visible scrollbar, and enable the Next button when required fields are filled.

| improve this answer | |
1

Don't change the modal size! In wizard flows, keep in mind that your next, previous, skip, finish buttons will be the primary way to navigate. So it's better to keep them in a consistent place such as the bottom right. As users go through your wizard they will get used to looking for this navigation in a certain part of the screen. If your modal box size keeps changing, the position of these buttons will not be consistent, and would take users slightly more effort to look for the new position.

If you got too much content on a single step, consider splitting it across another step or two.

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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