61

I'm trying to figure out what this sort of thing is called, and eventually how I can create one in a web browser. It looks like this (screenshot of the first app that came to mind):

enter image description here

The specific component/pattern I'm looking for is the two list boxes ("Included Gear" and "Excluded Gear") that represent inclusion/exclusion of items from a set. I'm not really looking for the WPF name (if there is one) but it might be helpful.

I am looking for the name of this thingy, if there is one, and if you really want to make my day, you can point me toward a jQuery or YUI way of making one of these dealies in a browser.

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • I am familiar with this construction, but I also don't know its name. I'm just wondering, though - if you're using jQuery, what advantage does this have over a pair of connected sortables? http://jqueryui.com/demos/sortable/connect-lists.html – Stobor May 17 '10 at 22:01
  • @Stobor: being able to double-click items between lists, (not shown in this example, but is shown in others) being able to select/move multiple items at a time, not forcing user to drag-and-drop. Frankly, the d&d fanciness just isn't terribly appealing here. – Matt Ball May 17 '10 at 22:10
  • +1 for the heads up about optigear ftw! – Mark Robinson May 18 '10 at 08:11
  • +1 for an interesting and potentially very useful question. A searchable title (good luck) is the only thing lacking – Merlyn Morgan-Graham Mar 12 '11 at 03:26
  • @Merlyn: thanks :) let me know if you have any staggeringly brilliant ideas for a better title. It was the best I could do. – Matt Ball Mar 12 '11 at 03:28
  • see also http://ux.stackexchange.com/questions/73852/whats-the-common-name-for-this-gui-elment-left-right-box-assignmentbox-rela – antony.trupe Feb 19 '15 at 22:23

13 Answers13

42

I don't think there's an "official" name, typically called "dual list" or.. even more commonly known as "the thing where you have two boxes and you can move things in between".

Here's a jQuery Plugin for this: https://github.com/Geodan/DualListBox

adamJLev
  • 13,713
  • 11
  • 60
  • 65
36

In Designing Interfaces, a UI patterns collection, Jenifer Tidwell calls that a list builder. Both "dual list" and "list builder" seem to be recognized names for it in both the academic literature and industry resources, even appearing here on SO in this comment on the post Long check list ui pattern for web.

I don't know whether or not there's a packaged jQuery component, but DZone has an article on rolling your own using jQuery: An HTML List Builder: A Study in Applying jQuery

I also found a different list builder pattern which takes a very different approach to the same core problem.

The patterns in those and other, similar design pattern catalogs may give you inspiration for other ways of attacking the problem, too. I've personally always considered the "dual list" pattern a bit of a hack for which we've had much better alternatives for... decades, now :-)

Update: I just stumbled across this pattern also labeled as a "swaplist" in Tklib and a "Disjoint listbox" in the [incr Widgets] Tk "mega-widget" library. Thus, you will find it in Perl/Tk, Tkinter, Ruby/Tk, and "anywhere (else) fine (Tk) widgets are sold."

Update: (2021) the Material-UI React components library calls this pattern a "transfer list" or a "shuttle". I didn't find a reference to it in the Material Design specification itself, though, so this may be an invention of the component library authors.

Tripp Lilley
  • 1,653
  • 16
  • 21
  • 2
    +1 for the formal pattern reference, thanks. Would you mind giving a couple of examples of the 'much better alternatives'? I appreciate a multi-select list-box would also meet the requirement, but it can be difficult for the user to maintain a picture of which items are currently selected in a long list when they're not in the visible portion. – ianmayo Apr 09 '11 at 04:54
  • Welie.com calls this pattern the ["Parts Selector"](http://www.welie.com/patterns/showPattern.php?patternID=parts-selector) -- unfortunately the "list builder" pattern mentioned in this answer is a very different solution. Too bad Welie.com calls this different solution "list builder", because I really like that name for the pattern (so I'm going to do with dual-list). – Ted M. Young Mar 18 '15 at 20:19
  • @ianmayo: I think that might have been a case of me thinking "surely there are better alternatives to this by now?", but I was probably also thinking of direct-manipulation things like D'n'D collection builders, etc. I'd edit that out of the answer, but I keep thinking I'll eventually think of a specific example and want to come back and finish the thought :-) – Tripp Lilley Jul 21 '16 at 18:55
6

I heard a vendor refer to them as slushbuckets.

antony.trupe
  • 10,640
  • 10
  • 57
  • 84
6

It's really a glorified multi select list. Since there is only 2 states "included" (selected) "excluded" (not selected). There is a pretty nice multi select widget that splits the selected and not selected items in to 2 columns and lets you drag and drop between then two:

http://www.quasipartikel.at/multiselect/

PetersenDidIt
  • 25,562
  • 3
  • 67
  • 72
  • Wow, that example seemed almost unusable just because it didn't follow the typical left to right ordering. Other than that it looked really pretty ;) – jpierson Apr 02 '11 at 06:12
5

Not that the Microsoft UXGuide is definitive by any means or as complete as it should be but they refer to this concept as a List Builder.

enter image description here

I've recently been searching for examples of this UI concept as well in order to get an idea of the best practice for when to use arrows or labeled buttons and such. The search that has yielded the most examples through Google images has been dual list ui.

In terms of a jQuery solution for the second part of your question I think infinity's answer is probably the most appropriate but I just wanted to give you my two cents on what I've found regarding this UI pattern.

jpierson
  • 16,435
  • 14
  • 105
  • 149
  • @Matt - np, also don't forget the ux site under the stack exchange that might give you better results for this type of question. http://ux.stackexchange.com/ – jpierson Apr 01 '11 at 21:45
  • 1
    I asked this question almost a year ago; ux.se didn't exist back then! :) – Matt Ball Apr 01 '11 at 21:46
  • @Matt - Good point, note that occasionally they have started migrating questions between these sites. Mainly just wanted to make sure you and others were aware in order to help find relevant content. – jpierson Apr 01 '11 at 22:00
  • The referenced content was moved and is now here: [List Boxes](https://msdn.microsoft.com/en-us/library/windows/desktop/dn742407.aspx). The overall structure of documentation is different so I chose not to modify the post. – IvanH May 04 '18 at 09:12
3

I have always referred to them as "Shuttle Components" since you are shuttling info back and forth - it seems that this is somewhat common. Just figured I'd add it to the list of possibilities.

cjstehno
  • 13,468
  • 4
  • 44
  • 56
3

I've always thought it was called an accumulator, but I had a very hard time finding anything to support that on Google. Here's a mention of it in an obscure philosophy graduate thesis about UI usability.

Figure 4-1 shows an example of a reorientation rule applied to an accumulator widget (i.e. a component transferring items from the left list of possible values to the right list of accumulated selected items).

Figure 4-1

And another mention in some student projects from 1998.

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Jesse Buchanan
  • 1,099
  • 1
  • 9
  • 24
  • 1
    I quite like this term - because perhaps it isn't 'list items' you want to move around, perhaps its a selection of thumbnails or code snippets, or... many other things. – danjah May 26 '11 at 01:51
2

I would think of them as connected sortables in a web context: http://jqueryui.com/demos/sortable/#connect-lists

Gabriel
  • 18,322
  • 2
  • 37
  • 44
1

Here are two examples that are not jQuery or YUI but close. These two examples are from ExtJS; one utilizes two Trees and the other two Data Grids. Both are pretty slick and might be able to help you with the design ideas.

BTW: I have normally heard them referred to as Dual Lists as well.

Two Grids

Two Trees

FallenRayne
  • 134
  • 4
1

It's often referred to as a "Mover," or "List Mover."

Here are JavaScript and JQuery examples.

http://javascript.internet.com/miscellaneous/move-dual-list.html

http://www.hscripts.com/scripts/JavaScript/move-list.php

http://viralpatel.net/blogs/2009/06/listbox-select-all-move-left-right-up-down-javascript.html

http://kgaddy.com/jqueryMoverBoxes/

Implementations often enable you to do multi-select and move all the selected items at once.

Another variant is to enable double-click to cause the move.

RichMeister
  • 125
  • 1
  • 7
0

There is no standard control for this. Usually it is implemented with two lists and some buttons to move one or all items from one list to another and vice versa. Instead of a button to move a single item a double click could be used. To move one or more items dag and drop can be employed.

As for the name of th pattern ... I don't really have an idea.

AxelEckenberger
  • 16,628
  • 3
  • 48
  • 70
0

I don't know if there's a proper name for it but DevX has a page that covers a straight JavaScript implementation of such a thing.

Trevor Tippins
  • 2,827
  • 14
  • 10
0

My colleagues and I have always referred to this as the "two-box select". Seems to roll off the tongue nicely.

Matthew Smith
  • 1,287
  • 1
  • 9
  • 19
  • Interesting, reminds me of Firefighter speak for a "two-box alarm". I agree though it does roll of the tongue. – jpierson Apr 02 '11 at 06:15