|Multiple Select Element - Dropdown Box|
This is more of an insight into a usability issue that I was faced with this week.
We have a very complex form that requires the user to enter a multitude of information. The form fields have not been a problem for them since we've implemented just about every feature there is (character counts, validation routines, etc.) to prevent them from doing really oddball things in the fields. ;)
One part of the form has two Multiple Select Elements that require them to make at least one selection from each and a maximum of five selections on one of them.
Picture this, you are dealing with an industry of people who do not use the Internet that much and are just now starting to realize the benefits of email. Put a Multiple Select Element or Dropdown Box as some refer to it, and watch what happens! ;)
Many users do not understand the concept of Ctrl + Click to select multiple options.
So, we've taken away those selects and have now set it up so they can easily select from a list at left and add it to their selected list at right. And vice versa. Whew, what a relief! The amount of emails that came in right after the form was launched concerning those menus was like a smack in the face. You learn a lot when you build forms for users who are inexperienced at filling them out. ;)
Interesting. Only yesterday I recoded a multiple select menu because I realised a one-handed person would have great difficulty holding down a key and clicking a mouse button at the same time. Try it yourself, it's very, very tricky!
So I changed the select to a row of checkboxes instead. Hopefully that is more accessible.
I assume normal select boxes are easier to understand. Make it fancier and people won't recognize it any longer. Don't try to explain to them how it works, they should know how to use it while working with it.
I'm a heavey user, but I bet i would make mistakes with a multiple select box. It's just not very user friendly.
In many cases, if there aren't too many options, checkboxes serve the purpose much better than a multi-select list.
Interesting timing on this. I just advised a team I work with to replace their multi-select box interface with checkboxes -- their users were complaining! And this was an in-house application used only by employees who all received training.
How much more awkward such an interface must feel for the general public. It's very easy for the more technically savvy to make wrong assumptions about the general public. Even frames, when used too casually, can be a boggle for the average web visitor.
|if there aren't too many options |
Intelligent layout can resolve a lot of that. And with many option, there's also nothing user-friendly about a huge drop-down list where you can't even see all your choices at one time.
|Intelligent layout can resolve a lot of that. And with many option, there's also nothing user-friendly about a huge drop-down list where you can't even see all your choices at one time. |
I'm stuck between a rock and hard place on this one. I have a dropdown list for the visitor that they can select a specialty from and there are over 100 specialties. How would you handle that one tedster? Anyone? This is for a search option. One of many.
Some angles I would look at:
How many characters in the longest choice? (would a 5x20 grid of checkboxes be OK, for instance?)
Any chance to divide the list into sub-sections?
Must this be a multi select, or would repeat searches provide OK access?
|How many characters in the longest choice? (would a 5x20 grid of checkboxes be OK, for instance?) |
Yup, that is an option, but it would take away some valuable real estate above the fold. I'm trying to keep things tight and a dropdown was the best choice at the time of design.
|Any chance to divide the list into sub-sections? |
I've looked at that and the only option I have right now is to do it alphabetically (A-L/M-Z). There really are no sub categories within categories. Each option is unique.
|Must this be a multi select, or would repeat searches provide OK access? |
The multi select only applies when a member completes their biography. Visitors only have a dropdown to select one of the specialties for search purposes. Oh, I would never throw a multiple select at a visitor. I should have had that same mindset when I was setting up the form. We've addressed the issue though so that one is taken care of.
I'm more concerned about your comment of having a dropdown for visitors that they have to scroll through.
|Yup, that is an option, but it would take away some valuable real estate above the fold. |
How about a show/hide div (using display:none for the switch)
it's a BIG problem
there is some application using a select box with efect viceversa on ctrl. pressed ctrl=unpressed in web, unpress ctrl=pressed in web.
but any idea to make something similar on web without heavy scripting?
one of my flash idea is:
div with v-scrollbar, containing bunch of checkbox with each line, name="selectname" value=".." for php, no modified server code.
i'd prefer to make script for multiple select if possible, instead of thinking about on highlighting the checkbox when it's checked.
|I have a dropdown list for the visitor that they can select a specialty from and there are over 100 specialties. |
That's too many IMHO for a drop-down menu. I hate long menus that have a scrollbar. Unless it really can't be avoided, think of another method, like a second screen just for that stage, where the user can simply tick the line they want, while viewing all the options in one go - something not easily possible with a drop-down menu!
|That's too many IMHO for a drop-down menu. I hate long menus that have a scrollbar. Unless it really can't be avoided, think of another method, like a second screen just for that stage, where the user can simply tick the line they want, while viewing all the options in one go - something not easily possible with a drop-down menu! |
I hear you Hester, but, its a search page and I need to have everything compact and easy to access. Here's a general layout of the table...
- Zip Code: [Input]
- Radius: [Input]
- Specialties: [Dropdown]
- Gender: [Radio]
- Language: [Dropdown]
- City: [Input]
- State: [Dropdown]
- Country: [Dropdown]
The dropdowns are dynamically populated from the database. That way we don't have searches leading to empty pages. As each new member signs up and chooses an item from each of the areas above, that hasn't been chosen previously, the menu will then populate with that item.
We haven't reached the 100 mark yet on the specialties but that will happen within the next couple of weeks.
I don't really want to throw a long scrolling search page at them. The goal was to keep it tight and as much above the fold as possible.
As a side note, 9 out of 10 users (in this clients' industry) do not understand the Multiple Select Element. This includes both Mac and PC users. :(
|The dropdowns are dynamically populated from the database. |
So why is that different from producing a list of links from the database? If you're worried about screen space, you could always use a scrollable iframe.
A form can cover more than one page of course.
At the end of the day we have to consider what's least likely to put off users - a long drop-down menu, or a long list of links. Forget about what we as designers think is best. Accessibility and user-friendliness must come above all else. (Unless you want to lose visitors that is!)