0

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?

enter image description here

4
  • Can you specify the context of this dialog box, better? What comes before, and what comes after? Also, any specific reason why you have radio boxes, but not a dropdown to select a value? What is the significance of the icons that you have used? Why the last item does not have an icon? What is the use case? Will this be for a mobile interface? A tablet interface? A web interface? Those are a lot of questions. :) But if you can specify the details of your question, in a detailed manner, it'll be easier for other's to give you a productive answer/views.
    – Chandan
    Sep 1, 2019 at 9:24
  • 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?). Sep 1, 2019 at 9:35
  • Thanks. Can you add the whole description as part of your question, by editing your question?
    – Chandan
    Sep 1, 2019 at 10:27
  • Okay, I've updated the original post Sep 1, 2019 at 10:34

2 Answers 2

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
1

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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