Selecting options and variants of these

Question

I am trying to create a selection of scales for graphs (called "Maps" in our terminology). The scales have two aspects: there is a color key (what range of colors to use), and there is a step size (how do we map a range of values to each color). Each color key may support one or more different step sizes. As we need to make this choice for four graphs independently in a single dialog, I'm trying to keep this compact.

To give some context, the current color key selection looks like this:

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

Note that the unit domain only changes the units for the top two maps, the others have a fixed unit. Currently, we do not have many variants for the keys, so the list is manageable in size. The item that does have variants just has them included in the list directly. However, as we are adding variants for all but one item in the list, we think that this solution no longer works. We would end up with four entries for most of the scales.

What the options presented are depends on the graph and the chosen unit domain (Diopter or millimeter), but lets focus on the selection of the color scale and its step size for now.

The range of options we need to start offering looks like this (for the maps in Diopters, it will be a bit different for maps in millimeters):

^{download bmml source}

So, what would be a good way to handle such an item/subitem selection in a nice way? Something that is intuitive to use, but does not take too much space or effort... I have already played around with some mockups for different solutions, but as I don't want to steer or influence your suggestions, I won't post them (just now).

Answer 1

Honestly, I think you should just display the whole table of potential entries and allow selection of one per column (if that is the appropriate restriction)

Then you can enforce a simple UI rule: when a user picks an entry that has multiplicity, it will highlight all the options that match to make it clear what the user will submit to the next step.

So say someone picks Diopmeter in the radio button up top. Then you have a fixed height and width space that gets filled with the relevant table (the image up there).

So then the user clicks on European and it colors that cell in to show that's the current selection.

Then the user clicks on Absolute and all the entries matching "Absolute" get colored in, so the first three cells in step size all get colored in. This is a great approach and makes it very clear to the user what they are selecting.

I would recommend gradually stepping away from list boxes and especially never using nested list boxes if possible, because the greater the nest the easier it is for a user to make a misclick and if they have set up a nested list box delicately it could erase all their effort if they tamper with it.

If you want to minimalize the display you can start with one column and have additional columns show up as the user makes selections (with selections that are impossible greyed)