4

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • Can you run multiple countries/languages? Or do you pick one? And what do you mean with 8 objects and 10 flags? – PixelSnader Jun 17 '16 at 20:28
  • @PixelSnader I've updated the OP. Briefly, you can select 1 or more countries, and then 1 or more languages within that country. For the objects and flags, that's an example of the checkbox matrix. It basically acts as a filter for which things I want to run the tasks for (maybe cats, dogs, horses), and the attributes of those things I want to match against (males, alive, adult, etc) – Zymus Jun 17 '16 at 20:39
  • @Zymus can you select an object (e.g. horse) but then zero corresponding attributes against it? or does at least one attribute have to be selected? – Dave Haigh Jun 18 '16 at 13:10
  • @DaveHaigh At least one attribute needs to be selected. – Zymus Jun 21 '16 at 16:46
  • Cool my design suggestion on my answer would work then. – Dave Haigh Jun 21 '16 at 17:23
5

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

enter image description here

5

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.

enter image description here

Standard HTML Select (Multiple)

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

enter image description here

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.

enter image description here

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.