| Uxstatus | ||||
|---|---|---|---|---|
| ||||
| Table of Contents |
|---|
Story
Magnolia should let me navigate and browse lists grids (see Definition of terms#grid) easily by using either a mouse, a keyboard and using touch gestures.
Description of desired behaviour
A tree grid can be navigated by using the keyboard's arrow keys (UP, RIGHT, LEFT and DOWN arrow keys). The tree grid shall load additional, previously invisible items on demand to ensure good performance even with large tree structures. A visual indicator shows if data is being loaded dynamically.
Likewise, a tree grid may be navigated by using the mouse and the scrollbar. As is the case with keyboard navigation, a clear visual indicator appears if previously hidden items are being loaded and disappears once they become visible.
...
Note that all scrolling operations should be smooth and not jumpy to avoid loosing sense of where in the list grid you currently are.
Expand and collapse folder items
. Note that grid shall only scroll up and down. We don't plan to support left and right scrolling for grids, since this is a feature often not noticed by users.
Open and close folder items
| Note | ||
|---|---|---|
| ||
The difficulty with folder items in grids in Magnolia is that they are actual items, which can also be edited. Since the two primary gestures of mouse and touch are already used to select an item (see Focusing, selecting and opening items#Select a single item) and to open it for editing or inspection (see Focusing, selecting and opening items#Open an item for editing or further inspection), opening a folder item requires using a modifier key for keyboard and mouse input, or the usage of a toolbar or context menu. |
Since opening a folder item in a grid view can't be done using an intuitive manner easily, Magnolia supports several options. Please refer to the Commands overview in the usage summary for a comprehensive list of navigation commands.
On opening a folder item, the content of the grid view is then replaced by the list of items contained in the folder itemA folder item is a regular item, which - in addition to providing the tasks defined by its type - contains other items. Folder items may be expanded or collapsed by clicking on or touching an expand/collapse visual indicator displayed right next to an item's icon. The indicator clearly shows, if its item is expanded to show the next level of items, or collapsed, hiding all its sub items. If a folder item is expanded, only the next level of its sub items is shown. If data about items has to be loaded first, the grid view is replaced by a visual indicator asks asking the user for patience. Clicking on or touching an expanded folder item collapses it again and hides all of its sub items.
Folder items can also be expanded by hitting the RIGHT arrow key (LEFT on RTL installations) while the keyboard focus is on a collapsed folder item (nothing happens, if the folder item is open already). To collapse a folder item again, hit the LEFT arrow key (RIGHT on RTL installations) with the keyboard focus either on the folder item you intend to collapse or any of its sub items on the next level only.
Using the arrow keys presents a very efficient way to navigate a tree. It will quickly become one major way to work with trees for any experienced user. Care must be taken therefore to ensure that this will be a smooth, reliable, complete and non-irritating experience.
Open an item for editing or further inspection
By double-clicking or touble-tapping an item or hitting the Enter key on a focused item (see also Focussing and selecting items), a separate window opens, which shows an edit or inspection view of the item depending on the permissions of the logged in user.
Optional behaviour
Tree views by default shall only show elements down to a given level - for the web site structure, this could include all items used by the site navigation. All items further down the tree will be hidden initially. The level to which a tree view is initially expanded could also be configurable. In order to ensure good performance of the interface, the next, still invisible level of all folder items of a tree view could be made available at all times through pre-loading and caching.
To return to the parent item of a currently shown sub grid of items, the grid view provides an "up" button - clicking or tapping it returns you to the grid view containing the parent folder item.
A grid is not a very convenient way to quickly navigate a hierarchical set of items, but has the advantage of visualising the type of a file or even showing thumbnail previews of an item's content.
Optional behaviour
Magnolia should offer an index next to the scrollbar for large, sorted lists grids similar to what can be seen on touch devices to allow to quickly jump to a certain position of the listgrid.
Magnolia could offer inertial scrolling as seen of today's touch devices to allow users to quickly navigate large data sets without loosing track of where they are. This would be especially useful on said touch devices, but may actually be a function required to be offered by the browser.
Illustrations
| Note | ||
|---|---|---|
| ||
The illustrations mainly show which UI elements have to be present in order for the navigation of grids to work. They are presented isolated here, without the context they usually appear in. In the actual mockups e.g. for AdminCentral, some of these elements are actually placed in sidebars, others may remain in the toolbar. |
...
| Mockup | ||||||||
|---|---|---|---|---|---|---|---|---|
|
| Mockup | ||||||||
|---|---|---|---|---|---|---|---|---|
|
...
| Mockup | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|