| Uxstatus | ||||
|---|---|---|---|---|
| ||||
| Table of Contents |
|---|
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 to do so, but it's the common actions which are visible by default.
Magnolia also offers me additional information on the item if available and 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.
Description of desired behavior
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 | ||||||
|---|---|---|---|---|---|---|
|
...
|
...
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 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. Please thus refer to the corresponding page for detailed descriptions on behavior and available functionality of the upper part of the sidebar as well as on how notifications are shown.
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 makes it immediately apparent which actions are available on an item or a set of items.
The
...
The list of actions is visually divided into two sections. The upper section contains actions relevant to the selected item, while the lower section contains the global actions offering 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 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 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 belong to the list of global actions. They only show up in tuples (pairs, actually). They thus also show up on one line to group them and to make more space available to the other actions.
The action pairs use a mechanism on mouse hover to inform the user what precise action will take place should he choose to select it. If a user moves the mouse over one of these buttons, it is visually emphasized and takes over most of the line to show more details.
...
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 going to e.g. undo will you be ready to actually undo it. This is especially true if the target of the undo action is no longer visible.
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 taps-and-holds the action.
...
Preview
The preview takes over the entire lower area of the sidebar, which is always bottom aligned. The preview It may be minimized collapsed to make more room available for actions and the Actions Rack and thus for the list of actions possibly other units currently visible.
| Mockup | ||||||||
|---|---|---|---|---|---|---|---|---|
|
A click on the preview image shows an a larger version of it in an overlay dialog, which may also present additional details on the selected item such as its file size or modification date. If a single item has been selected and the view it was selected in is a list, a tree or a grid, the overlay dialog also offers forward and backward buttons to jump to the next (lower) or previous (upper) item in that view. If multiple items were selected, these forward and backward buttons are restrained to move to the next or previous item of the selection.
| Mockup | ||||||
|---|---|---|---|---|---|---|
|
Additional info on an item
...
|
Collapsing the Actions sidebar
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.
...
Note that if the new unit does not fit into the space available to the upper area of the sidebar, a vertical scrollbar appears and the user has to scroll up and down to see all data and actions available. She may also maximize the unit and/or minimize the preview to give it more space.
...
The sidebar can be collapsed so it uses up less space. When collapsed, only icons for the common and global actions actions, copy&paste, undo/redo as well as an icon to show the preview in a popup window are visible. A collapsed sidebar doesn't support the display of all available actions or of additional information on an itemThe preview of the sidebar actually collapses alongside the Action Rack and remains available: it shows the thumbnail on request in a popup window.
| Mockup | ||||||
|---|---|---|---|---|---|---|
|
Please note that except for the global functions in the second section of the upper area of the sidebar, all icons related to actions shall stay in place to avoid confusion. The use animations avoids disorienting the user.
Showing notifications
The following definitions ensure that:
- notifications can be shown
- are actually noticed
- and can then be viewed quickly and easily.
If any unit would like to signal a problem using a warning or error message, it either does so immediately if the unit is visible or by employing the unit selector to signal a notification.
...
Opening the combo box will then 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 and thus makes the message visible.
...
|
Care must be taken to ensure that changing from the expanded view of the sidebar to the collapsed one does not disorient and confuse the user. Use the animations to smoothen the transitions as defined for the Actions Rack and slide the preview up and down instead of abruptly opening and closing it
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, thereby putting the focus on the problem immediately.
...
A collapsed actions sidebar will indicate a problem in a de facto hidden unit as well by showing a notification icon. Consequently, a click on the icon also takes the user to the first unit reporting a problem, thereby ending the collapsed appearance of the sidebar.
...
Use animations to smooth transitions
The sidebar can see some changes in shape and positioning of its elements. Every such transition must be accompanied by animations similar to how an accordion menu does. New elements appearing move others away; elements being minimized do so by animating their size change.
In particular, changing from the expanded appearance to the collapsed one could be disorienting since the latter does not support all features of the expanded sidebar. To avoid disorientation, the sidebar shall:
- first scroll the upper area to the top so that the list of actions becomes visible,
- then transition from showing all actions to just he common ones
- and finally use an animation to collapse the sidebar
- during which the side-by-side arranged global actions fade out and the vertically layouted icons fade in
Note that one important goal during the transition from expanded to collapsed appearance that the icons of all common actions stay in place.