I'm trying to design the best multi-select list. User needs to see in one column active items and inactive items in second one and needs to have a fast and clear option to on and off selected items.

I know there are some topics regarding to this subject on Stack and some well established patterns to solve this problem, but I don't find these patterns neither efficient nor self-explaining.

So I propose other solution (image) due to technical restraints there is not option to make items active/inactive immediately as user click switcher, he needs to click switcher (change the state of the switcher) and confirm action by clicking "Activate" button.

Do you think this solution will be clear for the user or should I dig deeper?

Multi-select flow

  • Are users truly "selecting" the items (in order to do something else with them) or are they turning a set of events on or off?
    – Nate Green
    Feb 19, 2016 at 13:53
  • I don't add this feature on the screens cause I don't want to make them too complicated but after switch on item will be able to set some parameters for it. Feb 19, 2016 at 14:34
  • Why isn't there a "deactivate" button for the active items?
    – jazZRo
    Feb 19, 2016 at 14:48
  • 1
    My mistake I should name "Activate" button "Save" now it could mislead people. Feb 19, 2016 at 14:49
  • @steppenwolf So, you are in fact turning something in the system on or off, but when they are turned on, the events expose additional parameters?
    – Nate Green
    Feb 19, 2016 at 17:24

1 Answer 1


You have two lists which communicate state, i.e. Active List and Inactive List.

But you also have additional state indicators with the switches, which also act as triggers for moving Events between the two lists. This could cause confusion.

If you have lots of Events, there will be a lot of state triggers (switches), and this will increase the visual complexity on the page.

It might be simpler to use a Shuttle List UI pattern to move Events from one list to the another, because this will reduce the number of triggers on the page, e.g. you will just need an Add button and a Remove button between the two lists to shuttle the Events from one list to the another.

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.