1

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:

mockup

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.

enter image description here

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?
  • 1
    dont limit the amount of things you can check with a checkbox. thats what a radio button is there for. unexpected behaviour = confusion – downrep_nation Dec 22 '15 at 13:30
2

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... enter image description here

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

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

1

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • You want the ease of use of a Tree View but its non mutual exclusive behavior and look does not suit you. I just wondered if there is another alternative to the treeview. I don't mind replacing treeview with set of controls or something similar, if that provides more intuitive UX. In this case consider to use another hack and change the L&F of the tree items. I use WPF and C#, so I can change items to be radio buttons instead of checkboxes. As I have said before, I also wanted to know if there was a better solution for my task than using treeview. Thank you for answering. – AlwaysLearningNewStuff Dec 24 '15 at 10:27
  • I added some practical alternatives. Hope they help but not sure they are better than changing the L&F of the tree. It depends on the the actual number of options and their values. – Assimiz Dec 24 '15 at 11:40
  • It depends on the the actual number of options and their values The tree I posted contains all the available options. I added some practical alternatives. Hope they help but not sure they are better than changing the L&F of the tree. I like the alternative. Currently I am trying to decide between keeping the tree (and changing checkboxes into radiobuttons ) or applying the alternative you provided. – AlwaysLearningNewStuff Dec 24 '15 at 14:05

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.