I have a wizard with multiple steps. In one of the steps I have to display information based on the checkbox selected. I can have maximum 25-30 input boxes in the mockup below. All these input boxes are mandatory fields and are related. They cannot be split. Is it ok to have scroll bar inside the wizard step. Any other suggestions.

enter image description here

2 Answers 2


Although i do not know what it is for, there can be some small changes that you can make in your layout. The best choice is align the steps according to these steps. If it is not dividable, then;

Try to have one column structure like you are designing a form, it will make it easier to follow if there is scrolling action. Hope that it helps.

for good karma

  • Do you mean that I should add scroll bar at the wizard level rather than in detail subdivision?
    – Deep
    Jan 14, 2015 at 19:49
  • Yes and you can do that when you change the layout. Scrolling is not something bad, not anymore.
    – Abektes
    Jan 14, 2015 at 21:44

My first impression is there's two things you could consider doing.

1) You could move the steps (which you currently have in the left hand column) to a top bar of the wizard, and have the steps always be present. The area underneath the top bar (let's call it the "content box") would always be visible.

That means, if the user is completing Step 1 and selects a checkbox, the fields would display in the "content box"-- but not in a separate scrollable box. If the user scrolls down, the info in the "context box" would scroll, but the top bar (containing the steps) would always remain present.

2) If you'd rather keep the steps in the left-hand column, you could have the right hand column behave in a similar way that I described above. For example, if the user clicks a checkbox, the fields appear below it (but not in a separate scrollable box you have wireframes). Instead, they would just appear below the checkbox, and the user can scroll within all of the "content box" info in the right-hand column of your wizard. The left-hand content (containing the "steps") would not move as the user scrolls.

Let me know if any of this is unclear and I can try to clarify!

  • Thanks I would like to go with option 2. Can you please explain why having fields below the textbox is a better option than scrollable box. I will need it to convince others.
    – Deep
    Jan 14, 2015 at 20:33
  • It is simpler for the user to navigate because they can have their cursor anywhere in the wizard's content box (again, that's what I'm calling the right side of the wizard). Since you said it was mandatory for the user to complete the fields, I think it would also make sense because the mental model would be: "I need to complete Step 2. Step 2 requires me to complete these text fields" (It doesn't need to have a separate section because it is part of Step 2). One thing, though - do you have content beneath the text fields that the user needs to fill out? Jan 14, 2015 at 20:59
  • No there is no content beneath these text boxes, only one checkbox above them which should not be scrollable.
    – Deep
    Jan 15, 2015 at 6:55
  • Ok - cool - then I think that would work well (just add the boxes under the checkbox and make the whole right hand window of the wizard scrollable. Do you think that makes sense? Jan 15, 2015 at 17:05

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.