5

In my traditional desktop app (not web app), I have a screen with a relatively short list of items (typically 10 - 20), from which the user can select any combination (including all).

The items have multiple attributes (3 Boolean flags and a tag).

My initial thought was to use checkboxes and a combo box. The issue I've found is that if a tag and 2 checkboxes are selected and the user unchecks a checkbox, the items selected are no longer reflected by the attributes selected/ticked.

To complicate matters, the user can directly tick/untick any item(s) in the list, the tag & checkboxes are merely shortcuts.

Example: I've ticked Diesel, but unticked Convertibles.
The list of cars selected now doesn't include the SLK, which is diesel but isn't selected because it's also a convertible.

Car Selection mockup

I can think of 2 possible solutions (neither of which seem ideal):

  1. Make it clear that the list is a result of which attributes are unchecked as well as checked (I may need different UI controls rather than checkboxes).
  2. Design the screen such that the selections are actions only & aren't expected to reflect the items selected.
Improve this question
4
  • 2
    It is hard to understand you question, it is rather complex. Adding wireframe with the case you describe will help to give you a better answer.
    – Alex Ovcharenko
    Commented Jun 3, 2013 at 13:00
  • @AlexOvtcharenko - I've managed to add a screenshot example - I didn't even know about the UI wire-frame tool!
    – SteB
    Commented Jun 4, 2013 at 7:50
  • what happens if i check the SLK now? does it automatically check the convertible box in the above div? also what all is included in the drop down?
    – BatlaDanny
    Commented May 31, 2014 at 7:16
  • @parthpk92 - Under option 1, yes, under option 2, no. I keep meaning to post the actual solution I used, which is only a means for (un)selecting items in groups/batches and does not reflect the current selection.
    – SteB
    Commented May 31, 2014 at 20:58

4 Answers 4

Reset to default
1

Possibly, you could try experimenting with a natural language search/filter UI. I am still not very sure of the context, but for the given scenario, something like this could be easy for the users to make sense quickly - See attached.

enter image description here

Improve this answer
1
  • I like this version. The "options to choose from section" should only include those cars that are in the selected categories.
    – Yvonne Aburrow
    Commented Jan 7, 2016 at 13:09
0

It depends of your task. For example if you rent a car the user could filter car list by some parameters but still has some preferences on car model. Then the solution could be as on my picture, just color-code the cars which are matched the filter, see picture. The filter serves as hint but user still able to choose any car.

enter image description here

If you prefer rigid filter then just hide options which are not matched.

Improve this answer
2
  • Interesting idea, though the user should be able to tick any item at any time. I'm thinking the quick-select options at the top shouldn't (and can't) reflect the state of the items, in which case, how do I make this clear?
    – SteB
    Commented Jun 4, 2013 at 8:47
  • SteB, the gray-colored items are not disabled, they could be selected anytime.
    – Alexey Kolchenko
    Commented Jun 4, 2013 at 9:06
0

This is less a UX question, more of a functionality question. You need to decide which of the following requirements your app should support:

  1. The user can apply only positive selection criteria - i.e. they can choose either to limit the selection to only Convertibles, or to ignore the convertible flag.
  2. The user can apply both positive and negative selection criteria, i.e. they can choose to select Convertibles only, or they can choose to exclude all Convertibles from the selection (even if they match the other criteria), or they can choose to ignore the convertible flag.

In case 2, I recommend you use a tristate checkbox. That should make it very clear whether the user is selecting positively, negatively, or not at all.

In case 1, I can think of two options:

  • Keep the three checkboxes (for your 3 boolean flags) visible at all times. In this case, unticking the Convertibles checkbox should change the selected results to include both convertibles and non-convertibles.
  • Instead of using checkboxes, use a small label with a delete button; in this case, the user simply deletes the label to reset the selection criteria.
Improve this answer
1
  • I see what you mean, I think I'll try your 2nd suggestion, a label with small "Select" and "Unselect" buttons. Hopefully this will make it clear the options aren't intended to reflect the state of the list items.
    – SteB
    Commented Jun 4, 2013 at 15:08
0

Here is my solution as my background is Interaction UI Design...

Why don't you add another control for Strict and Loose Matching criteria, it will simplify things

See my solution below LEFT is strict Matches and RIGHT is all possible matches

both options solution

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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