What is the best interface for multi selecting from a list?

Question

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?

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.