Interaction for dependent sibling input fields?

Question

I have two fields in a form - Country and Organisation. These hold the same hierarchy and are dependent on each other.
Meaning, the user should be able to either select a country first and then select an Organisation that falls under the Country or, select an Organisation first and then select the Countries that the Organisation exists in.

So something like the following:
(If user chooses Organisation tab first, hovering on Uniqlo only displays the countries it is present in. If he chooses the country tab first, hovering over US will only display Organisations that are present in the US)

The basic question that I'm trying to ask the user is "What countries and Organisations do you need access to?" Say if "Country" is the first dropdown, a user wanting access to "BMW" in "whatever country BMW is in" would have to first answer "Choose country" and specifically filter and select "countries that BMW is in" and then "Choose org" with "BMW". It would make more sense for him to choose Org as BMW first as then select "All" option from the Country list. In contrast, a user wanting "All Orgs" in "India" would want the country field to be above the Org field.

I'm convinced that this is not an ideal design and could be very confusing for some but I also can't think of another alternative. Asking the user to choose "What would you like to choose first? Org or the Country?" seems like one way to go but still seems like bad design. Is there some clever design pattern for such cases? To throw in some context, this is for a web only admin access control UI.

Answer 1

I think this might be a better solution, in this example you can select from either parent and either hide or show the available selections in a highlight, you could also provide collapse controls on the parents to reduce the amount of space and a clear all.

Answer 2

You are correct in that the solution you suggested would be confusing to the user because it doesn't allow for both scenarios to be implemented in the same design pattern unambiguously.

The two scenarios to consider here are:

• A: Select a country first and then select an Organisation that falls under the Country OR
• B: Select an Organisation first and then select the Countries that the Organisation exists in

The first scenario requires selecting one item from the Country category and one item from the Organisation category while the second scenario requires selecting one organization and then selecting multiple countries. This means that you can simple create two sets of input fields that cater for both scenarios because they are not reciprocal so you would need the user to indicate which scenario they want but this makes the interaction less flexible.

One way to make the logic clearer is to represent the two lists in different ways so as to suggest a different interaction. For example, present all the countries available on a map, and when you select on the country a list of organizations pop up and the user can select an organization for the chosen country. You can then present all the organizations on a list, and when you select on an organization it is highlighted on the map and the user can select the countries that they want for that organization. Because the two lists are presented differently, the interactions vary as well and the logic will be less confusing to the user.

If you tried to do this with the same interface elements, it will be necessary to explain explicitly what the behaviour needs to be since there will be some ambiguity due to the similar of the two dropdown lists. Alternatively you can look at implementing dropdown lists with the list items as checkboxes or radiobuttons depending on if the other category has already been selected or not, but I do think this is quite complex and unconventional so you'll still need a lot of explanation to go with it.

Answer 3

Let's look at the components of your problem first:

We have two possible dimensions: Country or Organization

One single metric: Presence Yes or No

                USA  GERMANY  FRANCE
   Pizza Hut    Yes   No      No
   Mc Donalds   Yes   Yes     Yes
   Oreo         No    Yes     No

This is clear right? Now let's say we do this instead:

                USA  GERMANY  FRANCE
   Pizza Hut    Yes    ?       ?
   Mc Donalds   Yes   Yes     Yes
   Oreo         ?     Yes     ?

We are only answering the question partially. Which is what I feel your UI interaction does. One is clear, the other is not.

So you could do the following:

Use numbers or other indicator to signal availability. Chose the primary dimension to be the one with least dispersion. Meaning that you decrease the odds of having a long list of values that are empty (0)

  All Organizations ▽
  France (1)
  Germany (2)
  USA (2)

 Pizza Hut ▽
 France (0)
 Germany (0)
 USA (1)

Answer 4

The tag progressive disclosure answers the question. Don't change the way a simple dynamic dropdown works.

1. Pick either Country or Organization as the first combo-box or dropdown (Ideally, have the bigger list as the first one)
2. the system updates the second dropdown based on the selection
3. Pick the other item from the narrowed down 2nd dropdown

Simple. Why reinvent the wheel when dynamic dropdowns have worked so well?

Answer 5

It appears that for your question, user will have some country/organization name in his mind. 1. Have LHS side list box populated with valid country-org options. 2. Then, let user enter whatever country/organization he wants to enter, then filter options in LHS list box based on user's search criteria. RHS box will collect options user has selected out of LHS list box. Something like below -

Answer 6

I'd say there are two simpler options, depending on what you specifically need from the user.

If you want the user to give you all of their preferred options.

In this scenario, you want to know what their preferences are, no matter the conflicts. However, you DO want to inform them of conflicts.

In this scenario, show both lists at the same time, and have neither of them actually disable the options of another. Instead, reserve space next to or above the lists, and use it to state any conflicts.

I.e., if I choose US and Germany, great. Then I choose Uniqlo, no worries. Then I choose Oreo, which conflicts with the US. Both Oreo and US turn red (or perhaps a less severe color). Above or next to these two lists is space for additional information, stating: "One or more of your selections conflict: Oreo isn't available in the US"

This keeps the general interactions simple, and doesn't limit users from making conflicting decisions, merely informing them that there are conflicts. This is ideal if you want the user to sort of "dream big" and choose whatever floats their boat. They can decide on their own if they want those conflicts to stand.

If you want the user to avoid conflicts entirely

If you want to keep the interaction simple and avoid ensure the user avoids all conflicts, I'd nix the idea of co-dependent lists that affect each other. Keep it one-way, instead giving the user the ability to change what options are at either end of that one-way flow.

I'd recommend simply asking the user how they want to choose, and ordering the decisions accordingly. I'd be explicit, explaining why they're being presented with this system. I.e.:

1 - "In order to show you the countries or organizations you need, we first need to know which is most pressing to your decision: The organization you're interested, or the country it's located in? You can change this preference at any time."

2 - Dropdown or radio buttons with "Organization" and "Country" as the only options

3 - Once they've made a selection, display the first multi-select typeahead list below. This first list would be the option they first chose. Below that would be the second, dependent list (perhaps in an inactive state until they make at least one choice in the first list)

4 - Let's pretend they chose "Country". Above the displayed "Country" list, have clear microcopy explaining "The Countries you choose will determine what Organizations are available to you below.

5 - Once they make at least one choice, the second list activates. It shows all possible options, but conflicting choices are de-activated.

6 - If they go back and make a change in the first list that affects their choices in the second, simply de-activate those selections in the second, with clear messaging stating the outcomes. In this example, it would state "Your change to Countries conflicts with one or more of your Organization choices. The affected Organizations have been disabled."