4

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

steppenwolf
  • 681
  • 5
  • 13
  • 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 '16 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. – steppenwolf Feb 19 '16 at 14:34
  • Why isn't there a "deactivate" button for the active items? – jazZRo Feb 19 '16 at 14:48
  • 1
    My mistake I should name "Activate" button "Save" now it could mislead people. – steppenwolf Feb 19 '16 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 '16 at 17:24
  • @Nate Green yes – steppenwolf Feb 21 '16 at 02:22
  • @steppenwolf what will happen if someone activates an event and forget to save (activate button)? does it affect the user flow because you already activated the event but not saved to profile? There is a chance of user to get confused with the switch control and the button control. Sometimes the user activates the event and he thinks he had activated the event and skip to next task without saving. I think it's better to add a message to tell the user to save to make activation effective when he turns on the switch control. – Jaison Justus Apr 22 '16 at 09:51
  • I think you should dig deeper, but into this technical restraint that prohibits the use of the slider. Seems like a development shortcoming. – dennislees Apr 27 '16 at 05:17
  • @steppenwolf I would like to know for what purpose are you designing this and are you developing and is it a website or an mobile application. – divy3993 Jun 25 '16 at 16:40

1 Answers1

2

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.

SteveD
  • 8,914
  • 1
  • 22
  • 40