You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 19 Next »

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.

On input methods

Note that each of the three supported input methods mouse, keyboard and touch has its own characteristics. Not all visual feedback and interaction possibilities are supported by all.

In particular, you may highlight an item by hover the mouse on it or by moving the keyboard focus on the item. Touch devices do not support highlighting in an intuitive manner, so Magnolia does not support highlighting of items for touch input.

Selecting an item is as easy as clicking on it or touching it. Selecting multiple items is also easy, if we provide checkboxes. For these input methods, you thus have two way to select items: you either touch the item or click on it, or you mark its checkbox. When using the keyboard, however, the clearest way to handle item selection is to unify both: when you select the item by pressing a key, you also immediately mark its checkbox.

If any of this is not entirely clear, please refer to the more detailed explanations below.

Behaviour description

An item (and its context) is visually highlighted on mouse over or by moving the keyboard focus on the item using one of the arrow keys (UP, RIGHT, DOWN, LEFT).
Highlighting an item mainly indicates that the item could also be selected.
If an item is only highlighted, no details on it are shown anywhere in the interface - the visual marker merely makes it clear that the item could be selected. The reason we show no details is to prevent the interface from changing too rapidly, to keep it responsive and to prevent high load on the server.

A single item may be selected by clicking on it or by hitting the SPACE bar. Alternatively, for interfaces which allow selecting multiple items, a checkbox next to the item may be checked to select the item. In both cases, a stronger visual marker marks the items as "selected". In addition, any visible and enabled view for item details will refresh and show additional details on the item. To select multiple items, you repeatedly select single items until all the item you intend to select are selected.

For views supporting the selection of multiple items, there's also always a checkbox available to toggle the selection of all items visible or currently unvisible in the view. Checking it first selects all items, checking it again de-selects the 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 enabled and which are not.
Please note that it is not acceptable to simply attempt to execute an operation and to return a failure if it is detected that the operation has been undefined for one of the selected items. Failures should only be returned if executing an operation actually returns an error.

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.

Mockups

Tree view - single item

Please configure the Balsamiq Wireframes macro and select the wireframe to show. Learn more

Tree view - multiple items

Please configure the Balsamiq Wireframes macro and select the wireframe to show. Learn more

List view - single item

Please configure the Balsamiq Wireframes macro and select the wireframe to show. Learn more

List view - multiple items

Please configure the Balsamiq Wireframes macro and select the wireframe to show. Learn more
  • No labels