Alternative to checkbox matrix

Question

I'm a developer designing a portion of a UI the allows the user to select certain configuration options.

There are 4 different sections that can be configured.

1. Select countries, and then languages within that country. This is a multi-select. So you can select [{US, en-US}, {CA, fr-CA}, {CA, en-CA}]
2. Select tasks to run (15 different possible tasks, inclusive so that only those tasks selected are run)
3. Types of objects to run for. This is basically a set of filters for the data. You could think of it along the lines of filter out all male fish that are alive, all female cats that are spayed, and all female dogs that are not spayed. There are 8 different types of objects (fish, cat, dog, etc), each with 10 flags (spayed, alive, male/female, etc) although this isn't a pet store program.
4. Specific items to include/ignore (tasks are included/excluded for these items, regardless of whether or not they are matched by choices in section 3)

My initial idea was to have a matrix of checkboxes, but the business could require that to expand in either direction (types or flags) at any time, which could get ugly quick.

Another idea was an accordion, which then turned into an accordion of accordions, but that doesn't seem to be much better.

What other alternatives are there?

EDIT: Example of section 3

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

Checkbox Grid/Matrix

I believe you were on the right track by using a checkbox grid. It's just your design of it that needs improving. I would go with the objects as headers for a table and the attributes as the rows.

Benefits

• The objects and corresponding available attributes are clearly visible
• The selected attributes are obvious - emphasised by additional styling on the cell if required
• Easy to use/intuituve - no expanding or collapsing - only selecting/deselecting required from user
• Flexible - if more objects are added, simply add more columns and the table becomes scroll able horizontally. If more attributes are added simply add more rows

Mockup

Answer 2

You're correct about the matrix of checkboxes becoming ugly :) It's also not scalable to smaller screens (if that's a concern).

Several solutions come to mind:

MultiSelect

This seems like a great use case for a multiselect. The advantage being its scalable to nearly any number of potential options, only selected options are shown, and its searchable so if a user knows what they're looking for it can be really fast.

The example below is a React component called React Select so unfortunately its not a standard HTML element. This could be implemented in many other than React.

Standard HTML Select (Multiple)

If you're limited to standard HTML elements you can use a <select> element with the multiple attribute:

Tree Select

A tree select might be the best solution in this particular case. The tree select allows the user to drill down through the various select options. This prevents non-compatible combos from being selected.