Edit List Entries

Edit List Entries

Summary

• Place the controls that manipulate the list below the list.
• Group semantically similar controls.
• Separate semantically different groups from each other.
• Emphasize more frequently used controls by making them bigger targets.

Illustration

List Entries - full-sized

List Entries - mid-sized

List Entries - narrow

Context

You have a list of settings the user can manipulate. This normally includes adding a new entry to the list, editing existing and deleting entries. At times you want the user to rearrange items in the list. Now you wonder how to best represent such a list and where to put the controls that refer to it.

Problems and Forces

Lists in settings dialogs usually comprise two major components. The list itself with its entries on the one hand and the controls that manipulate these on the other hand.

Examples

GIMP List Entries

OSX User Accounts

IPhoto Tag List

Solution

Place the controls that manipulate the list below the list. That way the list itself can offer the maximum space wrt to the width of list elements.

In case the list elements can be rearranged via drag&drop, make use of affordances. I.e. place a small handle like element at the beginning of each list entry that shows it can be dragged.

Semantically similar elements should be grouped together. These include e.g. triples of Add/Edit/Delete buttons in contrats to Move Up/Move Down buttons

You may also make more important or more frequently used actions bigger by adding labels and/or icons to these controls.

Rationale

Code Snippets

Show Code Example

Related Patterns

Pattern.RelatedPattern? Pattern.AlsoRelatedPattern?

Literature

Categories: Settings