Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Changed: reworked the first sections of the desired behavior section

...

If I select an item, Magnolia provides me with a preview of the item as well as the list of common actions applicable to it. I can also retrieve a list of all actions defined on the currently selected item if I choose to do so, but it's the common actions which are visible by default.

...

The Actions sidebar is used in AdminCentral and other interfaces to show both a list of common the actions on and a preview of the currently selected item or items. It is usually shown on the right-hand border (left-hand border on RTL setups) and is divided into two main areas.

Mockup
Actions sidebar layout
Actions sidebar layout
12

AnchorRacks and unitsRacks and unitsThe upper part always contains the list of actions, but may also show additional information on the currently selected item. It is actually implemented as a rack containing one unit for the list and one unit per additional information block shown. Units may be maximized to take over the entire area and minimized again to reveal all other units. All units except the list of actions may be closed to hide the information they displayimplemented using an Actions Rack, which uses a dedicated unit for handling the list of actions.

The lower part of the sidebar is entirely reserved to the preview of the selected item. The preview may be minimized to make more room available for the rest of the sidebar.

The List of Actions

The list of actions makes it immediately apparent which actions are available on an item or a set of items. The default view shows only the most common actions and leaves out less used, special actions e.g. with a more tool-like character such as the import and export functions of a page tree.

The list of actions is visually divided into two sections. The upper section contains actions relevant to the selected item, while the lower section offers copy & paste and undo/redo.

Show all actions

In order to show all available actions (and not just the common ones), you click on a link button located right above the section containing the clipboard. The new actions are then sliding in and are appended to the list of common actions. Making them visible thus moves down both copy&paste and undo/redo. The link button stays in place, but now offers to reduce the list - a click slides-out the additional actions again.

...

Layout and usage of Copy & Paste and Undo/Redo

Copy & Paste and Undo/Redo always appear in tuples (pairs, actually). They are thus shown on a single line to both group them and to make more space available to the other actions.

These action pairs inform the user what precise action will take place should he choose to select a particular action. If a user moves the mouse over one of member of an action pair, it is visually emphasized and takes over most of the line to show more details on the action it will run.

...

As an example, if a user selects a page and moves the mouse over the "copy" action, it gets highlighted and will read "copy page". The "paste" button is hidden as the "copy" action has taken over most of the line. If the user however moves the mouse to the right to where the "paste" action used to be, the "paste" button eventually will appear again reading "paste pages", assuming that the user has previously copied a set of pages. If the user moves the mouse away from the "copy" button instead and onto a different row with actions altogether, both buttons become visible again.

The ability to show more details is a valuable preview of what will be done and required to build trust into these functions. Only if you know what you're e.g. going to undo will you be ready to actually undo it.

Note that this function work on mouse hover and thus fails on touch devices. Thus, a tooltip with the same detailed action is also shown after a short delay if the user tap-and-holds the action. Likewise, the tooltip also appear on a right mouse click as described on the pages on the clipboard and undo/redo.

The Preview

The preview takes over the entire lower area of the sidebar, which is always bottom aligned. The preview may be minimized to make more room available for actions and possibly other units currently visible.

...