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).

  • I'm having trouble understanding the interface. How does step size relate? I see drop downs for color key but there is no control which shows step size
    – tohster
    Feb 20, 2015 at 0:17
  • Oh, it doesn't yet. The interface you see what we have. But now we are going to expand with all these step sizes, and the current UI doesn't suffice any more. What we have is a single list in which some color keys have a variant. What we are going to is a situation where almost all color scales (yes, name change there) come with multiple step sizes (variants). So, European, ANSI and American all come in the "Absolute" and Relative 0.25D, 0.50D and 1.0D step sizes, USS only comes in one step size, and Standard Scale comes in two step sizes. A valid selection is a Color Scale + a step size.
    – André
    Feb 20, 2015 at 7:20
  • OK maybe I'm the only one but I'm finding this very difficult to follow because the question has a partial interface which is already very complicated (the domain is quite technical), and you have more UX requirements for step size on top of that. You may want to either illustrate the totality of the UX problem, or just post your draft and ask if folks have suggestions for a clearer layout, because the requirements are difficult to follow in partial form IMO
    – tohster
    Feb 21, 2015 at 4:43

1 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)

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.