Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Added: missing links
Wiki Markup
h2. Story

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 so, but it's the common actions which are visible by default. 

Magnolia also offers me additional information on the item that might be available, if this makes sense in the current context. I could get a list of users working on a page in a interface showing me the status of work items. Or I could get access to a page's history to check out the changes applied to it in the last 24 hours.

h2. Description of desired behavior

The Actions sidebar is used in AdminCentral and other interfaces to show both a list of common 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).

h3. General layout

The sidebar is divided into two main areas. 

{anchor:Racks and units}The 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 and thus contains one unit|Visual Page Editing conceptual overview#Racks and units] 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 show all other units again. All units except the list of actions _may be closed_ to hide again the information they display.

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.

h3. 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 typically only relevant to the selected item, while the lower section contains the [global actions|Actions and global actions] offering [copy & paste|Using the clipboard] and [undo/redo|Using undo and redo].

{mockup}

h4. Show all actions

In order to show all available actions, you click on a link button located right above the section containing the global actions.  The new actions are then sliding in and are appended to the list of common actions. Making them visible thus moves down the second section with the global actions. The link then stays in place, but then offers to reduce the list again - a click slides\-out the additional actions.

{mockup}

h4. More details on Copy & Paste and Undo/Redo

[Copy & Paste|Using the clipboard] and [Undo/Redo|Using undo and redo] belong to the list of [global actions|Actions and global actions] and only show up in pairs. They thus also show up on one line saving space available to the other actions.

These pair of actions use a mechanism on mouse hover to inform the user what action exactly takes place. If a user moves the mouse over one of these buttons, it is visually emphasize and takes over most of the line to show more details on the action taken if the user would click it. 

{mockup}

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 that you are actually going to undo will you be ready to select the corresponding action.

Note that this mouse hover function does not work well on touch devices. Thus, a *tooltip with the same detailed action* is also shown after a short delay, if the user taps-and-holds the action.

h3. The Preview

The preview takes over the entire area dedicated to it and is always aligned to the bottom of the interface. It may be *minimized to make more room* for the actions and possibly visible [additional units|#Racks and units].

{mockup}

A click on the preview *shows an larger version* of it in an overlay dialog, which may also present additional details on the selected item. If a single item has been selected and the view it was selected in is a [list|Definition of terms#list], a [tree|Definition of terms#tree] or a [grid|Definition of terms#grid], the overlay dialog also offers forward and backward buttons to *jump to the next (lower) or previous (upper) item*. If multiple items were selected, these forward and backward buttons are restrained to move to the *next or previous item in the selection*.

{mockup}

h3. Additional info on an item

If the current interface the sidebar is embedded in offers additional information on a selected item, this information may be presented in their own [unit|#Racks and units]. {anchor:unit selector}A unit selector right above the preview, but still inside the upper area of the sidebar, allows to select an additional unit to display. If selected, the unit is added below the list of actions. As is common for units, it may then be maximized to take over the entire upper section of the sidebar. A unit *showing additional information may also be closed to hide it again*.

Examples of additional information on a page item are the comprehensive page status consisting of publication, work flow and collaboration status and the page history showing the latest changes and providing access to older versions of the same page.

{mockup}

h3. Minimized usage

The sidebar can be minimized so it uses up less space. When minimized, only icons for the common and global actions as well as an icon to show the preview in a popup window are visible. A minimized sidebar doesn't support the display of [additional information on an item|#Additional info on an item] and of all the actions.

{mockup} 

h3. Showing notifications

If any [unit|#Racks and units] would like to signal a warning or error message, it either does so immediately, if the unit is visible. If the unit is not visible, the [unit selector|#unit selector] is used to signal a notification. 

{mockup}

Opening the combo box will show which unit reported the problem. Selecting that unit will add it to the list of units shown in the upper area of the sidebar.

{mockup}

If the user *directly clicks on the notification icon* of the unit selector instead, the first unit reporting a problem is shown *and maximized* at the same time.

{mockup}

These definitions ensure that:
* notifications can be shown
* are actually noticed
* and can be selected easily and quickly.