7

What is the best way to layout a group of checkboxes and supporting form fields?

For instance, in this form the user can select several choices for a report delivery method. Some of the choices require additional information such a email address, fax number, or folder location.

I'd like to keep the checkboxes near each other so it is easier for the user to choose one or several report delivery options. Below is a screenshot of the checkboxes and supporting text fields. Supporting text fields will become active/disabled as the appropriate checkbox is marked.

enter image description here

Improve this question
5
  • That second checked tickbox - what field is actually ticked, the Fax or the QIS one?
    – JonW ♦
    Feb 25, 2013 at 17:15
  • Neither. No text field needed for that one or for PDF and Web too.
    – Christopher Keeler
    Feb 25, 2013 at 17:20
  • Also, the Email text field handles multiple email entries and will grow vertically as more get entered.
    – Christopher Keeler
    Feb 25, 2013 at 17:21
  • Now I'm even more confused. My comment was really about how the layout of your checkboxes is confusing because it's hard to see which checkbox belongs to which label.
    – JonW ♦
    Feb 25, 2013 at 17:22
  • Email, Fax, XML and CSV all has supporting text fields. The rest do not. The current layout is just a scratch board, there is no rhyme or reason yet.
    – Christopher Keeler
    Feb 25, 2013 at 17:24

3 Answers 3

Reset to default
5

Rather than try to put all the checkboxes together, I would list them vertically with any fields below or next to them. This way it is easier to scan, and the association is stronger between the checkbox and the fields.

enter image description here

Please note that I am suggesting the principle here, not the design.

Improve this answer
3
  • I was thinking of that type of layout, but with so many choices (and more may be added) I wanted to take into consideration the screen real estate and scrolling through a long list.
    – Christopher Keeler
    Feb 25, 2013 at 17:26
  • @ChristopherKeeler it's easier to scroll through a long list than it is to scan through a page full of checkboxes. This is one of the times where design and usability are at odds.
    – JohnGB ♦
    Feb 25, 2013 at 18:01
  • The other problem with horizontal checkboxes is that it can be harder to ensure that visually, the label is easy to associate with its respective checkbox. For example, with your mockup, it is likely that some users will think the checkbox for fax is the one on the left hand side and some will think it's the box on the right hand side. You also have the horizontal width to contend with if you go across the screen. You avoid both of these problems altogether if you align boxes vertically, as JohnGB suggests.
    – Formulate Information Design
    Feb 26, 2013 at 3:58
2

If you place your checkboxes vertically and fields with additional information for particular checkbox to the right of them it looks more logically. If you worry about growth of emails list, you can do it as text field with fixed width and two buttons at the right of it - Edit and Clear. Pressing Edit starts another form or control for editing the list, pressing Clear - cleares the list. enter image description here

Improve this answer
1

With JohnGB solution, you could only display input field when a asociated checkbox is active.

Exemple :

Only show input "fax number" when fax is checked.

Improve this answer
1
  • If you can expand your answer.
    – Mayo
    Oct 15, 2018 at 17:37

Your Answer

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

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