Uxstatus | ||||
---|---|---|---|---|
| ||||
Table of Contents |
---|
Story
Magnolia allows me select a single item or multiple items easily by using the mouse, the keyboard or touch gestures. All input methods are interchangeable.
Magnolia also highlights an item, if the mouse or the keyboard focus is currently above a selectable item - it is not highlighting items, which may not be selected at all.
...
Description of desired behavior
...
Remarks on different characteristics of input methods
Note |
---|
Note that each of the three supported input methods - mouse, keyboard and touch - has its own characteristics , and that therefore not all visual feedback and interaction possibilities are supported by for each. |
In particular, _you may put the focus on an item with the keyboard
...
- you can do that without actually selecting it. By touching an item or clicking on it, however, you already interact with it and thus you always move both focus and selection
...
at the
...
same time. Consequently, Magnolia only supports item selection
...
for these input methods.
Selecting multiple items is also easy and intuitive
...
as long as you provide checkboxes next to the items. For mouse and touch, you
...
have two ways to select items: you either touch or click the item
...
or you mark its checkbox.
...
Selecting multiple items using the keyboard
...
is more difficult and requires to hold down a modifier key while selecting an item.
Please
...
refer to the more detailed explanations and the matrix in the paragraphs below.
...
Focus and selection
Focus an item
An item is focused on hovering the mouse over it or by moving the keyboard focus on the item using one of the arrow keys (UP, RIGHT, DOWN, LEFT) while holding down the Ctrl/Cmd modifier key. Focusing an item mainly visually highlights emphasizes it indicating that the item could also actually be selected .
When the same item remains focused, details on it are shown after a delay as well. No details on an item are shown in any enabled and visible item details view elsewhere on the interface. The reason for the delay is to prevent the interface from changing too rapidly on quick focus changes, to keep it responsive and to prevent high load on the serverand no actions for it are presented, if that item has the focus only and is not selected as well.
When using the mouse or a touch device, you may only move the focus by also simultaneously selecting an item.
Select a single item
A single item may be selected by clicking on it or , touching it or by hitting the SPACE bar when it has the focus (object selection). If an interface supports selecting multiple items, it shows a checkbox next to an item. Thus, alternatively, this checkbox may be checked to select the item (toggle selection). In both cases, a strong visual marker around the item signals its selection.
So, while an item may be selected without checking its checkbox if you use mouse or touch input, its checkbox is always toggled if you select the item using the keyboard. In addition, any visible and enabled view for item details will refresh immediately and show additional details information on the just selected item.
For the keyboard, you may also move the selection to a different item by simply hitting an arrow key. This deselects the currently selected item and selects the one the focus has moved to. Care must be taken that this doesn't cause a flood of events, if a key is hit repeatedly or pressed for a longer period of time. Instead, any implementation should filter events sent to the backend and only eventually deliver the last of the selection events.
Select multiple items
To select multiple items, you repeatedly select single items using their checkboxes until all your items are selected (toggle selection). If you use the checkboxes, all already selected items remain selected and the newly selected items are merely added to the set of selected items.
Alternatively, use a rubber band rectangle when using a mouse to select the items (object selection). Note that in the latter case, the checkboxes of all selected items are also checked as soon as you release the mouse button. A previously selected group of items is first deselected before the newly defined group becomes selected by a rubber band.
Any visible and enabled view for item details will refresh immediately and show additional details on the set of selected items (e.g. summary of all sizes, number of selected items, etc.).
When using the keyboard, selecting multiple items is less easy as it involves pressing a modifier key during selection. You may select a range of items by selecting the first item of that range, then selecting the last item while holding the SHIFT modifier key. You may add or remove an additional item to the set of currently selected items, by pointing at or moving the focus to it, then selecting it while holding down the Ctrl/Cmd modifier key.
The same modifier keys may also work when using the mouse or touch devices, but the preferred as less error-prone way for selecting multiple items using these input methods is by toggling the checkbox.
Select and deselect all items
Views supporting the selection of multiple items shall also always offer an additional checkbox to toggle the selection of all items (visible or invisible) in the view. Checking it first selects all items, checking it again de-selects the items.
Indicate number of selected items
Any view supporting the selection of multiple items shall indicate the total number of currently selected items.
Open an item for editing or further inspection
Deselect a single item
You may deselect a single item by unchecking its checkbox or clicking on it while holding down By double-clicking or touble-tapping an item or hitting the Ctrl/Command -Enter key on a focused (see #Focus an item) or selected item (see #Select a single item), a separate window opens showing an edit or inspection view of the item depending on the permissions of the logged in user.
Drag and drop an item
Clicking on an item and starting a drag automatically selects the item and ticks its checkbox, in case it exists - the item is both object selected and toggle selected. During drag, the item being dragged is replaced by a place holder image. The interface provides constant feedback where the dragged item can be dropped by rendering an insertion bar and highlighting other items which may act as drop targets.
Drag and drop multiple items
If multiple items are selected, dragging one of the selected items initiates a drag of all selected items. Again, the items are replaced by a place holder image and object highlighting and insertion bars are rendered during the drag (see #Drag and drop an item).
Note that if multiple items are toggle selected and you start a drag on a single item with its checkbox unchecked, that object is added to the other selected items for the drag and its checkbox is immediately ticked as soon as the drag starts to clarify this behaviour.
...
modifier key. When using the keyboard, move the keyboard focus on the item, then hit SPACE - hitting SPACE thus toggles a selection. On a touch device, you may only uncheck an item's checkbox to deselect it.
If an item is deselected, all other remaining selected items remain selected.
Deselect all selected items
If you click on a list grid or tree view offering item selection and you do not click on a selectable item, all previously selected items are deselected. The items are also deselected remain selected. You may only deselect all currently selected items if you toggle the "select all items" checkbox to first select all, then deselect all items (see #Select and deselect all items).
Hybrid selection solves conflicts
Allowing both object selection and toggle selection of items could result in a confusing interface.
Deselect a single item
...
Magnolia solves this by actually implementing hybrid selection:
Note | ||
---|---|---|
| ||
|
Open
Open an item for editing or further inspection
By double-clicking or double-tapping an item or hitting ENTER on a selected item (see #Select a single item), a separate window opens showing an edit or inspection view of the item depending on the permissions of the logged in userCommand modified key. When using the keyboard, move the keyboard focus on the item, then hit SPACE - hitting SPACE thus toggles a selection. On a touch device, you may only uncheck an item's checkbox to deselect it. If an item is deselected, all other selected items remain selected.
Executing an operation on selected items
If a view allows to select items, it always also offers operations to be executed on them. Selecting one or multiple items enables only those operations, which are defined on the list set of currently selected items. For any view showing operations, it should be visually very obvious, which operations are currently available and which are not.
...
It is highly desirable that an operation is executed atomically on multiple items as this is expected semantically and allows properly supporting the undo functionality we plan to introduce with 5.0.
Solving conflicting usage
Allowing both object selection and toggle selection of items may result in a confusing interface. Magnolia solves this by actually implementing hybrid selection.
In short, this means:
...
Drag and drop
Drag and drop an item
Clicking on an item and starting a drag automatically selects the item and ticks its checkbox, in case it exists - the item is both object selected and toggle selected. During drag, the item being dragged is replaced by a place holder image. The interface provides constant feedback where the dragged item can be dropped by rendering an insertion bar and highlighting other items which may act as drop targets.
Drag and drop multiple items
If multiple items are selected, dragging one of the selected items initiates a drag of all selected items. Again, the items are replaced by a place holder image and object highlighting and insertion bars are rendered during the drag (see #Drag and drop an item).
Note that if multiple items are toggle selected and you start a drag on a single item with its checkbox unchecked, that object is added to the other selected items for the drag and its checkbox is immediately ticked as soon as the drag starts to clarify this behaviour
...
.
Summary
| Mouse | Keyboard | Touch | |
---|---|---|---|---|
Support focussing item without selecting it | yes, on mouse over | no | yes, when shifting kbd focus | no |
Supports selecting single item without marking its checkbox | yes, on click | yes, on hitting SPACE or using ARROW keys | yes, on touch | |
Supports selecting single item by marking its checkbox | yes | yes, on hitting SPACE bar | no | yes |
Supports selecting multiple items by marking their checkbox | yes | no | yes | |
|
|
|
| |
Supports executing an operation when selected by checkbox | yes | yes | yes | |
Supports executing an operation when selected, but not by checkbox | yes | no | yes |
| Mouse | Keyboard | Touch |
---|---|---|---|
Focus an item | move mouse over it | move keyboard focus using arrow keys | (not supported) |
Select an item | click it or tick its checkbox | move keyboard focus, then hit SPACE | tap on it or tick its checkbox |
Deselect an item | click it while holding Ctrl/Command modifier, or | move keyboard focus, then hit SPACE | uncheck its checkbox |
Open an item | double-click it, or | select it, then hit Ctrl/Command modifier and ENTER, or | double-tap it, or |
yes | yes |
For the list of defined commands, see Usage summary#Focusing, selecting and opening itemsFor the modifier keys, the first name denotes the Windows and Linux platforms, the second one the Mac platform.
Mockups
Tree view supporting selection of a single item only
Mockup | ||||||||
---|---|---|---|---|---|---|---|---|
|
Tree view supporting selection of multiple items
Mockup | |||||||
---|---|---|---|---|---|---|---|
|
...
|
Grid view supporting selection of a single item only
Mockup | ||||||||
---|---|---|---|---|---|---|---|---|
|
...
|
Grid view supporting selection of multiple items
Mockup | ||||||||
---|---|---|---|---|---|---|---|---|
|