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:
The rules can but are not limited to pairs. (see example below)
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.
- 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)
- 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):
- A & B & C are incompatible, but A & B, A & C and B & C are compatible.
- D is incompatible with any individual option.
- E is compatible with all option individually.
- 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.
- 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
Main issues are
- 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.
- Number of clicks / views required to go through before editing the rule