Radio vs checkboxes

Question

Can I get thoughts on which pattern is better (internal debate at work as to which we should be using)...

Developers favor radio buttons as there's no need for any error handling.

Thanks

Answer 1

When designing a user interface for a list of selections, whether to use radio buttons or checkboxes depends on the context and the user's interaction needs.

Use Radio buttons when you want the user to make a single, exclusive choice from a list of options.

Use checkboxes when users can select multiple items from the list. If it's possible for the user to choose multiple options simultaneously, checkboxes are the way to go.

But here we have an extra option called "both" as one of the selections in the radio button. It's better to reduce the no of selections for less cognitive load for the user.

Conclusion: Considering the Cognitive load it is best to use checkboxes cause the user can select either one or both also what if in the near future, there comes a third option eg:(Whatsapp OTP) then Both option needs to be changed but for the checkbox, you can just add it to the selection.

Answer 2

What I understand is that if they are checkboxes it is implicit that you can select one or more than one, on the other hand, if they are radio buttons, only one

In other words

Example #1 : email, post, or email and post

Example #2 : email or post or both

Answer 3

There's a lot that you can read over on NNG about this exact topic.

But in general and as has been mentioned, checkboxes are for multiple select and radio buttons are for single selection. Even though your team has a clever way for allowing users to select both "Post" and "Email", that isn't a match for the use case of radio buttons.

This trick also won't scale well, say for example you had 3 or even more options, not only do you now need to add several more combination radio button options, but the user will be left confused about their settings and what actual outputs will result.

There are some considerations you'll need to keep in mind, for example if it's required that at least one option be selected. But you can find ways around this, even if it takes a bit more error handling on the back end.

Of course your developers are going to favor the option that is easier for them, but that doesn't mean it will also be the option that makes a better product. If you take the easy route and make the developers happy, but leave your users unhappy, you'll quickly be headed in the wrong direction.

Answer 4

Your developers are right. Frontend validation is needed when it is possible for users to fill in incorrect data. In your case this can be avoided using the radio buttons with one option selected by default. This has nothing to do with lazy developers as it's usually better to protect users from a poor experience due to errors they didn't know they could cause. Don't confuse frontend with backend validation though. Backend validation is always needed to avoid misuse and malicious data.

I can understand that when more than three options become available, the radio buttons become inefficient. When you decide to use checkboxes, more effort is needed for an adequate UX:

• You need to give users instructions in advance about how many options they have to select
• You will have to validate if the selection is compliant and give feedback to the user

In your case, I recommend using the radio buttons since there are only three options. This means less instructions (less cognitive load) and less mistakes to make (and thus less frustrating error messages when instructions are not followed). For accessibility purposes I would also advice to rename the "both" option to "E-mail and post" or "Both: e-mail and post".