1

I have a form where there is a field with two options. Depending on which option is chosen, there are 1-4 additional fields that need to be filled out, as shown:

enter image description here

enter image description here

I think there are two problems here: one is that the horizontal lines grouping the fields end up making the radio buttons look like they are not related; and the second is that even without the horizontal lines, the related fields end up not looking like they are associated with the radio button - particularly for the second radio button.

Is there a pattern for indenting dependent fields? And if so, should they be indented so that they are aligned with the left edge of the radio button, or with the left edge of its label?

3

Your verification method's "actionable area" should be the same no matter which radio button is selected:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

When the user selects "Request Acknowledgement", update the actionable area to your e-mail form.

Providing a label for this section would not be a bad idea either.

(I'm having issue with the Stack Exchange format menu, preventing me from providing additional mockups. Sorry.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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