Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
    
That second checked tickbox - what field is actually ticked, the Fax or the QIS one? –  JonW Feb 25 '13 at 17:15
    
Neither. No text field needed for that one or for PDF and Web too. –  Christopher Keeler Feb 25 '13 at 17:20
    
Also, the Email text field handles multiple email entries and will grow vertically as more get entered. –  Christopher Keeler Feb 25 '13 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 '13 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 '13 at 17:24

3 Answers 3

up vote 4 down vote accepted

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.

share|improve this answer
    
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 '13 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 '13 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 '13 at 3:58

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

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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