Monday, April 22, 2013

Comic Book, Pt. 1

As a personal side project this semester, I will also be developing my own app with the intent of distributing a comic book. It will be an iOS native app. Without getting too much into the nitty gritty of the book, I have put together two simple prototypes to consider as interface alternatives. The comic book will initially only include one "book" (episode/chapter...still working on terminology), so further versions will need to include capability for multiple book navigation. The MVP, however, will start with a splash screen, enter right into the first page of the book, and have a way to move from scene to scene. The main differences between the two prototypes, however, is in the main navigation. If a user decides to exit the page view, they will be presented a way in which they may skip to alternate pages. These differences will be outlined in greater detail below.

The first version begins with a splash screen to be viewed during loading. I am still debating whether or not to include a progress indicator for this activity. Because the app is loading photos, the build could take a while, and the user should be notified the app is still functioning. On the other hand, I do not want the progress bar to take away from the comic book feel of the app. There are several progress indicators with a tech-y feel that might transition nicely, so...that decision will remain pending.

Once the program has loaded, the user will be directly presented the first page of the book. "Page turn" indicators in the bottom corners will indicate tap areas to navigate forward and backward through the book. There will also be a "home" button in the top, which will allow the user to access the main navigation mentioned earlier.

The main navigation will be presented in a grid view, just like a standard photo album. This will allow the user to skip forward or backward to view a different part of the book. Once clicked, the user will be taken back into page view as seen above.

The second version also starts with a standard splash screen while the program loads. That is then followed by a similar page view, but the "page turn" indicators have been left out in favor of a swipe navigation between pages, with a page turn animation instead. Also, the "home" button has been switched to a "close" button in the top right corner. Finally, the main navigation is presented in a carousel format.

These two paper prototypes will be used this week for testing as follows:

-Are "page turn" indicators necessary?
-Is a progress indicator necessary?
-Which navigation style is preferred?

I intend to obtain feedback from 25+ potential users. I will begin by testing the others on the comic book committee (3 individuals) as well several of my easily contacted friends (8 individuals). I will augment those numbers with other individuals from my classes and environment as well. I intend to have all data obtained by Wednesday.

I will first give the test subject a short introduction to the process the test, then flip a coin to determine which version will be presented first. I will then present the first splash screen to the individual and start a timer. I anticipate the user will tap the splash screen once. After that, I will stop the timer upon their next action, as this action will most likely be out of frustration rather than expectation. I will simultaneously present them with the next page, which is the first screen of the book. I anticipate those with the "page turn" indicators presented first will immediately try to use those, but when presented with the other interface will have a little more difficulty transitioning to swipe movements. I will have two or three additional "book pages" prepared for the user to navigate through, and will run through the experiment until the user decides to quit. 

Upon completion, I will ask the user the following three questions:
-Which style of navigation did you prefer (carousel/grid)?
-Which method of turning pages did you prefer (swipe/tap)?
-Did the "page turn" indicators augment your user experience?

The timing of the initial sequence will later be compared to actual load times to determine whether or not a progress indicator is necessary. The user comments will also be taken into consideration and tested at a 90% confidence interval. I also will need to put both prototypes on the same color of paper so that does not influence their decision. 

Stay tuned to find out what comes of the experimentation!


  1. Great work here. I love experiments, although if you want to focus purely on programming for your side project I would have no problem there. You're already doing the experimental stuff with Martin, so no requirement for it here from a class point of view.

    You might want to check out the existing comic book publishing options on iOS and things like the Android Kindle Fire. There is iBooks author:

    And a number of readers on Android:

    Although perhaps you are more interested in just creating some sort of iOS app rather than exploring the options for a budding comic artist. If you really want to focus on your iOS skills, I would recommend working through the coding assignments from the CS193P course - I will be very happy to give you help there.

  2. I did go ahead and let Martin run with the experimental stuff for the other app, so I will be publishing results from my experiments with this shortly.

    Also, the intent of this app is not to be a comic book reader for other people, but this app IS, in essence, a comic "book". It will be designed specifically to present the material for this book...