3

I have a list of country names (eg below)
enter image description here

I want the user to be able to either select a few countries or, select all countries except a few.

Now, this can be done using a select all button by selecting all items and then unchecking the ones that are not required. However, this creates a long query to be sent to the backend.

For example, if I want to select all countries except Argentina, the query would look something as follows:

select(Australia, Austria, Belgium...)

I want to transform this query to just

except(Argentina)  

How do I display/convey the user that he/she can either select countries that he wants details about or countries that he doesn't want details about?

  • one way can be like this answer, ux.stackexchange.com/a/54782/9749 – Serdar Buyuktemiz Jun 19 '18 at 7:15
  • The 'long query' problem of Select All can be solved like this: Have an internal boolean collectionModeExcept; once the user hits Select All, internally change the collectionModeExcept to true, and start building a list with all unselected items as the user unselects a checkbox. This way, you won't need to send the full list of checkbox selections. – SNag Apr 25 at 12:51
2

First, you should try to avoid deciding how something should behave on-screen based on the technical constraint of what you send to the server. You can use JavaScript to reflect some modified version of the selection as hidden inputs for submission without it affecting the UI.

Having said that, I think this is a good candidate for the list builder UI pattern (also called a dual list), which would allow you to add or remove individual items to the selection. You could add buttons for "Add all" or "Remove all" too. I suspect that would be a more natural interaction:

List Builder UI from Microsoft's Windows Design Guidelines
Image credit: Microsoft Windows Design Guidelines for List Boxes

  • Nice. I thought about this one too. Unfortunately it takes up a lot of space - and it's hardly suitable for mobile devices. But it's a great solution. – JonnyZoo Jun 19 '18 at 7:38
  • Good point about the form factor affecting the best solution here. I admit I would probably use a checkable list on mobile, with an option to select all items (and then deselect unwanted options). I would definitely deal with the technical constraint of posting the data to the server efficiently as a code problem rather than a UI problem though, and my gut says "invert selection" is an unnecessary complication. – Kit Grose Jun 19 '18 at 7:45
0

From the user perspective the most easy way is an "inverted" selector. E.g. I know software where I check two boxes and than invert the selection before I press the "search" button. But this requires a certain level of instruction and abstraction by the user.

One possible solution to skip the "invert" step would be to provide two buttons:

  • Search in all marked countries
  • Search everywhere exept in marked countries

I think this is the most convenient one.

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.