6

I'm building an application that allows users to fill out a self assessment of their business. We'd like to give users the ability to print their work with a few options:

  1. Print all questions/responses (including those that have not been answered)

  2. Print only questions that have been answered by the user.

  3. Print only questions that have been answered by the user, and match a particular answer(s).

These three options are mutually exclusive so they're a good candidate for radio buttons, but the third option presents some difficulty as it requires a sub selection.

This is currently how I have it designed:

Radio button group with nested checkboxes

Is there a better way to lay out this form?

6
  • is this a filter or a final step in a wizard?
    – Midas
    Commented Jun 26, 2017 at 18:10
  • A filter for items to be printed.
    – rickymetz
    Commented Jun 26, 2017 at 18:13
  • 1
    The horizontal divider is misleading.
    – jamesdlin
    Commented Jun 27, 2017 at 2:08
  • @rickymetz what happens when I select Only answers type as an option. Will all the options inside it will be selected by default? or none of them?
    – NB4
    Commented Jun 27, 2017 at 8:57
  • @NB4 presently no options are selected by default.
    – rickymetz
    Commented Jun 27, 2017 at 11:45

2 Answers 2

6

Use the 'expose within' radio buttons pattern

What you have is actually okay, but hide the checklists (or any other dynamic content) as Cody Reeves suggested here.

Luke W reviews this pattern in his book Web Form Design.

Here's an example from Chris Coyier's Codepen job form.

expose within radio buttons

If you adjust your design, you could probably get rid of the gray line underneath the last radio button. It makes the checkboxes look separate from the choice they belong to.

[1]: https://codepen.io/job/new

2

One solution would be to hide the checkboxes until the 'Only answer type(s)' radio is checked. This would ease most of the confusion the user may have with the current form, as they wont be offered all the options all at once until it is necessary.

2
  • 1
    I would recommend disabling via dimmed checkboxes and text or whatever visual cues, rather than fully hiding it. "Only answer types" standing alone doesn't make much sense, and users may not click it without knowing what options are available to it.
    – DasBeasto
    Commented Jun 26, 2017 at 20:22
  • @DasBeasto a good observation on the labels: perhaps he can revisit his wording to make it clearer.
    – Mike M
    Commented Jun 27, 2017 at 1:57

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.