1

We have a web form and the user is required to fill in atleast 5 (maybe more) select boxes. Our current UI layout (see below image) looks like alot of work to the user. Are there different UX Patterns (or UI inputs) I can employ that can make it (atleast look) less daunting to the user?

  • 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.
  • Are there better suited inputs I should use rather than select/dropdown boxes?
  • Would adding margins assist in making it look less daunting?
  • Maybe you're aware of similar forms that prompt for alot of information and I can emulate their design?

Is there any other UI solution that's better for such a case?

Current UI layout:

enter image description here

2
  • Does the job one act in addition? If I choose "Dev" and then after I choose "Director", then the UI becomes [Job:Sales Manager] OR [Job:Dev] OR [Job:Director] OR [Select One]. Do other fields act in addition? How do fields interact if multiple additions are made? (Fields OR within themselves, and AND with each other?)
    – Caius Jard
    Jun 8 at 9:17
  • (Cos I can see how that would quickly turn into a mess). TBH, it kinda feels like this question is XY; youre asking how to make an existing UI better, but it might just be broken for the task at hand. What is the task at hand?
    – Caius Jard
    Jun 8 at 9:17
0

If your business requires those fields as mandatory there are few things you can do. Maybe you can work to simplify the cognitive effort for the user. I tried a quick'n'dirty sketch. To me there is no need to put a title for each combo box. I would just put a combo box with the first line in it as explanatory.

sketch

0

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

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.