Make the first action common and non-destructive. It is the first thing that tablet users see.

An action bar organizes actions into sections and groups. Section is the larger unit with a green label. Sections contain groups, separated from each other with a horizontal rule.

An action bar typically has two sections: one for actions and another for preview of the currently selected item, but you can have several. Put commonly used actions in the first section. They are used often so they must be available quickly. Other sections may contain secondary, not so important actions. For example, if you support moving items via drag-and-drop a move action doesn't need to be in the first section.

It is important that you put actions inside a group in the correct order. The action bar collapses on tablet devices, displaying only the first action in a group. Other actions are available only after a long press.

(tick) Add page is a safe first action for tablet users.

(error) Delete page is a destructive action.

 

When to use sections

  • You need at least one section. It should contain important actions. Further sections may contain secondary, not so important actions.

  • Label the first section according to what the user selects, such as "Folder" when the user selects a folder.
  • Make the label as specific as possible, such as "Image asset" instead of just "Asset" if the selected item is an image.

When to use groups

  • Put commonly used actions in the first section. They are used often so they must be available quickly.
  • Don't make the first action in a group destructive (delete) or mode-changing (edit).
  • Recommended group order:
    1. Add / Delete
    2. View / Edit / Rename / Move / Duplicate
    3. Publish / Unpublish
  • Collect similar actions together. For example, Preview and Edit switch modes so put them in the same group.
#trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))
  • No labels