1

The user will be presented with multiple options (as radio buttons), and he/she must select one option before proceeding to the next step. The individual sections will be expandable/collapsible for the user to see the content within each panel before making a selection.

The problem I have is whether to place the radio button on the outside (left edge) and expand/collapse arrow on the inside, or vice versa. I'm leaning towards option A because they are interacting with a radio button, and the button is usually on the very left. The arrow icon can be in the inside because the radio button isn't part of the expandable/collapsible content. However, I received a different idea from my supervisor (option B), and I'm wondering which approach is more intuitive.

I've done a search on this and wasn't able to come up with any studies/results. Your feedback is much appreciated!

enter image description here

Improve this question
1
  • When does the content expand/collapse? When the entire header is clicked, when the arrow is clicked, or when the radio button is clicked?
    – Code Maverick
    Commented Apr 9, 2014 at 13:13

4 Answers 4

Reset to default
1

First of all I would propose looking at the sequence of your users. Does he need to read all three (or more) of the panels to make a decision? If so, wouldn't it be more practical for it to be expanded all the time? I can imagine having to expand every item and reading through it carefully can be a pain.

If it isn't then I would say look at the flow of the user again. His goal is to select a list. This is (in your case) done by a radio button (which I take you really want to use for this). So I would have this presented first (as in version A). I don't think that presenting the collapsing triangle right afterwards is the solution you're looking for, since it would suggest that the radio button is not linked to the label of a selection. I suggest moving the arrow/triangle to the right side of the label.

This way you have a radio button that clearly correspondents with the label and a collapsible panel that comes out of the label.

What I can imagine to work as well, is to move the radio button all the way to the right of the screen and have the triangle/arrow on the left side of the list.

Improve this answer
1

I think you should use option A, since in this case, the radio button has a higher hierarchy than the triangle. Leave some space between the radio button and the triangle so that the triangle and the title are grouped as a whole element.

Improve this answer
0

Some thoughts and questions for you.

  1. Must the user do this sequentially? If so, sounds like a bit of a wizard. You could do away with the radio buttons altogether, and disable the sections below the first, progressively enabling them.

  2. What role does the radio button really play? Typically, radio buttons are in pairs, representing an either/or status. Couldn't the user just click on the header section and expand the related data, not needing the radio button, thereby simplifying the interface? I'm not certain you need a radio button to make a selection. Focus and or clicking on the selection should be sufficient to reveal it.

  3. If it is necessary to show some status in the header section, and that role was played by the radio button, you could add an icon, like a check mark, to the completed sections. But I didn't read this requirement, so feel free to ignore.

Improve this answer
1
  • 1. No, they do not have to do this sequentially. 2. The radio buttons are there to allow the user to make a selection. They have to select one of the available options.
    – Vinson
    Commented Apr 8, 2014 at 17:00
0

If I have understood it properly, you have provided a list of options and you want your users to select either of the options (only one selection at a time) before moving to the next section. Also when any of the option is selected there is some content displayed (as tree) under it.

For the making the individual selection you have used the approach of radio buttons (to keep the selection unique) which will also expand the node to show its content.

Somehow mixing of the tree node notations and the radio buttons may make the user stop and think for a while on the result of the action (selection of option / expansion of node / both). I would suggest you use a simple tree structure where the selected node is highlighted. At a time only one node will expand (collapsing the other nodes) and be selected so you can do away with the radio button.

This is how I would prefer to do

This will keep the screen clean and the user experience better, since there is only a single option available with the node. Here it will be plain and simple click node > (system highlights node as selected) view details > move to next section.

Improve this answer

Your Answer

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

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