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.
Remarks on different input characteristics
Note that each of the three supported input methods - mouse, keyboard and touch - has its own characteristics, and not all visual feedback and interaction possibilities are supported by each.
In particular, you may focus on an item with the keyboard or by hovering the mouse over it. This is often visualized by softly highlighting the item. Touch interfaces, however, do not support moving the focus in the same intuitive manner. By touching an item, you already interact with it and thus you always move both focus and selection to the item. Consequently, Magnolia only supports item selection on touch devices.
On the other hand, selecting an item is as easy as clicking on it with a mouse or touching it. Selecting multiple items is also easy and intuitive, if you provide checkboxes next to the items. For mouse and touch, you thus have two ways to select items: you either touch or click the item, or you mark its checkbox. When using the keyboard, however, the clearest way to handle selection is to unify both interactions, since you always have to at least press a key to select an item. Magnolia thus also always toggles an item's checkbox on selection when using the keyboard.
If any of this is not entirely clear, please refer to the more detailed explanations and the matrix in the paragraphs below.
Description of desired behavior
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). Focusing an item mainly visually highlights it indicating that the item could also be selected.
When the same item remains focused, details on it are shown after a delay 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 server.
Select a single item
A single item may be selected by clicking on it, touching it or by hitting the SPACE bar when it has the focus. If an interface supports selecting multiple items, it thus shows a checkbox next to an item. Thus, alternatively, this checkbox may be checked to select the item. 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 on the just selected item.
Select multiple items
To select multiple items, you repeatedly select single items using their checkboxes until all your items are selected.
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.
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 of selected items. For any view showing operations, it should be visually very obvious, which operations are currently available and which are not.
Please note that it is not acceptable to simply attempt to execute an operation and to return an error if it is detected that the operation has been undefined for one of the selected items. Errors should only be returned if executing an operation actually fails.
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.
Summary
|
Mouse |
Keyboard |
Touch |
|---|---|---|---|
Supports highlighting item |
yes, on mouse over |
yes, when shifting kbd focus |
no |
Supports selecting single item without marking its checkbox |
yes, on click |
no |
yes, on touch |
Supports selecting single item by marking its checkbox |
yes, on checking checkbox |
yes, on hitting SPACE bar |
yes, on checking checkbox |
Supports selecting multiple items by marking their checkbox |
yes, on checking checkbox |
yes, on hitting SPACE bar |
yes, on checking checkbox |
Supports executing an operation when selected, but not marked |
yes |
no, but irrelevant |
yes |
Mockups
Tree view - single item
Tree view - multiple items
List view - single item
List view - multiple items