List Builder

Use when

Users have several items to manage. They may be confronted directly with a long list or they may need to build up a new list. The list of items is typically ordered and could be quite long. Users want to have a complete overview of the list but the space to display it is limited. Users need to perform operations on them and see the results. Certain operations can be done on many items at the same time while other operations can only be done on one item at a time.

How

The users first see the total of items in the list. If the list is empty it says so, for example "no items added" or "empty". If all operations can be performed at the same time, use a type A solution, otherwise use a type B solution. If type A is chosen, provide the editing functionality below the list. If the list is likely to become longer than 10 items the functionality should be placed above the list. Type B solutions are typical when the functionality contains an "Edit..." function where some properties of the item can be changed.

When an item is added to the list, the view on the list shows the added item by highlighting it, as feedback to the users that the operation has been performed correctly. If necessary the list should "scroll" to the position of the new item in the list.

Why

By showing the overview first the users always know what the current status is. Editing functionality is then seen as "operations" on the current list.

More Examples

This example from the Hotmail service shows a type A solution.