Saturday, June 17, 2017

gui design - Alternative to checkbox matrix



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



Answer



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...