Menu
  • UX Trending
  • UX PODCASTS
    • DESIGN UNTANGLED
    • UX CAKE
  • UX Reading Room
  • UX Portfolio Building
  • UX JOBS
    • Atlanta
    • Dallas
    • Los Angeles
UXShareLab… everything you need to know about UX and more…
for the user experience design community

Search

Browse: Home   /   What is a good GUI design for selecting items with conflicts and dependencies?

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

by UXStackExchange on July 24, 2017 in uxstackexchange

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?

Tags: UX Stack Exchange

Sign Up for the latest in UX News...

Enter your email address to subscribe to UXShareLab and receive notifications of new posts by email.

Join 834 other subscribers

Related Posts

Online test with 80 questions best practices
Online test with 80 questions best practices
What are the correct steps to build a SaaS B2B company UX experience?
What are the correct steps to build a SaaS B2B company UX experience?
How do coupon sites like JustHony automatically update 10's thousands of valid coupons that constantly change?
How do coupon sites like JustHony automatically update 10’s thousands of valid coupons that constantly change?
How should I visualize the average of two bars in a bar chart?
How should I visualize the average of two bars in a bar chart?

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

by UXStackExchange on July 24, 2017 in uxstackexchange

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?

Tags: UX Stack Exchange

Related Posts

Groups vs notebooks
Groups vs notebooks
Main navbar and sub-navbar
Main navbar and sub-navbar
Prototyping - chat tool [on hold]
Prototyping – chat tool [on hold]
looking for a name for UX pattern for "decision tree"
looking for a name for UX pattern for "decision tree"
← How to allow user to group records on a table?
In a job interview should you solve personal problems they’re facing at work for them? [on hold] →

Topics

User testing WordPress Plugins Universal Design & Accessibility UX Toolbox UI User Research Web Design UX Rockstars Visual Design UI design wordpress User Interaction uxstackexchange UX Design UX Jobs Dallas Usability UX Jobs in Atlanta web-app WordPress Gutenberg user-behavior UX User Experience uxbooth UX Jobs Los Angeles UX Jobs Atlanta

Feeds

UI UI design Universal Design & Accessibility Usability user-behavior User Experience User Interaction User Research User testing UX uxbooth UX Design UX Jobs Atlanta UX Jobs Dallas UX Jobs in Atlanta UX Jobs Los Angeles UX Rockstars uxstackexchange UX Toolbox Visual Design web-app Web Design wordpress WordPress Gutenberg WordPress Plugins

<span>recent posts</span>

  • UX in 2018: The human element

    • Anywhere
  • Three Takeaways from the Hawai’i Missile False Alarm

    • Anywhere
  • UX in 2018: Content

    • Anywhere
  • UX in 2018: Design, Development, and Accessibility

    • Anywhere
  • The Power and Danger of Persuasive Design

    • Anywhere

connect to uxsharelab

Enter your email address to subscribe to receive notifications of new posts by email.

UXShareLab. Copyright © 2018. All rights reserved.

  • Contact UXShareLab
  • UXShareLab Community
  • UX PROCESS
  • Recommended Reading
  • UX StackExchange