Display hierarchy of mutually exclusive options

Question

INTRODUCTION:

I am a software developer with no experience with UX/UI.

In original application I worked on, I had 4 mutually exclusive options from which user had to choose one.

I used the below design, which worked fine and was satisfying for the users:

^{download bmml source – Wireframes created with Balsamiq Mockups}

PROBLEM:

Recently I got a request to add additional options. This time users also wanted to see newly added options in hierarchical order.

MY EFFORTS TO SOLVE THIS:

I was not able to figure out how to use radio buttons or dropdown list for this new task so I have decided to use treeview control.

Users are satisfied with the way it displays hierarchy but they also pointed out it does not communicate well mutual exclusion of options to the user, because treeview uses checkboxes (new users may think at first glance that they can choose multiple options, which is not the case).

I have "solved" this problem by limiting maximum number of checked items to 1, but this is just a "hack" for me.

Below image represents real snapshot of the current treeview. Only nodes with checkboxes represent options that can be chosen.

QUESTION:

• I wonder if there is a standard pattern for dealing with this type of situation?
• If not, can you suggest an improvement that reuses the existing treeview, or suggest completely new design?

Answer 1

At the highest level of hierarchy, you must have option buttons - if you want them to be exclusive. Then comes the question of child items .. for example if there are option 1, option 2, option 3, option 4, and Option 1 has child items (which in turn are mutually exclusive, only one can be selected?), then have another set of option buttons under Option 1. Programmatically control value of option 1, based on any one of child items being selected or not. Option 1 to option 4 would be part of an option group. Selecting any of the option 11 12 13 14 would "select" option 1 by default. You might have to do some manipulating and custom coding here...

Check this out.. I found this. http://wwwendt.de/tech/dynatree/doc/samples.html

http://wwwendt.de/tech/dynatree/doc/sample-select.html

Answer 2

If I understand your problem correctly than it is a mix of a UX and programming: You want the ease of use of a Tree View but its non mutual exclusive behavior and look does not suit you. So, you solved the mutual exclusion but left with the Look and Feel of a check-box which is confusing the users.

In this case consider to use another hack and change the L&F of the tree items. I am not familiar of the platform you are using but many, if not all of the platforms allows one to override the default L&F of a component.

In the practical manner, here are two alternatives. The first uses cascading check-boxes. The cascading box is shown only if and only if the selected option has sub-options. And, you can always try to flatten the tree to a list like in the second mockup below.

^{download bmml source – Wireframes created with Balsamiq Mockups}