9

We've got a form that asks users if they are U.S. citizens. We want to make sure they answer that question.

One idea is to make it a checkbox, like this:

Are you a U.S. citizen?

[ ] Yes, I am a U.S. citizen.

The problem with that is that they could just ignore the question, which would be recorded as "not a citizen."

Another idea is to use radio buttons:

Are you a U.S. citizen?

( ) Yes ( ) No

The trouble with that is that it's bad practice to not select an answer in a set of radio buttons. And if we select an answer, then this would have the same problem as the checkbox.

Yet another idea is to use a dropdown. Are you a U.S. citizen?

Select One

Yes

No

This would require they answer the question. However, don't you find it annoying when you see a dropdown only containing 2 options?

6
  • 2
    Would you not simply make the radiobutton selection required before submitting the form?
    – user83018
    May 2, 2016 at 23:05
  • 3
    It's bad practice to not select an answer in a set of radio buttons? I haven't come across that before. May 2, 2016 at 23:19
  • +I go with checkbox with validation, less clutter on screen, and compels the user to select.
    – Venkata
    May 3, 2016 at 14:22
  • 1
    Yes, my original assumption is that radio buttons should never be left blank. However, now I've learned that there are exceptions to this rule, and those exceptions totally apply in this case. So, blank radio buttons for Yes/No is the answer. May 3, 2016 at 20:30
  • 1
    @Venkata: With a checkbox, there would be no way to validate -- an unchecked box could be either the user is not a US Citizen or they didn't bother answering.
    – Bill Dagg
    May 4, 2016 at 23:15

6 Answers 6

13

There're three cases that you have to be able to identify: yes / no / not-specified (i.e., user did not interact with this element). But if you pre-select yes or no then you won't be able to distinguish it from the not-specified case as you pointed.

I'd suggest to use radio buttons or a drop-down (as both options are mutually exclusive) without pre-selecting any of the options. And if user doesn't make a selection return an error message, highlight the required field, and ask for correction. Checkboxes communicate that more than one option can be selected.

2
  • 2
    Thanks! I think that's the best option. What hung me up was the convention of never displaying radio buttons without selecting one of them. I have since discovered the exceptions to this convention, which apply in my case. May 3, 2016 at 16:55
  • @PaulSeymour You should select this as the correct answer :) (use the tick alongside the left of the answer)
    – Tim Malone
    May 8, 2016 at 22:54
2

A simple form like you might see at certain kiosks have the choices embedded in the action:

enter image description here

This would inherently force a response while also removing the clutter of any "Next" or "Continue" buttons. A button is a one-click response.

Why not a radio button or drop-down?

It's far easier to push a button on a mobile device than it is to fool around with drop-down menus and targeting (and ultimately fat-fingering) radio buttons. There is likely also less text on the screen with buttons.

Why not a checkbox?

If your answers are mutually exclusive, then this is the wrong affordance. Secondly, you may not wish to implicitly provide a default value, which is always the case with a checkbox.


If you have thousands of questions, buttons may not be the best format based on page loads - but in many cases this is a better approach. You can of course neutralize the colors if your application needs to be more sensitive to non-US citizens.

1

One potential solution is to use a call-to-action type of interaction, so that at the beginning of the form you can have a button that says something like "US citizens click here" and "non-US citizens click here" that then helps to 'force' people into making a selection before proceeding further.

However, I would only use this if none of the other options you have tried tests well or works with users, as this is a rather heavy-handed way of doing something like this.

1

I would not esitate to use a set the interested checkbox as mandatory. In my opinion UX should take into account the marketing requests too.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

2
  • The problem with that is that multiple checkboxes can be selected. Unless you forced those checkboxes to break convention and act like radio buttons, the user could indicate that he both is and is not a US citizen. May 3, 2016 at 20:33
  • 1
    you are right, why don't use an empty radio button? When the page loads, none is selected, once the user select one, the "submit" button activates. If the user makes a mistake he can easily recover using the other radio button. May 4, 2016 at 13:05
0

I think the both options which you mention can be use with minor changes. you can give validation/constrain i.e. An error message "Please select your citizenship" when user press the submit button without selecting yes/no.

Short and sweet ! No need to think another solution and waste the time in such a small matter.

0

If the user selects a choice then make the selected button with a selectable style but also change the style of the other button to indicate that it is not selected.

The target is to make the user select one or the other.

Look at the design below:

Yes
yes

No
no

If you want to emphasize that this is an important choice allow the user to deselect the selected button like this:

no selection

This should bring the submit action to a disabled state as well so that you do not allow the user to proceed. But the more interesting effect is that the user can undo and revert back to the original state where nothing was selected and ponder what would be the best choice.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.