Selected radio button shows user more content

Question

I tried to search info for my question but I didn't found it. I think I just can't find right search words because this doesn't feel to be very rare case. If you have topics about this I would like to check it.

Case example: User can choose one option out of 3 options. At least one of the options provide more content related to selected option.

Where this new content should be shown and why? How would this type of situtation done so it's accessible?

I made this sketch to make my question more clear.

• Example 1 shows new content between radio buttons
• Example 2 shows new content under the radio buttons

Answer 1

The problem with your first option is that having the attachment control appear between options will cause the subsequent options to jump around the page. In some instances this may even cause some options to be out of sight (off the bottom of the display). Overall, this can contribute to a confusing experience for the user, and is best avoid whenever possible.

Option 2 avoids the problem of option 1, and you might be able to implement it exactly as in your example and it should be fine.

However, I will mention a small downside to option 2: it isn't immediately obvious that the attachment control is associated with the selected answer, and perhaps doesn't even need to be acknowledged by the user.

Sure, most users will probably make the association based on the fact it is only visible when you select the "as attachment" option, but for some users it may not be as obvious.

Therefore my suggestion would be that you aim for option 2, but you restyle the attachments control to make it look like an additional "question". Having it look like an additional question keeps it consistent, and helps the user to identify that it is also a requirement of the form. It also give you the chance to explicitly state what type of file should be attached (e.g. a certification).

Also, as Danielillo mentioned in the comments, it might make sense to re-order your answers to suit this situation.

Here is an example:

Answer 2

One possibility is to arrange them as in your Example 1, but instead of hiding the “choose attachment” menu+button when other radio buttons are selected, you keep the menu+button visible but disabled/grayed out.

This combines the main advantages of your examples 1 and 2 — natural ordering, but no content jumping around. It also makes the whole interaction more predictable to the user from the start — they won’t be surprised by new content appearing, and they don’t have to select the “attachment” button to know that the menu will be available then.

The main disadvantage of this approach occurs with larger dialogs, with more options and more conditionally-available content. There, having all content visible can make the dialog too cluttered and difficult to comprehend at a glance. But here, the overall dialog is not too large, and there’s only a little conditionally-available content; so the extra clutter is minimal, and seems a worthwhile cost for the improved consistency.

Answer 3

Example 1 is a better option for few reasons. Primarily "less is better on the UI"

1. It's a standard interaction which is based on progressive disclosure pattern. It is better to remove unnecessary content on interface till it's needed (i.e in this case only if user chooses to "deliver as attachment", attachment option shows up. Till then it's hidden).

2. The connection between the related content and its parent is immediately obvious. In the second option you have bring extra design elements to show the relation, thereby further adding noise to the interface.

3. Other concerns of scrolling are in fact a bigger and serious problem in Example 2. In case if the select attachment goes out of the scroll, then the user will never know that the related option has opened below the scroll.

However, Example 1 will only work if the related content is a small task such as 'attaching a file". If the related content is more complex then this fails.