Laying out radio buttons and text area in a dialog

Question

I have a dialog where I need to lay out radio buttons and their corresponding text and icons, and a text area. This is my current dialog layout, where the colors denote the icons. Note that the last item doesn't have an icon.

The dialog is to be used in a desktop app. The purpose of it is to type-ify the selected item. I chose radio buttons because drop-down would result in an extra click. The last item clears the type from the item, hence no icon (maybe I should add one?).

Is this the best this kind of widgets can be laid out? Any other options you'd recommend?

Answer 1

One radio button that clear selection in the others, Type 6, is quite misleading. If you want to clear, do that as a separate button, not radio button.

If you allow users to keep the whole radio button group unselected, then it may be not clear why you suggest user to select one. I think user first decides "do I need A or B?" and this radio group is relevant only for one of choices. That's why I'd suggest following:

1. First a radio group of 2 buttons (or a check box), where user decides something thing.

2. Based on selection in the 1st question you enable or disable the radio group of 5 elements. Then you don't need clearing of selected radio button. If user selected particular answer in the 1st question, he must select one of values in the radio group of 5 buttons.

    Do you prefer A or B?
    (x) Prefer A      ( ) Prefer B

    If A peferred:
    ( ) Type1   ( ) Type4
    ( ) Type2   ( ) Type5
    ( ) Type3

Answer 2

Suggestions:

• Lay out radio buttons vertically because horizontal layouts make it hard to tell which option belongs to which button.
• Consider adding a "None of the above" option.
• If you have too many options and not enough space, try a dropdown menu.

For reference: https://designsystem.digital.gov/components/radio-buttons/