forms – UX Pattern to make it easier for the user to fill many different select boxes

First of all, I wasn’t exactly sure what you meant by “user is required to fill in at least 5 select boxes”. Judging from the image, I assumed they were optional.


Maybe simply separating each select box on a new row would make it
less daunting? However it will take up alot more vertical space and
the user could be exporting 10 different people or more.

I don’t think you have to necessarily place each field on a new row, you can already accomplish a lot by placing the labels above the select boxes. This frees up enough space to allow you to keep all 5 select boxes next to each other and use less space than before.

The vertical space can be heavily reduced by making each step a dropdown, so the user has control and can decide to show/hide information when relevant to them. Example: When they are done filling in the select boxes for Kate, the user can hide the options under Kate by toggling the dropdown, and then show the select boxes for Esra.

Are there better suited inputs I should use rather than
select/dropdown boxes?

I believe that dropdowns are the most suitable input fields for this situation, because each question likely has more than 3 options. The only problem with the original design is that each question/field label also looks like an input fields or dropdown, because of the green borders. This can be really confusing. Also try to clearly differentiate between dropdowns with an options selected and those without an option selected. You can achieve this by making the selected option darker/bolder, or even with a green border on the dropdown itself. Dropdowns without a selection should always look neutral: grey, placeholder-like, text, and preferably copy that indicates no selection has been made, examples are: “Select one” or “Choose from list”.

Would adding margins assist in making it look less daunting?

Margins and paddings (or White Space) can definitely help bring clarity to a design. In the original design, all the labels and select boxes are really close together and differ in height and style. Labels should be supportive, don’t make them stand out more than the input fields. Keep sufficient padding between each option, so it’s easy to see where one question stops and the other one ends. It’s hard to tell how many questions/input fields there are in the original design, but you can make this more obvious by keeping the design and layout consistent.

suggestion-redeisgn