When to combine comboboxes?

Question

Let's say that my GUI has two fields to configure: input and output. Both fields are implemented with comboboxes that may have the following values:

• Input Values: A, B, C, D, E, F
• Output Values: 1, 2, 3, 4

It happens that not every input value is compatible with all the output values. Let's say that it is only possible to have the following combinations:

• Combinations: A1, A2, B1, B2, C3, C4, D4, E4, F4

So whenever a user chooses a value in the input combobox, the output combobox changes displaying only the compatible output values. According to Nielsen, this should be avoided.

Interacting menus, wherein the options in one menu change when users select something in another menu on the same page. Users get very confused when options come and go, and it is often hard to make a desired option visible when it depends on a selection in a different widget.

My question is: what is the best way to deal with this? Is it a good practice to combine these two comboboxes into a single one (like in the picture bellow)? What aspects should be considered when deciding to combine comboboxes or to split them? Is there a better approach for this?

I have also seen that Adobe has an interesting solution for this: http://goo.gl/lRqet

Note that this is an interface for a web application to be displayed both in desktop and in tablets.

Answer 1

Long lists or where unavailable options don't matter

When you have long lists, or where unavailable options don't matter, you can simply leave them out.

Airline flight booking is an example of this. If I chose a starting point, I only care what my possible destinations are, and so this is far better than a list of all possible destinations with everything but two options greyed out.

If you were to show a full list, it would look something like this:

---

Short lists or where unavailable options do matter

In situations where the other options do matter (i.e. where knowing that you can't select them is important), or the list is very small, it is best to simply disable the options that are unavailable.

You can see examples of this in option menus in most apps.

Answer 2

Grey out the invalid/not-available options in the output field.

It is similar to the contextual menus we are so used to. Just make sure the user is aware of the relation between the two combo-boxes.

Inthe mockup, C is selected for input and correspondingly, 1 and 4 are disabled in output.

When you grey out the options, they are still visible, but, the user is informed that under the current state (of input selection) these options are not available.

It is a standard practice for contextual menus in all softwares. Here is a screen shot of an illustrator 'Object' menu with most of the options greyed out since there are no objects on which the actions can be performed.

Answer 3

There is no such thing as "one solution to fit em all" for this case (as probably there is no such thing as universal solution for many other problems in UX design). My advice is never to combine comboboxes though - it is messy and misleading.

You need to think about what do you want your user to achieve. Next try think about what you try to achieve.

Lets talk real examples:

Take a look at Apple On-line Store. You have an endless possibility of different product combinations (HDD, RAM, hardware, software etc). Instead of choosing from number of comboboxes that are cross dependent, user is guided step by step through screens where he can create the product he wants (by combining options) and when it matters he receives a radio button list of finishing possibilities such as amount of RAM of HDD size.

(Here I've already selected form my product type (i.e.. iMac, Macbook Air, Macbook Pro, Pro with retina,..), it's basic configuration (CPU type and basic HDD size) and I am finishing my order)

As a next example lets talk about changing profile on a site. We want our user to fill out a form which contains a country of residence and a gender. You know that your site is only available in USA and Canada. So instead of creating two cross dependent combo boxes you can fit it all in a single one (in this case it will be easier for user to fill out one combined combobox instead if two cross dependent):

This is not a silver bullet either - once your system evolves and lets say you expand your market to 100 more countries this solution will be useless (you will end up with 200 item combobox which is a mess).

Now lets look at list with a huge amount of different well known (the fact that they are well known is important) possibilities. Lets say you have a huge list of countries, then you have huge list of cities and then you have huge list of hotels options in each depends on previous selection. Guys from ostrovok.ru solved this by combining all three lists into single flat one:

You can start by typing first letter of a country, a city or a hotel and system will bring all the possible combinations. This solution is kinda useless though if you have large lists of items which are not known to user (for example your user is selecting from a list of engine spare parts where parts are named with a serial numbers like AJ-789-HG, AJ-790-HG,... - in this case you will need to introduce a way to distinguish items from each other).

If you have two lists, first one is huge and the second one contains only few options, you can represent first one as a combobox and the second one as a set of buttons, disabling the ones that are inactive for the current selection. Lets say you have a transcoding software in which you chose a codec and a resolution; your lists could look like following:

As you can see there are limitless number of possibilities how to solve the issue you are facing (and as you can see there is no need in such blunt solution as combining comboboxes); the few I listed here as an example are not even the tip of the iceberg. Answering few simple questions like what problem are you trying to solve and what problem is your user trying to solve will help you find the right path.

Answer 4

You can disable one of the combo-box until a selection is made and you can populate the second combo-box.

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

Answer 5

Combining comboboxes is only a good solution if there is a very limited, static set of items. Say you had three options: Print -> To File, Print -> To Printer, Don't Print. Two comboboxes (print/no, file/printer) is a bit of a waste there. But if there is a large number of possible options a single combobox largely becomes unweildy as you have to list all possible combinations (N² instead of N), less any invalid combinations. This adds up fast.

I recently put together a "power user" version of this sort of interface; a little uglier but more powerful with a large set of options:

Selecting an item in the first column narrows down the options in the second and third columns:

We opted for this checklist solution over combo boxes because:

• The user can quickly pick individual items from each column
• Multiple selections per column are possible (important in our use case, possibly not yours)
• There are a LOT of options under the Ledge column and the checklist allows us to visually narrow the options down as the user picks items on the left columns. Invalid items are actually removed from the Ledge and Products listing because there are so many even greying them out wasn't enough. LocationIDs are greyed out because there are only a few and they're the "top level" of the selection process.

The problem with combo boxes is, unless your user already knows exactly which combinations are valid, they might not know how box 2 is populated based on box 1. The checkbox solution solves this by visually greying out or removing invalid options, which is more useful in tasks where users don't know what combinations are valid, like a search task.

If at all possible, selecting the input/output should disable invalid options for the output/input. You can asynchronously load the form elements this way to reduce loading times; not useful in the example, but imagine if you had to load a whole second form based on the first input; the larger your possible options, the more impactful an async option can be.

Answer 6

if its a form, my opinion would be to show compatible values in the 2nd/output drop down.. just imagine if there are 20-25 values in the 1st dropdown and 40-45 values in the 2nd/output dropdown..

you can see one good example here: http://www.acer.co.in/ac/en/IN/content/drivers , you can consider this option too.