Tags
ahead   lila.io  
Latest Activity
Magic Toolbox
edited a wiki page Navigating between items 60 days ago
Magic Toolbox
edited a wiki page Zooming Technologies 60 days ago
Magic Toolbox
edited a wiki page Scrollwheel Zoom 63 days ago
John Myrstad
edited a wiki page Scrollwheel Zoom 75 days ago
John Myrstad
edited a wiki page Zoom to Point 75 days ago
Top Contributors
Ian Gilman
29
Ian Gilman
Kevin Hanes
25
Kevin Hanes
Daniel Gasienica
15
Daniel Gasienica
Henrik Kryger Pallesen
12
Henrik Kryger Pallesen
Peio
10
Peio
John Myrstad
5
John Myrstad
Magic Toolbox
3
Magic Toolbox
adam.hill
2
adam.hill
lukaszuk
2
lukaszuk
kelemen.viktor
1
kelemen.viktor
freddy
1
freddy
SeH
1
SeH
Share
Navigating between items
Navigating between items

Problem: In canvases that have more than one item, what is the right way for users to move between and among these items

 

Rationale: In ZUIs we tackle two problems, the single large image, and the collection of images/items large or small.  It is imperative that there be a sensible way for users to move between these items that neither punishes them for exploring nor easily gets them lost.

 

Variants:

  • Single click on an item, when zoomed out should zoom this item to fit the viewport.  If item is zoomed in, viewport expands to capture more or all of the scene.  This can be made discoverable with a magnifying glass cursor.

  • Double Click on an item to accomodate for the situation where an item is hyperlinked (to external web page or another object on the canvas) as the single click will send the user to another destination Example Ahead. 

  • Use of Left/Right/Up/Down buttons on the edge of the viewer.  Clicking them will navigate to the item in that direction, this is particularly effective in grid layouts though may cause problems in other layouts as it can create "unreachable" items.  In stacks of items this falls down entirely.

  • Predefined viewports can help the user navigate the canvas in a more structured way via a fixed hyperlink menu that links to the viewports or in a predefined sequence of viewports via back-forward buttons. Ahead use this approach and combine structure with exploration by having unique URLs for each viewport. If zooming away from the viewport the user can return to the viewport by simply using the browser back button.

  • Thumbnails of items can be shown on the viewport, providing the viewport is large enough to accommodate them without hindering ability to zoom around the main image. Users can click on the thumbnails to switch the main image. An example of thumbnails can be seen on Magic Touch in full screen mode.

Discussion
Vladimir Tsvetkov 10 months ago
It's important to note that navigating between items is not a pattern, but an user action. In ZUI's such actions may incorporate the use of a pattern. I'll give you example for a pattern related to navigating between items:

Bird's Eye View

Problem: When navigating between items situated on the distant ends of a ZUI's plane users can easily get lost.

Rationale: Zooming out enough to a bird's eye view before starting to pan towards the next items helps the user to develop a sense of spatial orientation.
Vladimir Tsvetkov



or
Connect with Facebook
Notifications