Selecting/assigning values from a grouped list

I have a scenario where there is a grouped list of variables. The user can exclusively select variables from the control list (A) to an assigned list (B). So when a value is assigned from A to B it is removed from list A and added to list B.

Traditionally you might use something like this: enter image description here

Here I propose an alternative to being more contact, visually pleasing and involving fewer clicks thus being more user-friendly.

There is a list under a button that displays the grouped list. Clicking one item adds/assigns it to the selected pool listing in a tag style.

List to select items that are from clicking button

Here the pool of selected/assigned items in alphabetical order with an x to remove/uassign Shows assigned items with x to remove - unassign

The target audience is reasonably technical consultant level not everyday users.

The question is is this new approach OK? Or is there a better/more accepted, best practice, control for this kind of data? Or should I stick with the traditional one?

Update

Just to answer some of the comments.

  • The drop list under the add value button displays only those items that have not been selected already. When an item is removed from the pool it is again selectable in the drop list.
  • The drop list can be opened on a mouseover
  • The drop list closes once an item is selected/clicked
  • the items in the pool can be ordered alphabetically or by group
Tags: