Parts Selector

Use when

A complex objects needs to be created by the users or modified later on. The object consists of several parts where the user must select the appropriate combinations of parts. The parts must be independent of each other so that they can be removed or added without consequences for other parts. The number of parts should be more than 10 and can possibly be categorized. The user may not know which parts are available. At some point users may change their minds and remove selected parts. Users need to know which parts are selected and which are available. The number of available parts may change during usage of the application.

How

Show the list of parts, in categories if applicable, on one side and the list of selected parts on the other side. Place add and remove functionality in between the left and right side. The user can add parts by selecting them and then adding them to the parts list. Consider speed-ups such as double-clicking or dragging to add or remove an item.

Why

Showing both the available and selected parts gives the users a complete and instant overview. The visual organization creates a logical task flow from left to right. Because part lists are used the design can easily accommodate new parts or categories.

More Examples

This example is taken from Yahoo. Users can personalize their own pages and this screenshot shows how to select the movie-theatre from which they want to see the listings.