I am new to UI development and need some guidance on the following problem.

I have a long list of options (100+) for which exists multiple (in)compatibility rules. A (in)compatibility rules is a simple logical statement (AND only. No other logical operator used) indicating that the options are (in)compatible.

I am trying to design a UI that allows for a user to view and maintain those rules.

My problem resides with the following requirements:

  1. The rules can but are not limited to pairs. (see example below)

  2. Rules maintenance should only require minimum use of the keyboard, if at all. Ideally, rules could be created, updated, deleted with the use of the mouse only.

  3. The user should be able to select to display compatibility or incompatibilities based on his preference. (Although I could negotiate this one out if a effective design complies with all other requirements)
  4. There is no need to accommodate for mobile devices. This is a desktop-based application with decent screen real-estate.

Below is an example of what the rules could look like for a list of options (A, B, C, D, E, F):

  1. A & B & C are incompatible, but A & B, A & C and B & C are compatible.
  2. D is incompatible with any individual option.
  3. E is compatible with all option individually.
  4. A & F and B & F are compatible. C & F are incompatible. D & F are incompatible by virtue of rule #2. E & F are compatible by virtue of rule #3.
  5. A & B & E & F is also an invalid configuration

Previous projects I worked on only involved compatibility in pairs for which a lot of effective designs already exist. I am failing to get inspiration on how to effectively design for the above requirement and would greatly appreciate some advice. Thanks for having taken the time to read my question.

EDIT: Based on comments and responses (thanks for those !), I believe my original question was somewhat misleading. I am not trying to design an UI that allows the user to select options for a given product. I am trying to design an UI so that a product manager / product engineer (an individual well acquainted with the product) could maintain the compatibility rules associated with those options.

Those compatibility rules will later on be used by an option rule engine to determine if a user-selected configuration of options is valid or not. But this is a separate concern.

What I have come up with to date (and I am not satisfied with it, hence my question) is a N x N matrix type design, where N is the number of options and where each cell denotes the compatibility status (compatible, incompatible, conditionally incompatible). The matrix would have filtering capabilities in order to ease navigation through the matrix. The matrix will be read-only with single row selection capability (corresponding to one option). Upon row selection, a rule editor (modal form or separate screen section, undecided to date) will appear to allow for individual rules to be maintained.

Below are rough sketches of the concept with random rules shown. First sketch is the matrix, second is the rule editor

enter image description here

Main issues are

  1. On the matrix view, the question marks only provide partial information. I could add a tooltip on hover, but wanted to explore other design alternative from the community first.
  2. Number of clicks / views required to go through before editing the rule
  • Could you add a less abstract and more contextual example? – Zoe K Jan 13 '16 at 12:39
  • @Zoe, please see edit. Is this sufficient? – Cédric Jan 13 '16 at 14:34

Apart from your existing design with the table, which could be slightly improved for better UX, for instance, compatible options highlighted on hover and some other icons (check mark for compatible, and so on), I only see a visual diagram solution. A good example for your case would be peoplemove.in — a Sankey diagram showing distribution of connections.

enter image description here

If you click on one country, it shows the connections that belong to this country only (migrants to and from it).

Similarly, you could show compatibility with the connections. The rules could be present in the same table you are using, either in a modal window or a small frame on top right.

A similar solution is used in the Quartz Composer, where it also serves as a control interface.

enter image description here

  • Thank you for the suggestion. I will review the references you mentioned. However, I think I will be constrained similarly to the table design. I will have to play with the properties of the links (color, line style,..) to distinguish absolute incompatibility from conditional one. This could nonetheless be an interesting alternative. – Cédric Jan 13 '16 at 19:55
  • Yes, I understand. Implementation of such solutions is typically the biggest pain. – Zoe K Jan 14 '16 at 7:15

Beside your Problem with the rules I see another one with the amount of options. How does the user find the right option. But back to the original problem. I supose there is a long list with all the options. These could be checkboxes. If there is a incompatibility the option wich is not checkable anymore could be desabled. To let the user know why this is the case you could have a info icon behind the desabled option with a tooltip that explanes the reason for beeing desabled. Somthing like this:


download bmml source – Wireframes created with Balsamiq Mockups


I think, if you've reached a point where you're going to present the user with a set of controls based on an n-dimensional compatibility matrix, you've gone wrong somewhere.

Another way to solve your problem may be by chunking or breaking the options into discrete sets that only have internal compatibility and presenting them to the user depending on a selection or choice made at a higher level.

Under the hood these controls may be repeated in various groups but, on the surface, the user will only see the group that has direct relevance to what they are trying to achieve which SHOULD mean that the controls have obvious relationships with each other and therefore easily understandable compatibilities.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.