Multiple choice with Yes/No but some are not mandatory

Question

I am looking for UI patterns for scenarios where the answer to a question can be Yes or No but the user can also choose to not answer the question.

The meaning is different in all the 3 scenarios.

An example is as below:

Q. Does the vessel have an approved Ballast Water management certificate on board?

The answer could be Yes or No. But the user can also choose to not answer the question. The question is not mandatory since the legislation is such that users can choose to ignore it.

What we also want is flexibility so that the question can become mandatory once the legislation comes into force. This can happen in a year's time. What is the best way of representing this on the screen? If users have chosen Yes or No they must have the ability to select 'No answer' again.

Answer 1

Radio buttons: yes, no, and no answer, with no answer preselected.

Alternatively, you can go for a slightly less "harsh" answer, and have a drop-down with yes, no and an initially selected Select an answer at the top of the list.

Feel free to change the copy of any of those to fit your needs, but those are your options from a UI technical point of view.

Answer 2

Allowing a user to explicitly not answer certain questions and making answers mandatory are separate stages. Think about how other form elements, like text input or the dropdown with a title row, allow a 'no answer'. Specifically, they allow this to be attempted, but upon clicking 'Submit', your validation should inform the user they need to provide certain answers.

In your situation, it seems that the required fields change over time, and a user may be required to return to the form to add extra information, or alternatively may be allowed to remove certain information.

While the Yes / No is unique in requiring a third option to represent "No Answer", I do not believe that it is obvious to all users that choosing the top 'Select Answer' in a dropdown is equivalent to "No Answer", or even that they can delete data from a text input.

I would therefore recommend that you enforce some consistency across all the form elements, and introduce a column for 'No Answer' with tickboxes or some other obviously clickable element. Upon clicking this, the relevant field would be set to the relevant 'no answer' (via JS for HTML forms). You may be able to integrate within this column an indicator as to whether the answer is required.

So for Yes/No answers, this could select a hidden No Answer radio element.

Unfortunately, I cannot think of a public example where this approach is used.

You may also consider wish to consider whether 'Not applicable' is meaningful as a distinct option to 'No' in each answer.

Answer 3

What if there were a checkbox indicating that this question is answered, then the radio buttons. when the user clicks a radio button the checkbox automatically gets marked, unchecking the checkbox clears the radio button.

[x]  (o) yes  ( ) no
[ ]  ( ) yes  ( ) no
[x]  ( ) yes  (o) no