Multi-step form design part two: radio buttons, checkboxes and drop-downs

Welcome back! It’s great to continue our little conversation about how we can create a seamless and pain-free form-filling experience for users. In part one we touched on the importance of progress indicators and field labels. In this article we will talk about the difference between form controls and when to use them.

There is an abundance of control options available for online forms and I have narrowed the list down to three of the most effective and commonly used.

So, let’s get to it and take a look at radio buttons, checkboxes and drop-downs…

Are radio buttons musical?

While radio buttons are not musical, they could certainly be useful selecting your favourite type of music from a list. Let me explain, radio buttons are a circular control element representing choices in a list. They allow users to quickly scan all options and easily select their desired preference.

Here is what a typical radio button list looks like:

Fun fact about radio buttons:

There is a musical connection – they were named after the physical buttons used in old car radios to change stations. When one button was pressed, the other remaining buttons would ‘pop out’, leaving the desired button ‘pushed in’.

Usability and best practice

There are a few ground rules which are good to follow if you’re wanting to use radio buttons in your form design:

• For user readability, vertically-stack radio buttons. Side-by-side layouts make it difficult for users to review all options, compare them and make their preferred selection.

• Display no more than six potential choices. If you have more than six choices control options such as dropdowns are more effective.
• Radio buttons restrict users to making one selection, so comprehensive labelling is very important. In some instances, it is valuable to offer an additional button labelled ‘other’, supplemented by a type-in field. This will provide flexibility if a user’s preferred choice is not listed.

• Avoid nesting. To prevent confusion, keep all options at the same level.

Checkboxes

Unlike radio buttons, checkboxes are used when more than one option can be selected and are typically displayed as a square/tick graphic.

Here is an example of a standard checkbox list:

Usability and best practice

• A checkbox should be a small square that has a checkmark or an X when selected.
• Like radio buttons, lay out your list vertically.
• Present options in a logical order.
• Make checkbox labels obvious – using positive and active wording prevents user confusion and indicates their chosen selection as true.

Drop-downs

Drop-downs can be great when used correctly — they conserve screen space, help clean up a busy layout and prevent users from entering incorrect data. If structured correctly, drop-downs can be a usable and attractive design feature.

Here is an example of a typical drop-down control tool:

Usability and best practice

• Avoid drop-downs when typing may be faster.
• Make sure the label is in view when the drop-down is open.
• As drop-downs only reveal their options on click, consider using a radio button when there are less than seven options.

Making the right selection

Now that we know the ins-and-outs of radio buttons, checkboxes and drop-downs, we can help our users make quick, informative selections and breeze through forms with ease.

Stay tuned (Ha! Tuned…), in part three of this article series we will discuss best practices and usability standards around validation, error messages and contextual help.