1

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
Improve this question
2
  • 1
    I can see some problems with you approach. The open List hides the chosen items. The usual behavior of the dropdown would be, that it closes every time when an item is chosen. This would be anoying. If it doesn't close it is not very clear how to close it when done. What I can see is that the order of the items is different in the first and second approach. Is this by purpose or is it necessary to order them manualy? Seeing this I'd say stick to the "traditional" one, but I have not put much thougt in a other solution?
    – BrunoH
    Jan 13, 2016 at 9:54
  • 1
    How many selected items you have? I think it matters. Moreover I'd also keep original group ordering (if grouping were more important than alphabetical ordering then it's still important). I'd also move dropdown to another position to keep current list visible (unless you mute already inserted values, leaving them visible in list).
    – Adriano Repetti
    Jan 13, 2016 at 9:54

4 Answers 4

Reset to default
1

I would be more in favour of the traditional approach, at least when comparing it to your current design idea. As BrunoH mentioned, the chosen items are hidden once the dropdown is enabled. Users have a short attention span, meaning that they will probably forget the items they've chosen once they'll click the dropdown to choose another one. This would eventually also lead to just the same amount of clicks you'd have in the traditional version (click on dropdown, click to select, click to close the dropdown to see the list, click to open dropdown again). If you want to reduce the amount of clicks, I would therefore recommend you that you list the chosen items entirely on the right side (so that they're always visible).

You might also want to split the final list of selected items by "common" and "work". Users might get confused if the list of chosen items changes too drastically from what they see on the left side (since they do not only get grouped all together, but also sorted alphabetically). But this is not such a big issue, the one stated above is the thing you should fix.

Improve this answer
1
  • Hello thanks for the response. Just to give a bit more info I see the clicks going like this user mouses over add button > list shows > user click > list is closed and item added to pull. So one click to add an item.
    – Gurnard
    Jan 13, 2016 at 13:10
1

I think that your new approach is fine if you just make one change - ensure that the dropdown doesn't overlay the tags/options already selected.

Other considerations / potential enhancements you could make (pending on the context):

  • If your grouped dataset becomes quite large with options to choose, switch the dropdown list to a combo box. An example of how grouped data options have been used with a combo box is in Salesforce's lightning setup menu (as I'm answering on my phone I don't have a screenshot to upload)
  • If each option can only be chosen once, consider removing that option off the dropdown menu once it has been selected

Any further questions feel free to ask!

Improve this answer
1

You could use something like a Chosen Jquery Plug in which integrates the two controls you showed in your post , an auto complete, a drop down all into one. Its very compact, user friendly, intuitive.

https://harvesthq.github.io/chosen/#optgroup-support

There is also a grouping version in the link above.

enter image description here

Improve this answer
0

Thanks for all the comments in the end we went for a smaller alteration of the traditional. Mouse overs can give click hints on the left menu.

Click once on one item to add it to the right hand, selected, list enter image description here

Click on the X to remove from selection and return to the left hand, available, list. enter image description here

So similar approach just less clicks.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.