There are many controls to choose from when designing a form. Choosing the wrong one can make your form hard for users to fill out. One control that’s often misused is the select menu. How to Use Select Input in Website Specially forms?
Recently we were engaged with the branding agency, which we had to create numerous of landing pages with different form to collect their visitors data. as we on going to the process of development of the forms, we face quiet a few flaws design and UX difficulty in forms, one of them was SELECT input, which comes to our attention more often.
You see the designer of the pages decided to use SELECT INPUTE for a many of the selectable option for user. this somehow put us in situation as we go trough development and testing. the options such as Gender, Phone Prefix, Numbers, Etc.
When to Use a Select Menu
Sometimes you’ll find a SELECT menu with 2 options and sometimes with more than 15 options. In both cases, the select menu is used wrong. When you have fewer than 5 options for users to select from, you should use radio buttons instead, This allows users to make their choice faster and easier because all they have to do is look at their options and click once.
so to make this more clear let’s starts with an example;
Jerry want the users to select their gender while they filling the form, in this case jerry’s options are only 2 “Male, or “Female”, so instead of using select option it is better for jerry to use the Radio button instead. in this case users can select the option faster and easier.
With a select menu, users have to click the menu, scroll to an option and click again. A select menu also keeps the other options hidden until the user clicks it. When you have fewer than 5 options, it’s better to visibly lay them all out on the form with radio buttons so that users can scan them quickly. as you can see in figure below.
A select menu with over 15 options is just as bad as one with fewer than 5. When you put that many options in one menu, you’ll slow users down because they’ll have to scan and scroll through the long list. Sometimes the list of options can get so long that the menu takes up the entire screen.
When you have more than 15 options in a menu, you should either reduce the number of options or use a text field to allow users to enter their own data. An open text field prevents users from having to fiddle with a long select menu and makes filling out the form faster and easier.
Grouping Options
If the options in your select menu have a hierarchy, you should split them into groups using the ‘optgroup’ tag. This allows users to find the option they want quicker by scanning the group labels instead of every single option.
Users won’t be able to select the group labels. They’re only there to give the menu hierarchy and make scanning options easier. Accessibility users also won’t confuse group labels as options because screen readers can’t read them.
Labeling Select Menus
Like other form elements, a select menu should always have a label next to it. However, you should also have a label inside the select menu that tells users what they’re selecting. The label should clearly and distinctly describe the group of options.
A generic label such as “Please Select” isn’t clear enough for accessibility users who use screen readers to fill out forms. Adding a label outside and inside the select menu allows all users to take action quicker without any confusion.
When to Use a Default Option
Most of the time, you should avoid giving users a default menu option. This is because if users fill out the form and accidentally miss the select menu, the wrong option could get submitted. It’s safer for users to get an error message for not selecting an option than to submit the form with the wrong option.
The only time you should give users a default menu option is when you are certain that over 90% of your users will use that option. This saves the majority of your users time from having to mess with the select menu.
