ASSIGNMENT 5: INTERACTIVE PROTOTYPE OVERVIEW

View Interactive Prototype (opens in a new window)

The implementation of PhotoCat proved to be time consuming and difficult because of its interface choices. We focused on getting the bull’s eye and photo bin functioning correctly since the other options directly depend on them for usage of the application. We concentrated on getting the photos to display correctly on the three most essential bull’s eye views (month, week and day), getting the filters to function correctly, and getting the photo bin to function correctly to ensure that people can aggregate the desired photos for further actions. (The screen shot below shots the layout of the main interface. For more screen shots and information about functionality, see the Screen Shots and Walkthrough section.)

Many of the peripheral action screens (sharing, printing, creating albums) imitate the real functionality. They express the basic functionality without full implementation. They show the flow of use and generally terminate at the end of a process without taking the real action such as emailing friends to notify them of shares.

To get a realistic idea of how the interface works, we needed a larger collection of photos than was available on our paper prototype and much more realistic photo distributions and responsive filtering options. The photo collection size was very limited in our paper prototype because we had between 30 and 50 photos—only some of which might appear at a specific time. The small size was necessary because of the time-consuming nature of creating thumbnails and other items by hand. The small size was also necessary for the human computer to operate on the collection. Our interviewees, after some minimal navigation, often just looked and immediately spotted the photos needed to complete a task scenario. The interface couldn’t be tested thoroughly since most interviewees spotted target photos unrealistically quickly because of the small collection size.

Creating mock-ups or using simple "Wizard of Oz" techniques for the basic functionality proved difficult because of the large number of possibilities and interactions between all the controls and the need to have a larger and more realistic collection. We needed to create some real interaction since simulating the kind of interaction we were interested in is difficult. We also wanted to use realistic photo metadata. We know that real photos are often taken in a "bursty" way.

TECHNOLOGIES USED

We had to use a variety of tools to do what we needed. Most of the tools we used were decided based on our needs and by the group members’ knowledge of the tools.

  • All group members are familiar with HTML—or at least the use of Dreamweaver to create HTML. The idea was that all group members could help build-out parts of the interface so that it could be completed in a reasonable amount of time.

  • We chose ASP as a server-side technology since we needed a technology to pull information out of a database with our goal of displaying a larger collection. We picked ASP over other server-side web technologies because two group members were familiar with it and Visual Basic, and another group member was familiar with PHP—which is similar in some ways. Again, the idea was to get group members involved in the large amount of work that needed to be done. We ran into difficulties with this technology since Kevin Heard has secured the ASP server at SIMS so that files can only be updated or accessed while inside the SIMS network. This required us to make trips to South Hall in order to update code. It also made distance collaborative work difficult.

  • We chose Access as our database format because it requires little set-up, is easy to move and copy and gives a useful interface to speed database and query creation.

  • Finally, we used ASP-generated dynamic styles to place the photos on the target area. The thumbnail mouse overs were created using styles and JavaScript. We thought about using Flash/ActionScript for the project because of these difficulties, but group members did not have experience connecting Flash to database technologies.

Overall the technologies we used allowed us to complete our main goals. At the same time, using so many different technologies made their integration more difficult than with a smaller number of technologies.

CHANGES IMPLEMENTED BASED ON LO-FI PROTOTYPE AND FEEDBACK

1. There needed to be a stronger mapping between the filter menus and the bull's eye view. We moved the menus above the bull's eye and away from the Photo Bin in the interactive prototype.

2. Users did not understand the mapping between the Actions section of the screen and the Photo Bin. There needed to be a stronger mapping between those as well. We put the Actions and Photo Bin in a single box with a blue background to connect them.

3. Participants thought that the petals signified who the picture was shared with. We got rid of the petals around the thumbnails to make our interface less complicated.

4. All of the users expected albums to show up in a separate album view. We've added a popup album view feature (although it isn't fully functional in the interactive prototype).

5. Users assumed that some elements of the bull's eye view were clickable, and that clicking them would allow them to filter the photos in the collection. We've added clickable links within the bull's eye that allow users to change the time range.

We've also added an effect that displays a larger popup image (with metadata details) when the user mouses over a circular thumbnail. This improves usability when photos are close together in the bull's eye, or when the content in the circular thumbnail is hard to distinguish.