Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's this UI pattern called?

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.

like image 686
Matt Ball Avatar asked May 17 '10 21:05

Matt Ball


People also ask

What is a pattern UI?

User interface (UI) design patterns are reusable/recurring components which designers use to solve common problems in user interface design. For example, the breadcrumbs design pattern lets users retrace their steps. Designers can apply them to a broad range of cases, but must adapt each to the specific context of use.

What is this UI element called?

User interface (UI) elements are the parts we use to build apps or websites. They add interactivity to a user interface, providing touchpoints for the user as they navigate their way around; think buttons, scrollbars, menu items and checkboxes.

What is a UI design called?

User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience.

What are the UI design styles?

What Are Three Main Types of UI Design? There are various types of UI design, but three of the most popular are graphical user interface (GUI), voice user interface (VUI), and menu-driven. In GUIs, users interact with information by manipulating visual objects on a digital screen using a device or touch.


2 Answers

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

like image 162
adamJLev Avatar answered Oct 15 '22 02:10

adamJLev


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.

like image 22
Tripp Lilley Avatar answered Oct 15 '22 01:10

Tripp Lilley