What is a good GUI design for selecting items with conflicts and dependencies?

Question

I'm designing a settings GUI component which requires the user to select items from an assortment. These items have conflicts and dependencies between them, so selecting an item might restrict you from selecting another and/or is only available if another item is selected.

Example

I'm displaying the items in a check list, but this isn't mandatory.

[] Java project
[] C# project
[] C project
[] Object Oriented utilities
[] Java Enterprise Edition components (JEEc)
[] Server modules

With the following conditions:

• Java project, C# project and C project conflict with each other (only 0 or 1 of these can be selected).
• Object Oriented utilities requires Java project or C# project to be selected.
• JEEc requires Java project to be selected.
• Server modules conflicts with C project (can be selected even if no ___ project is selected).

Thoughts about the List component

The problem with using a list GUI component is that it's not clear what the relations are between the items. Here are my thoughts of what can be done:

1. Gray out (and disable) any items which conflict when a selection is made. Ex.: selecting C project disables everything else.
2. Auto-select any required item if it's the only choice. Ex.: selecting JEEc selects Java project.

Combining points 1 and 2, selecting JEEc will also disable C# project and C project. If there are multiple choices for a requirement then with some decent logic it's possible to disable anything which conflicts with all of them. Ex.: selecting Object Oriented utilities will disable C project.

However, this can be quite confusing. Selecting one item can suddenly gray out and select multiple other items out of nowhere. A description panel on the side can list conflicts and dependencies to alleviate some of the surprise.

Thoughts about the Tree component

I though about trying a tree component, something like this:

[] Java project
    [] Object Oriented utilities
    [] Java Enterprise Edition components (JEEc)
[] C# project
    [] Object Oriented utilities
[] C project
[] Server modules

The main problem is that not all conflicts can be shown. In the top level, only the first 3 conflict which each other, and the last one conflicts only with the 3rd. This structure also requires to duplicate items for requirements (Object Oriented utilities appears under 2 items).

I think that while a tree is easier to work with visually, it fails to pass important information to the user.

Usecase

In practice, the relations won't be too complicated, but it can be something like (Requires 1 AND 2) OR (Requires 1 AND 3). The intended audience is programmers, so assume a fitting technical capability.

What would be a good UX design for this component?

Answer 1

Try a drag and drop style list builder. Available items will be shown depending on configuration chosen by the user, with info tips providing a description.

Instead of checkboxes turning on and off, use a dialog to focus the user and provide screen space to show them the results of their choices.

Allow users to explicitly drag an item, and see the resulting availability. You can add descriptive text to the items by expanding the item container (such as adding an error, or a warning, or indicate required pairings).

Otherwise the users might think that there's some bugs in the software, as checkboxes are turning on and off.

1. Start with a blank slate on the settings page:

2. Dialog: Use a left to right, drag and drop area:

Users can see available items styled in a way to suggest interaction.

• Hover can show drag handles (similar to moving an email in gmail).
• Info tips can provide some useful info about the component dependency or description.
• Provide a popover or links to documentation for more in-depth assistance

3. Disable conflicting items on left once a choice has been added to the container well for current settings

• a 'remove' icon appears once the item has been added
• hover on unavailable informs user that choice not allowed

4. For choices with required dependencies, indicate in available item on left.

• use required indicators (with some extra info on hover if needed) on both items to indicate dependency

I'm certain that I'm missing some logic or edge cases here (and help text needs some work), but it's a first draft, and would allow the user focus, hover info, explicit warnings, and a link to docs if the relationships and conflicts are unclear.