Zoom

Owned by Jonathan Hung
Last updated: Dec 04, 2009Version comment
3 min read

Intro

This design shows an image pan and zoom component within a window. In Decapod, panning and zooming does not occur inside a modal window.

Zoom Wireframes

Zoom

Image 1

  • Zoom is activated and appears as a modal dialog box on the interface.
  • Background UI is faded to reinforce modal interaction.
  • Upon first visit in the session, the Zoom slider is by default at the most zoomed out position to fit the whole image in the view.
  • Pan Direction buttons are initially disabled since the whole image fits within the view.|

Image 2

  • Zoom slider is moved to 100% zoom level (1 to 1 image scale)
  • Up and Left Pan Direction buttons are disabled because the image is already at the top-left most corner of the image.|

Image 3

  • Moving the mouse over the view pane turns the mouse pointer into a grabber hand to indicate the image can be panned. |

Image 4

  • The user has the mouse button pressed and is about to drag to pan the image.
  • Mouse pointer turns from open hand to closed hand to indicate a grabbed state. |

Image 5

  • The image has been dragged in a direction.
  • The Left and Up direction buttons are now enabled. |

Image 6

  • Mouse button is released.
  • Panning action using mouse complete. |

Zoom Window Design Notes

  • The exact dimensions of the Zoom window is to be determined by a ratio of the size of the client's browser area.
    • i.e. Zoom window is to be 60% the width and height of the client's browser area).
    • Exact ratio to be determined through testing.
  • Undetermined at this point whether the Zoom window will be user resizable. If it is, then the dimensions of this window should persist across all images and the user's session.

Zoom Slider Interaction Notes

  • The slider moves in discrete incremental steps: 0%, 16.6%, 33%, 50%, 66%, 83%, 100%.
  • When the slider is moved to a new step, there is a slight delay before the zoom is applied on the image on the right. This is to prevent unnecessary processing and allow for ease of moving through steps.
  • Activating the + and - buttons will zoom in and out by 1 step.
  • Zoom factor is saved and persists across the user's session.
    • Zooming another image will default to the last zoom factor.
  • Hovering over the Zoom area will reveal a tooltip after a slight delay.
  • Possible tooltip: "Zoom in or out. Keyboard: Use + or - keys."

Mouse Interaction

  • If scrubber is released between two steps, then it will snap to the closest step.

Keyboard interaction:

  • '-' and '+' keys will zoom out/in. Actual keys used for interaction will be determined through testing with ORCA.
  • If zoom can not go further in a particular direction, attempting to key press more in that direction should give an audible warning.

Panning Interaction Notes

  • Hovering over the Pan Direction area will reveal a tooltip after a slight delay.
  • Possible tooltip: "Pan the image when zoomed in. Keyboard: Use cursor or I-J-K-M keys."

Mouse Interaction

  • While in a dragging state:
    • Panning of the image will still occur even if the mouse pointers leave the visual boundaries of the modal dialog box.
    • The mouse pointer will remain a "grabbed" hand as long as the mouse button is depressed.
    • Panning in a direction that is not valid will keep the image from moving in that direction.

Keyboard interaction:

  • Keyboard equivalent: cursor keys or I-J-K-M. To be tested with ORCA.
  • If panning can not go further in a particular direction, attempting to key press more in that direction should give an audible warning.

View Pane Interaction Notes

  • Double-clicking the view pane (the pane containing the view of the image) will zoom-in by 1 step.
  • Alt-Double-clicking will zoom-out 1 step.
  • If zoom can not go further in a particular direction, attempting to double-click zoom in that direction should give an audible warning (like Zoom Slider keyboard interaction).