List Builder

Problem

The users need to build up and manage a list of items

Solution

Present the total list and provide editing functionality next to it.

From www.bol.com


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.



plml logo

Comments

1 comment has been added to this pattern.


Cindy Lu, 21st February 2011
You should include Add behavior also for designers to consider how a user can add a row - where the button be located and where the new row will be added, the top of the list of bottom?


Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name

Comment

Enter the verification code you see in the image below
captcha