Decapod Design Iterations (Prototypes)

Owned by Jonathan Hung
Last updated: Jun 15, 2011Version comment
5 min read

These are "Character Sketches" of Decapod interfaces. The images are to give a condensed view of what the interface and interactions would be like.

Version 9

This design removes the concept of "Thumbnail" and "Detailed" views, instead using a draggable divider to show more or less thumbnails.


The user can:

  • grab the handle and manually adjust the width of the thumbnail pane.
  • click/activate the handle so the thumbnail pane maximizes or minimizes.
  • more details on this interaction forthcoming.

The user enters the Remastering mode by selecting the Remaster button. In doing so, the existing book will be processed by Decapod.


Notes:

  • Changing from Capture to Remaster mode will warn the user that the process can take a long time - gives options on how to proceed. (Exact wording and interaction to be determined).
  • In switching to Remaster mode, any "unfixed" images in the project are automatically fixed.
  • Export option in the top menu is disabled during Capture mode.

After processing is complete, the interface switches to Remastering mode.


Notes:

  • Results of processing are displayed graphically on the screen so user can do QA on the pages.
  • Layout regions are selectable. When a region is selected, they can be reclassified, deleted, or order changed in the flow.
  • Export option in the top menu is enabled after processing is complete. Selecting Export reveals a fly-out menu for the different export formats.
  • Double-clicking the page number in the thumbnail pane will activate Inline Edit.

Issues:

  • Drag-panning of a zoomed image may be problematic if regions are selectable.

Version 8

This design is influenced by the discussions at the all-hands meeting in early August. Notable addition is how thumbnails appear prior to being merged and dewarped.

Version 7

Improve the screen usage by arranging the interface vertical. A slider adjusts how many images to display on the right panel. Options are no longer hidden in a dialog, but obvious on the interface.

Thumbnail Gutter Actions

Motivation for this interaction is allow the user a way of cutting and pasting images as a way of reorganizing the order. Also allows the user to insert new photos anywhere without having to capture, scroll to the end, and then drag the image to the desired location.

Version 6

A refinement on Version 5 based on results from user testing.

Notable improvements:

  • Save dialog makes more explicit the file format.
  • Export dialog gives better prompting, and adds the option of exporting just the selected images.
  • Options now moved to top of the interface where it is more obvious.
  • Magnify All was removed due to lack of clarity.
  • Zoom / pan controls added to Zoom and Camera Preview.

Version 5

Following on the motivation to keep strong continuity and minimize cognitive load, the above design uses a sliding panel to minimize and maximize certain areas of the screen.

Originally this design employed a "Number of Thumbnails Per Row" feature, but was removed because it would cause an awkward scrolling of larger thumbnails because of the fixed height when collapsed.

After user testing this prototype, the results show that there were issues:

  • Save and Export process was ambiguous
  • Expanding panels functionality and Options were misunderstood or ignored.

Version 4

This iteration attempts to improve on the previous design by using a modal dialog for the image capture. Continuity of work was strong since the whole interface is visible.

However the use of a modal dialog isn't graceful since modal dialog are typically used for quick temporary interactions and dismissed.

Version 3

This iteration uses two distinct views for Capturing and Image Review. The intention is to focus the user on separate tasks by switching between "Take Picture" and "Review Pictures". New functionality was added to the interface that came from the research phase.

This design lacks good continuity by effectively creating two separate interfaces and increased cognitive load on the user.

Version 2

A quick iteration on Version 1. After some discussion, it was decided that our focus would turn to making capturing more efficient.

  • Insert Before/After was removed to reduce confusion. This could be functionality we will add back in a later iteration or further down the workflow (i.e. During the "Mastering" phase).
  • Recapture removed as it wasn't clear what it does and how it's different from "Capture"

Version 2b

(Image not available)

This version is similar to Version 2 except that it uses the inter-image gap as clickable space for inserting images. While this made it convenient to insert images, it increased the complexity of the interface and created the potential for error by placing more clickable objects in the thumbnail grid area.

Version 1

Initial design used in user testing.

Results show that the interactions were clumsy and the various buttons were confusing. While the interface appeared to work well enough, for large scale image capturing it probably would not hold up.