Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am looking for a name of one specific UI element. I have unsuccessful tried to identify it before but this attempt failed.

What I am looking for is an n-to-n selector where items move between two states. Lets say you have two buckets (states), one on the left, one on the right. There are multiple items in the left bucket and you can move them to the right bucket and back.

What is the name of this element? How is it different from normal list where you can select multiple items?

share|improve this question
    
This url describe most of UI elements, also You can find a lot of information here or other similar guidelines –  Dnister Lark Feb 26 at 15:04

3 Answers 3

up vote 12 down vote accepted

The UI element you are referring to is called the List Builder

Reference: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511484.aspx#patterns

List builders allow users to create a list of choices by adding one item at a time, and optionally setting the list order.

enter image description here

A list builder consists of two single-selection lists: the list on the left is a fixed set of options and the list on the right is the list being built. There are two command buttons between the lists:

  1. An Add button that moves the currently selected option to the list being built, inserted before the selected item. (Double-clicking on an option item has the same effect.)
  2. A Remove button that removes the selected item from the built list and returns it to the option list. (Double-clicking on an item in the built list has the same effect.) The built list may optionally have Move Up and Move Down commands to order the list items.
share|improve this answer
    
Great find. Didn't know this kind of interface had a name. –  jgthms Feb 26 at 23:40

I think you are looking for a list to list item selector. I used to work for SAP and in SAP world we used to call this "Browse & Collect" UI pattern. The only place i have seen this UI outside SAP is for selecting table columns to be shown.

Here's a link that talks more of this

enter image description here

share|improve this answer

In Django it's called a 'FilteredSelectMultiple' widget some call it 'multi select widget'. But that is the name of the basic html widget thats underneath. I think the filtered part is because of the search field in top of the left column. It works really nice and filters the left column when typing. It works great with long lists!

FilteredSelectMultiple widget

share|improve this answer
    
thanks, that is of great help, I finally managed to find this for Twitter Bootstrap virtuosoft.eu/code/bootstrap-duallistbox, they call it dual list box, but it has the filter at the top which is important for me. –  daniel.sedlacek Feb 26 at 23:22
    
@daniel.sedlacek: The bootstrap-duallistbox has a moveonselect option. Items move to the other list on a single click or not at all. The Django FilteredSelectMultiple moves items on double click. Single click is just selecting an item. I don't know how others do that. I think single click is faster but with a double click users are less likely to make mistakes. –  allcaps Feb 27 at 9:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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