Functional Prototype Video

Please find a demo video of the functional prototype below. For more information about how it was implemented and a step-by-step description of the interactions, read on below. Note: While the functional prototype video is unable to display photos from the library (as the simulator doesn't have any), I am pleased to say that the functionality works perfectly on the iPhone, as demonstrated in one of the screenshots below.

Implementation Information

This application was developed using XCode and the iPhone SDK, and written in Objective-C. It also uses Stig Brautaset’s JSON framework for the iPhone to read from a remotely hosted JSON file, and uses scripts written in PHP to write to the same JSON file and to upload images to the remote host.

The application delegate creates a UINavigation controller, so that all of the application’s screens may be navigable by the UINavigation interface. It also stores global variables such as the filter currently applied to a search, and the username entered at application startup.

The information architecture of the application includes the following UIViewController subclasses:

• Main, which handles switching between view controllers and causes the Start view controller to be pushed to the screen at application launch.
• Start, which allows users to enter a username and pushes the value to the application delegate.
• Floors, which allows users to choose the floor they would like to look at and populates its UIImageView with an according floor plan. It also displays the works on that floor as blue bubbles (limited to those matching a user’s filter, which is displayed in a label at the bottom), which the user can tap to see more information about the work and choose to respond.
• Search, which allows users to filter the pieces that appear based on preset criteria. It employs a UIPickerView to display the existing filters that a user may choose from, and buttons to either choose or clear the filters. Pressing on one of the buttons will return them to the Floors view.
• Artwork, which uses a UISegmentedControl to switch between displaying tombstone information about the work, allowing for text entry by the user, and allowing the user to choose a photo to attach. At the top of the view (no matter what is selected by the segmented control) is a prompt specific to the work, intended to get the viewer to start thinking about the work whether or not they choose to share their thoughts. Should they share their thoughts (by pressing the “Share” button in the navigation toolbar’s upper right corner), the segmented controller disappears and is replaced by a text box into which they can type the number placed next to the physical work – this will “unlock” five recent user responses, a.k.a. push the Responses view controller to the top of the stack.
• Responses, which employs a UIPageControl to switch between different Response views. Using the JSON framework it reads the amount of responses currently saved per the current artwork, saves those to an NSArray and adjusts the number of pages in the controller accordingly. It also passes the current page number and the NSArray to the Response views that it creates and switches between.
• Response, which uses the page number passed to it at the time of its creation to retrieve the according response from the passed NSArray. It displays this in an un-editable UITextView.

Functional Prototype

The screen on the left shows the revamped starting screen. It turned out that to use space more economically, a vertical orientation was preferable to a horizontal orientation. This is clear in the right-hand image, which shows how the keyboard uses space when it is on the screen.

After entering their name and pressing the "Enter" button, a Floors view controller is pushed to the top of the stack and animated within the navigation controller accordingly. The result is seen in the image to the right, where the lower lobby has been selected by default (made clear by the segmented controller) and the lower label indicates that no filter has been applied. Pressing the "Search" button in the upper right will bring the user to the Search screen. The search screen presents the user with a UIPickerView, which includes the terms by which they can filter their search. The user can either scroll to a term and press "Filter" to filter the search by that term, or clear an existing filter by pressing "Clear Filter."

In this case, the user chooses the "Betrayal" filter and presses "Filter," bringing them back to the Floors screen but with the filter applied (as indicated by the text in the bottom of the left-hand screen). The image above and on the right shows what happens when the user chooses a floor upon which there are works that match their filter. As indicated by the highlighting of the segmented button, the user has pressed on the fourth floor and a blue bubble appears on the map where there is an image matching their filter.

As shown in the left-hand image, pressing on this image will bring up an Artwork view that displays the prompt, a segmented control, and below (when "Artwork" is selected, as shown and as occurs by default), a depiction of the work of art appears so that the user can clarify what work they've chosen. By pressing on the "Write" segment of the segmented control, the user has the ability to type in a response to the work, as shown in the right-hand image.

When the user presses on "Choose Photo," they have the ability to either use the iPhone's camera to take a photo, or to choose an existing photo from their library. After choosing an existing photo from their library, the chosen photo populates below the two buttons (and can be replaced by pressing one of those buttons again). When the user is done adding the text and/or photo that they intended to, they press the "Share" button in the upper right.

As shown in the left-hand screen, this causes the interface to change slightly, and a text field appears which tells them to enter the code next to the piece. By looking to the right of the physical piece, they can find the code to type in, and upon typing it in correctly can press the "Unlock Responses" button to see the responses of others to the same work. When they have unlocked the responses, a response view appears showing one of the extant responses to that piece. In this case there are two responses, as indicated by the page indicator at the bottom of the screen. The user can flick their finger from right to left to see the response to the right, or simply hit the "Respond" button in the upper left to return to the previous screen.

Challenges and Next Steps

Some challenges cropped up as I debugged the application, particularly when trying to find a method to read from a file hosted remotely and to retrieve an image's path on the iPhone. For more information (there's a lot!) about the trials and tribulations that led to me working with JSON, check out my blog where I have a full entry on the topic. While that was resolved after two days of hunting the internet, there currently remains a challenge when working with the UIPageControl. To make the UIPageControl work I had used some sample code from Apple's developer resources, but unfortunately this didn't play nicely with the method I devised to populate the Response screens with information from the JSON file. Although I effectively developed a system for updating to and retrieving from the JSON file into a NSArray, for some reason "flipping" through the dynamically generated pages caused the application to crash. Because the array is successfully populating and the UIPageControl works with any data not being retrieved from an array, repairing this issue will take additional time. Additionally, attempting to repair this took priority over debugging the PHP script which is meant to upload an image object, and although I have the Objective-C in place I know I need to go back and refine the PHP uploader method in order for it to be scalable. As such, these are two weaknesses to the application which I intend to repair given more time.

Happily, the current weaknesses are not terminal, but simply could not be resolved in the four weeks I had to develop the aesthetic and functional prototypes on the iPhone. As I intend to work with Dr. Orit Shaer and Jim Olson of the Davis Museum to test and refine this application in the museum setting next semester, this is only the beginning of a project I am very excited about bringing to the Davis Museum. An additional feature I plan to bring to the application is the ability to read 2D codes using the iPhone's camera, so that users can scan a code rather than type one in when unlocking responses. I plan to use the zxing image processing library with its iPhone module to do so, and I believe this will add a fun and enticing element to using the application. Additionally, I intend to write a PHP script to convert an XML file hosted on the server to a JSON file, as Jim and the museum curators are already storing information about the artworks in XML files. In so doing, I can avoid the hassle of working with the NSXML methods and continue to take advantage of the JSON framework, without inconveniencing the museum staff.