| Table of Contents |
|---|
Story
Magnolia should let me navigate and browse lists (see Definition of terms#list) easily by using either a mouse, a keyboard and using touch gestures.
Description of desired behaviour
A list can be navigated similar to a tree by using the keyboard's UP and DOWN arrow keys. The list shall load additional, previously invisible items on demand to ensure good performance even with large list structures. A visual indicator shows if data is being loaded dynamically.
Likewise, a list 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.
For touch input, scrolling the list is supported using the common gesture by swiping a single finger up or down.
Note that all scrolling operations should be smooth and not jumpy to avoid loosing sense of where in the list you currently are.
Optional behaviour
Magnolia should offer an index, e.g. located next to the scrollbar as we know from current touch devices, for large, sorted and non-hierarchical lists to allow to quickly jump to a certain position of the list.
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 | ||||||
|---|---|---|---|---|---|---|
|
...