...
The upper part always contains the list of actions, but may also show additional information on the currently selected item. It is implemented 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.
...
| Mockup | ||||||
|---|---|---|---|---|---|---|
|
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.
...
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 copy&paste and undo/redo icons fade out and the vertically laid out 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 placeCare 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.