Rebuilt my survey form

Hello.
I’ve just rebuilt my survey form project.
If you have time, I’d like you to look it over.
I made this page with bootstrap.
As I didn’t get the way to use multiple css files and js files in CodePen, I combined some files into one.
So the code seems a little messy.
Any recommendation and suggestion will be appreciated.
Thank you.

Nice survey form but one big suggestion would be to use a list box when the user has to select multiple options. Not dropdown lists. I know in this select element you have enabled multiple selection, but list boxes expose all the options right away and are meant for this purpose. They make it clear to the user that multiple selections are welcome, whereas a dropdown list is used for single selection only.

image

More info in this article: Listboxes vs. Dropdown Lists (nngroup.com)

1 Like

Thank you for your comment.

To tell the truth, I didn’t realize the difference between list boxes and dropdown lists very much.

I must admit that I chose this dropdown list without any consideration.

Let me ask you a question, if I may.

How do you decide which lists are better when facing trouble?
(I know it depends on the situation.
But I want to get your view, it will be a great help for me.)

I read the article you kindly taught me.

“Choosing Between a Listbox and a Dropdown List” section says,

There are 5–15 options.
----->

Use a dropdown if screen space is limited.
Use a listbox if it is not.

/// Yes, my project has 10 options.
And I want the screen space is saved. Dropdown is better?

Users can select one or many from the list of options.
----->

Use a multiselect listbox with checkboxes to imply multiple selection.

/// Yes, I let users select one or many.
Listbox is better?

I get stucked…

I know I shared the article with you but without going too much into its details (as to whether the options are less than 5 or greater than 15), just a rule of thumb I would follow is to use a listbox for muti-select and keep it short, just maybe a three-line-height listbox or so, in order to save screen space. But the reason behind this is that the user would know right away at the first glance that this question allows multiple selections.

Also, aesthetics wise, I would left align the name, email and birth year textboxes coz the rest of the elements on the form are left aligned.

1 Like

That makes sense.
I hope I will be able to say, “just a rule of thumb” as you did.
As I am a complete beginner, your advice is really thoughtful and helpful.
Thank you again.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.