Info |
---|
|
This page describes a specialization or variant of a Rack UI component. All descriptions extend the functionality described on the corresponding page. |
The Actions Rack
...
Mockup |
---|
| Default layout of Actions Rack |
---|
| Default layout of Actions Rack |
---|
Version | 2 |
---|
Name | Default layout of Actions Rack | 1 | 1 |
---|
|
The list of actions makes it immediately apparent which actions are available on an item or a set of items. It 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.
...
Mockup |
---|
| all and common actions |
---|
| all and common actions |
---|
Version | 2 |
---|
Name | all and common actions | 1 | 1 |
---|
|
In order to show all available actions, 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 and now offers to reduce the list - a click slides-out the less common actions again.
...
Mockup |
---|
| Clipboard and UndoRedo behavior |
---|
| Clipboard and UndoRedo behavior |
---|
Version | 2 |
---|
Name | Clipboard and UndoRedo behavior | 1 | 1 |
---|
|
In this example, a user selects a page and moves the mouse over the "copy" action. It gets highlighted and will read "copy this 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 copied 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.
...
Mockup |
---|
| Collapse and expand the Actions Rack |
---|
| Collapse and expand the Actions Rack |
---|
Version | 2 |
---|
Name | Collapse and expand the Actions Rack | 1 | 1 |
---|
|
Please note that all icons of common actions shall stay in place to avoid confusion. UX:Use animations to avoid a disorientation of the user.
...
Mockup |
---|
| Notifications in collapsed state |
---|
| Notifications in collapsed state |
---|
Version | 3 |
---|
Name | Notifications in collapsed state | 1 | 1 |
---|
|
Use animations to smoothen
...
transitions
The rack can see quite some changes in shape and positioning of its elements. Every such transition must be accompanied by animations. 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 rack. To avoid disorientation, the Action Rack shall:
Note that one important goal during the transition from expanded to collapsed appearance is that the icons of all common actions stay in place.