How to present an optional binary choice without a preset value?

Question

How would you go about approaching a form where the user should pick one of the binary choices (yes/no) in the UI, but it should also not be enforced to block advancement within the flow.

So basically, an optional binary choice. Either YES or NO, or nothing at all. Using a standard checkbox wouldn't probably be efficient as the value would by default be seen as false if unchecked, and not "require" any action from the user if they intended to reply NO.

Our current approach (in the Android world) would be radio buttons (presented horizontally), but it still feels wrong. My iOS counter part is using something like a segment toggle, as radio buttons don't really exist on that platform.

How would you go about doing this (but not this?) in a good fashion?

Follow-up question: what about iOS? Is the segment toggle the way to go?

Edit: We would prefer that the user just picked between YES/NO, but if they skip picking altogether that's OK for now.

Answer 1

I would argue that the choices are not binary, but trinary (yes/no/none), so providing a third option of 'no answer' or 'neither' would be appropriate.

Answer 2

Some kind of "select" option feels the most effective way to go, e.g., the radio buttons you have, or a "button" which becomes selected when the user clicks it (the same functionality as a radio button, just styled to look like a normal button).

Because the question is optional, leaving both unselected on page load would be totally fine.

That said, I would also add a third option (e.g., "none", "clear") for situations where the user accidentally makes a choice. I've done it a few times filling out a form on mobile - in the act of scrolling down the page (swiping) I've tapped in an area I didn't know was there and made a selection. Because you're giving the user the choice not to answer this question (it's not mandatory) you'll be able to sanitize your data against these kinds of "accidental" choices.

Answer 3

Option 1: I would simply add the clickable-text "decide later" next to it, thus giving the user the feeling he interacted with this input in the form and can safely go on with the process.

Option 2: Use the asterisk to indicate mandatory fields. If this is the only mandatory field add the "optional" label next to it.

And yes, the segmented toggle is the way to go in my opinion.

Answer 4

You've run into one of the limitations of the default behaviours of common form elements such as checkboxes, radio buttons and such. There is no good method for having an optional radio button as it goes against its default behaviour: mandatory and mutually exclusive.

The only way to deal with it is adding another option such as 'none'.

Not adding a third option and displaying both radios as unselected upon entering the page will mean that once the user has clicked on an option, it is no longer optional as there is no way to unselect it. That's not really fair to your users.