22

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

content

  • 2
    Do you hide the blueish "Select attachment" section if I select "by mail"? Or is it always visible? – Nash Oct 22 at 8:58
  • 1
    Yes "Select attachment" box doesn't show to user if something else is selected than "as attachment". – Robert Oct 22 at 11:39
  • 4
    If at least one of the options provide more content related to selected option, what about changing the order: 1 - Already delivered 2 - By mail 3 - As attachment – Danielillo Oct 22 at 12:14
19

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:

enter image description here

| improve this answer | |
  • If the page is too small to accommodate the new content and the other options, then it is too small to accommodate the other options and the new content. Which means that they won't see that the new content has appeared when they select the option. Also, Comic Sans is generally looked down upon. – Acccumulation Oct 23 at 23:17
  • @Acccumulation: Comic Sans is a great font! Also, I used Balsamiq Mockups, so take it up with them :D – musefan Oct 26 at 11:30
  • You might also consider changing the radio buttons to a three-way horizontal toggle, with the additional control under it. – Andy Mercer Oct 27 at 13:13
12

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.

| improve this answer | |
  • 1
    Agreed, I would also suggest aligning the dropdown and button to the right of the radio if space is available. – Kodos Johnson Oct 22 at 21:57
  • But you can't use as flashy of animations to bring it on to the page this way... jk. I like this idea a lot actually. +1 – TCooper Oct 23 at 0:26
1

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.

| improve this answer | |

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.