/
Thumbnail Interaction and Behaviour

Thumbnail Interaction and Behaviour

Nov 24, 2009

Intro

Thumbnails in Decapod are a little different from a typical thumbnail of a single image in a image manager for the desktop.

For each capture in Decapod, two images are produced: one from Camera 1, and one from Camera 2 (aka. the "stereo pair"). Each of these images will show the same page spread but from two different perspectives.

After Decapod's processing, these stereo pair are replaced by two images: one of the left page, and one of the right page.

This transformation from stereo pair to a single pair occurs while the user is doing their work. This wireframe captures this interaction as it would appear to the user.

Thumbnail Layout Behaviour

Prototype v8 - Detailed View

Prototype v8 - Thumbnail View

Prototype v9


Instead of two thumbnails side-by-side, the thumbnails
are stacked and can be flipped to reveal the corresponding
image pair.

A detailed look at how the thumbnail is to be laid out:

  • If there are any unprocessed images and the user saves a PDF, then all images are processed (dewarped and split) as part of the save process.

Thumbnail Interactions

  • Only 1 selection is allowed at a time (in the future, we could allow for multiple selections).

  • Only the selected thumbnail has a "Delete" button overlaid the image.

  • Reordering is possible by drag and drop, or by keyboard interaction.

  • Thumbnails will be a fixed size. But in the future we could accommodate a thumbnail size adjustment. The smallest thumbnail size will depend on the size of the delete buttons and length of text to displayed in the thumbnail header.

  • There is a keyboard cut and paste interaction. See Thumbnail Cut and Paste wireframe.

Tooltips:

  • Dwelling over the thumbnail image and empty space inside the thumbnail border will reveal a tooltip giving Decapod thumbnail metadata: page number(s), queued or processing, and other relevant information that may be useful for non-visual feedback.

  • Dwelling over the Delete key will reveal: "Delete picture. (Keyboard: Delete key)"

  • Dwelling over the Zoom key will reveal: "Show larger version of this picture. (Keyboard: Enter key)" (Zoom removed in v9 protoype).

Reordering Thumbnails

Mouse interaction:

  • drag and drop using any space that is not the overlaid delete button. (For example of keyboard interaction, see Image Reorderer)

  • Alternatively, the page can be moved by activating the page order inline edit (double-click the page number, or by pressing F2) and typing the new position.

Keyboard interaction:

  • following Image Reorderer) keyboard interactions using CTRL+I,J,K,M. (to be tested with ORCA)

  • Alternatively, the page can be moved by activating the page order inline edit (double-click the page number, or by pressing F2) and typing the new position.


Using Inline Edit to reorder a page.

Audio interaction (mouse):

  • start move: "Moving page x."

  • dragging: "<current page location>" i.e. "4... 5... "

  • end move: "Moved page x to y."

Audio interaction (keyboard):

  • start move: "Moving page x."

  • while move modifier key is still activated: "<current page location>" i.e. "4... 5... "

  • end move: "Moved page x to y."

Adding / Inserting Images

*Can be done by performing a capture and then cut/paste, reorder the new image.

Deleting Thumbnails / Images

Mouse Keyboard interaction:

  • Press Delete key or by selecting the Delete overlaid button with the mouse.

  • Note: keyboard focusing the delete overlay button may cause some undesired interactions. To be tested.