Include/Exclude interfaces

Question

I am trying to design an interface where the user can choose to include certain items from a long list and also exclude certain items. The usual interfaces that I see are of this type:

This interface is functional but seems very clunky. Does anyone have an example of a better interface for these inclusion/exclusion tasks?

Answer 1

Draggable interfaces can become awkward on touch devices.

What about having a + or - symbol button on each list item, to include/exclude. When clicking the exclude it could highlight in Red and include could be Green.

If the list is quite long you could have a summary list to one side, showing all the excluded and included items grouped together.

Answer 2

Here are some common alternatives:

• Multi-pick <select> elements, e.g. in Bugzilla, but perhaps it is not the most usable for very long lists:

• Checklist approach is used usually just for collecting input for the next task (like archiving emails), but it should be possible to save the selected list as well. Select All option tends to be available for situations when there are more options to include than to exclude. Search is usually necessary for long lists.

• On mobile, if the simple touch will open an item (like email), long touch tends to trigger the checklist interface and up to 2 actions can be assigned to slide left and slide right touch gestures..

Answer 3

If there aren't hundreds of items, I would make connected lists of draggable elements, categorized by Include and Exclude. All items could begin in the list that specifies their default functionality (included or excluded) and the user could move any or all items to the desired list.

Here's a fiddle basically describing the concept: http://jsfiddle.net/z8amhxL4/

Answer 4

I had this problem some time ago. And like you, I hated the idea of using the clunky standard two-columns interface for inclusion and exclusion. So I decided to make something like this instead.

Basically I let the user add groups, and then create the exclusions within each group. I also used an Autocomplete control that helped the user find the correct name of the groups.

My users in my test seemed to understand what was going on, but if you want to be certain, I would recommend you to test it on your users. This interaction model assumes that you will need to include something before you can exclude it. I do not know if that may be an issue in your particular problem.

Answer 5

Try and do this in a single list

A single list of selectable/unselectable items is usually easier for a user to handle. There are other ways to help the user see and confirm the list of their currently chosen items.

You could do this by listing all the chosen items automatically in another list off to the right or using a toggle button that quickly shows either all items or only selected items.

Make the entire row clickable so it is easy to check / uncheck the desired items and be sure to test it out with your target audience.