Lists and List Actions

Summary Image

The need to present lists of actionable items is very common in software. For example: lists of emails in an inbox; tasks in a to-do list; bookmarks in a browser; or documents in a file explorer.

On its own, this shouldn’t be difficult, but throw in the possibility of some secondary actions and things get a bit more complex – do you embed secondary actions in the row, or use row selection with the actions placed somewhere else? This post provides a simple model for the basic options and some thoughts on how to choose an appropriate solution based on the particular requirements at hand. It isn’t comprehensive or foolproof – but it’s a start.

THE DECISION MATRIX

Decision Matrix

The breakdown between the different design solutions depends on several overlapping factors:

  • Whether the primary action is best represented by a single-click action (e.g. by links); by the ability to select an item and click a button (or double-click an item); or whether the activity is taking place in as just one element within a larger form.
  • Whether there are secondary actions associated with each entry .
  • Whether multi-selection is relevant (particularly for the secondary actions).

SINGLE-CLICK  VERSUS SELECTION/DOUBLE-CLICK

Selection vs Single Click

The question of whether to use a single-click approach, or a listbox-style selection approach is largely a question of style, rather than governed by any specific criteria. Web-based systems tend to use a single-click approach, whereas desktop applications and operating systems have traditionally used a selection-based approach (e.g. for file browsers).

In most cases, there isn’t a specific reason to use on or the other, so it is a decision for the designer to consider in order to achieve the right overall feel.

SINGLE-CLICK  WITH NO SECONDARY ACTIONS

Single-click

If single-click is the chosen direct and there aren’t any secondary actions, then you have the simplest possible situation. This is typically visualised as a list of links, although there is no reason it couldn’t be visualised as more of a cell-based clickable area.

Note that, by definition, multi-select cannot be a factor here.

SINGLE-CLICK WITH SECONDARY ACTIONS

Single-click witih secondary actions

Adding secondary actions means finding a way to identify one of the items and then select a secondary action for it. Typically, there are two competing ways to do this:

  • Placing controls for the secondary actions into each line of the list.
  • Or allowing the user to select an item (without executing the primary action), and then offering the secondary actions somewhere near to the list – e.g. in a toolbar at the top.

The first approach has the advantage of making the relationship between the item and the action very clear (there is no need for the item to be selected); it also reduces the number of clicks and the distance between the item and the action. However, it does not support multi-selection.

The downside of the first approach is that it introduces clutter into the presentation, since the same actions are repeated on every line. This can be addressed to some degree by pushing back the visual representation of the action and having it ‘light up’ only on rollover.

The second approach avoids this clutter and allows for multi-selection (for the secondary actions). However, it creates a separation between the selected items and the controls to activate the secondary actions that some may consider to be unreasonable. If taking this approach, it is at least important to ensure that the secondary actions are not easily scrolled out of view if the list is long (e.g. by placing the header of the list in a non-scrolling zone).

SELECTION WITHOUT SECONDARY ACTIONS

Selection

Where a selection-based approach is deemed to be more appropriate, this is typically represented by allowing the user to click anywhere within a row in order to select it, and providing a clear visible highlighting of the selected row. Double-clicking a row selects it and activates the primary action. A separate control is usually also provided to allow the user to activate the primary action without double clicking.

If multi-selection is appropriate, this is usually achieved via a modifier key (i.e. holding Shift or Control whilst clicking on items). This approach adds no extra clutter to the page, but has the downsides of bing invisible to the user, so users may not know that it is possible, and that it is unforgiving – it is easy to accidentally lose a set of selections by clicking again without the modifier key pressed. There is also the unpleasant side-effect that multiple rows can be selected and then actioned by double-clicking on one of them – a mismatch between cause and effect that can seem odd, or create errors.

These downsides lead many designers to dismiss these approaches. However, that may be unfair: modifier-based multi-selection can be a valuable tool where the ability to multi-select is not crucial to most users, but provides a significant benefit to a minority, since the fact that is is invisible means that it imposes no penalty on the majority.

SELECTION WITH SECONDARY ACTIONS

Selection with secondary actions

If secondary actions are available, then these can be easily accommodated in the selection approach by simply adding additional controls next to the list that take action on the selected items.

These approaches share the strengths and weaknesses of the selection-based approach discussed in the previous section.

FORM-BASED APPROACHES

Form-based

In some cases, the need for a list occurs within the flow of a form. In these cases, a link-based approach is not appropriate, since there is no desire to action the choice immediately – the user needs to complete other fields in the form. In these cases, the classic radio button and check box approaches are often the best choice.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s