iCurator Interactive Prototype #1
for Group 5, CS 160, Fall 2001
Kevin Wang: content
Leila Takayama: documentation
Chuck Moidel: software
Scott Carter: design
URL of this document: http://ratbert.bmrc.berkeley.edu/courseware/cs160/fall01/Projects/Group5/Hifi1.html

Introduction
 

The iCurator is a system created for adult museum visitors a wide range of experience with art, museums, and technology. The purpose of the iCurator is to give museum visitors a more fulfilling experience at the museum by allowing visitors to automatically retrieve an assortment of information on artworks, send links and information via e-mail, and navigate their way successfully through galleries. By using barcodes placed throughout the museum, the iCurator provides useful information to the visitor based upon the visitor’s location whether it is at the entry of a gallery, at the elevator doors, or in front of a specific artwork.

Tasks

The three user tasks were as follows:

1) A friend of yours mentioned an interesting piece of art on the sixth floor at the Berkeley Art Museum so you went to check it out. You have just entered the museum and want to find your way to the sixth floor. Please use the iCurator to navigate to your destination.

2) Now you are on the sixth floor. Then look for the work called “Number 6” by Jackson Pollock. Please use the iCurator to find information about that piece of art. You are interested in related pieces at BAM. Go to Gallery A and use the iCurator to locate a related piece.

3) You are now in Gallery A, containing works by Hans Hoffman, standing in front of a piece called “The Prey”. You would like to read more in-depth information about the piece after leaving Berkeley Art Museum. Please use the iCurator to choose an article about “The Prey”. Then send that information to yourself via e-mail.

Revised Interface Design

The following changes were made between the previous prototype and the current interactive prototype:

1. A “Home / Map” button was added to menu bar so that it is more clear to users how to return to the home page.
2. A keyboard button was added to the menu bar so that users who did not like to input text with the stylus could use the Jornada’s on screen keyboard for text entry instead (note that this keyboard only appears when using iCurator on the Jornada and not when emulating on a PC).
3. Floor numbers indicated in top right corner so that user knows what floor they are supposedly on. This was sketched in on low fidelity prototype during user testing.
4. Labels added to map to make navigation through the iCurator map easier for users to understand. This was also sketched in on low fidelity prototype during user testing. The original version had no labels on the map, just clickable regions, which baffled one user. It was unclear that regions were clickable and that regions corresponded with levels of BAM.
5. iCurator logo in top left corner added so that the user is always aware that they are still running the iCurator application.
6. Typeface changed to make certain items more prominent. For instance, the “How to use iCurator” was put in bold face because all of the users in the low fidelity user testing did not notice that it was there to help them learn how to use the iCurator. Font colors indicates whether text is a link or just static text.
7. Instruction wording changed to be clearer because users had difficulty understanding where links would take them. For example, instead of “Please scan in the barcode nearest you or choose a point on the BAM map that interests you” the instruction on the home page now reads “Click on the map for more detail”.
8. Link labels were also changed to be more descriptive so that users would know where links would take them. For example, instead of “read articles” on the artwork page, it now reads “articles about this piece”.
9. The forward button has been eliminated as the test users never used it and we determined that the keyboard button would be a much better use of the space.

Locations of change are annotated on the high fidelity prototype screen shots (Fig 1a, 2a) next to their corresponding low fidelity prototype screen shots (Fig 1b, 2b).

Figure 1a Figure 1b

Figure 2a Figure 2b

Storyboards for the 3 Tasks:

Task 1 Figures

Figure A1 Figure A2 Figure A3 Figure A4

Task 1 Scenario (difficulty level: easy):

1. The user is at the entrance of the museum and is asked to navigate to the 6^th floor using the iCurator. First the user clicks anywhere on the map image of the home page (Fig A1), which takes the user to the Map page (Fig A2).

2. By scanning in a barcode on the wall nearest the user, he may identify his current location on the iCurator, which brings him to the Direction page (Fig A3), which is very similar to the Map page other than it has a red dot indicating his current location. By clicking on the sixth floor on the map, the user is shown the path from his current location to his desired destination, the sixth floor (Fig A4).

3. The user then proceeds up the stairs to his left to physically go to the sixth floor. At this point, the task is complete.

Task 2 Figures

Figure B1 Figure B2 Figure B3 Figure B4

Figure B5 Figure B6 Figure B7 Figure B8

Task 2 Scenario (difficulty level: moderate):

1. The user is first asked to locate the artwork called “Number 6”, read relevant information about it, and find a related piece of art in the museum. Starting from the iCurator page where he left off at the end of task 1 (Fig B1), there are several ways he might go about completing this task. One way is to click on the search button at the bottom of the page, which will take him to the search page (Fig B2). Or he can scan the bar code next to the piece which will take him directly to Fig B5.

2. He wants to search for the piece by title so he clicks on the link labeled “title”, which brings him to the Search by Title page (Fig B3). Because the title of the piece begins with an N, he clicks on the “N” link at the top of the screen, which opens up the menu of artwork titles that begin with the letter N (Fig B4).

3. By clicking on the link labeled “Number 6” he is brought to the page just about that piece of art (Fig B5). To read more information about the piece he clicks on the link labeled “Articles about this page”, which brings him to the More Information page for “Number 6” (Fig B6).

4. He wants to now find related artwork in the Berkeley Art Museum and remembers that there was a link to related work on the previous page. To go back to the “Number 6” page he clicks on the link labeled “Number 6” at the top of the screen. He clicks on the link labeled “Related work: The Prey”, which brings him to the page about that artwork (Fig B8).

Task 3 Figures

Figure C1 Figure C2 Figure C3 Figure C4

Figure C5 Figure C6 Figure C7 Figure C8

Figure C9 Figure C10 Figure C11

Task 3 Scenario (difficulty level: hard):

1. The user wishes to navigate to the artwork “The Prey” and email information about that artwork to himself using the iCurator. First, he notices that “The Prey” is on floor B by looking at the top of his current screen (Fig B8). If he already knows that floor B is where he began then he will skip step 2.

2. If he does not know where floor B is then he will go to the home page (Fig C1). From there he clicks on the portion of the map labeled “B” (Fig C2), which brings him to the page about that floor (Fig C3). He wants to enter the gallery on that floor so he clicks on the link “Enter the Gallery”. From the gallery page (Fig C4), he clicks on the thumbnail or the text about “The Prey”, which brings him back to the page he ended on with task 2 (Fig C5).

3. If he were particularly interested in seeing a close up of a point of interest on “The Prey” he might click on that portion of the image to bring up a larger image of that point of interest (Fig C6). For more traditional art pieces, the zoomed image will have accompanying text explaining why certain portions of the piece are highlighted (i.e. symbolic significance and historical antidote). Due to the nature of Hans Hofmann’s art, we did not add any accompanying text for Fig C6. By clicking on the link labeled “Articles about this piece” he will find more information about “The Prey” (Fig C7).

4. To mail this information to himself he may either click on the email icon at the top of the page or on the email button at the bottom of the page. They will both take him to the Email Composition page (Fig C8). To enter his email address he may either user graffiti or use the keyboard. To use the keyboard, the user clicks on the keyboard icon at the bottom corner of the page, which brings up the Jornada screen keyboard (Fig C9).

5. After entering his email address and other notes to himself he clicks on the link labeled “send” to proceed. After reading over the privacy statement (Fig C10) the user clicks on “send” again to confirm that he wants to send the email. The task is now complete so he is taken back to the home page.

Prototype Overview

Tools:

For the high-fidelity prototype we used two different tools. We wanted to have as much control as possible over the end user’s experience on the HP Jornada PocketPC, but at the same time allow other CS160 students to easily try the iCurator from their home PCs. Also, because not everyone in our group wanted to program, we chose to separate the iCurator content development from the application development.

• Microsoft’s Embedded Visual C++ Version 3 was used to develop a special browser application for the Jornada in order to have full control over the user’s experience. The custom browser, coined Pocket Browser FS, is 100% compatible with Pocket Internet Explorer (PIE), but unlike PIE runs full screen without the taskbar on top and the menu bar on bottom. The browser also prevents the user from quitting the application or running any other application on the handheld. It accomplishes this by hiding the Start Button and disabling the hardware buttons. With this application we could use Flash, HTML, frames, or Jscript to display iCurator’s content on the entire 240x320 screen without the possibility of the user accidentally exiting the application or starting another. Though the compiler was easy to use, it was very difficult to find out which API calls would produce the desired result. The PocketPC SDK is very obscure and there are many quirks and entry points in the operating system that are undocumented. If it were not for a certain independent programmer documenting the interface to PIE’s web rendering engine, this application would not have been possible.
• Macromedia Flash 5 was used to develop the iCurator’s content in order to have a user interface that would look and work the same on both the Jornada and a desktop PC. Flash is very compact and platform independent. We were able to very easily layout content with many images and links using Flash and publish it to fit the Jornada screen size. Macromedia currently only supports Flash 4 through PIE. Because of this, we were not able to use any of the new action scripting functionality of Flash 5. Without this functionality, we may be forced to use Jscript or Java for our second High Fidelity Prototype. As Flash 4 implements only sundry features of ActionScript (which we realized only during development), we were unable to implement many interactive features that iCurator must eventually support (e.g. keyword search, automatically generated text and the back button).

• Adobe Illustrator and Photoshop were used for improving aesthetics of images to fit into the iCurator window. Images were cropped with Photoshop to display and focus on relevant portions of the images collected with the digital camera for insertion into the iCurator interface. We used Adobe Illustrator to create vector graphics.
• The Internet was used for learning more about development for the HP Jornada to find out what can and cannot be done with Pocket PCs. It was a useful resource for learning more about what other Pocket PC developers have done to try to overcome the limitations of handhelds such as the Jornada.

Overview of User Interface:

• The most salient items for the iCurator have been placed in the toolbar that it always present at the bottom of the screen: home/map, help, e-mail, search, back, and keyboard (see bottom of all figures in appendix).
• The home page has help offered in bold letters so that new users will be able to seek assistance the first time they use the iCurator (Fig 1). To navigate around the museum and seek directions (Fig 2-4), the user just clicks on the image of the map of the Berkeley Art Museum on the home page.
• The search feature will eventually be available for searching by title, artist, gallery, genre, floor, or keyword (Fig 5-7). Currently, only the title search is implemented.
• Each floor has its own page with an image of the floor itself, a brief intro to the floor, and an entrance link to the gallery on that floor (Fig 8, 9).
• Each gallery has its own page with thumbnails of artworks available in that gallery (Fig 19, 22). The thumbnails and their descriptions are links that will take the user to information specifically about those pieces of art (Fig 10, 11). Some artworks have specific points of interest. These may be viewed for closer inspection by clicking on the portion of the image on the artwork page to view that portion of the image up close (Fig 12).
• Articles about the artwork are available on separate pages as well (Fig 13, 14). Links at the bottom of these pages allow users to browse other sources of information about the artwork. From these pages, users may choose to email the articles on screen to themselves using the e-mail composition feature (Fig 15, 16, 23, 24). The on screen keyboard may be useful to users for this task so they may access the on screen keyboard by clicking on the keyboard icon in the toolbar menu.
• Other pages such as Donations (Fig 18) and Help (Fig 17) have also been created, but those simply give the user an idea of what will be available in those features in the future. They are not currently implemented in the prototype.

Implementation Decisions:

• General - In general, the parts not implemented were the parts of the iCurator that were not related to the user tasks. For example, any of the floor or gallery pages for places not visited in the tasks were not implemented. Although there are links suggesting the presence of features such as help, contact information, keyword searches, etc. there is very limited or no functionality to them.
• Back button - Because of the limitations of Flash 4 (versus Flash 5) we did not implement the back button for this iteration of the design process. Instead, a user may click on one of the higher level links at the top of the screen. For example, on figure B6, the user may click on the link labeled “Number 6” or the user may click on the back button. They will both bring the user to the same page.
• Scrollbars - Implementing the vertical scroll bar is not straightforward in flash, and was unnecessary for this prototype. We intend to implement it in the future to allow for longer screens to increase the amount of page real estate available. Because there was not enough room for links to video clips and audio clips as provided in the low fidelity prototype and because those features were not relevant to our current tasks, we have decided to wait until implementing the scroll bars to include those features in the iCurator.

Wizard of Oz:

Bar code scanning – Because the purchase of bar code scanners is not financially feasible ($700), the iCurator bar code scanning function will be performed using the Wizard of Oz technique. For example, on the Map of BAM page (Fig 2) the user will pretend to scan a barcode placed on the wall at the museum. Then the Wizard will take the iCurator away from the user, click on the word “barcode” in the instructions text (a secret link), and the user will be brought to the next screen (Fig 3), depicting the user’s current location.

E-mailing – Because the iCurator is not actually connected to a wireless network (as Pocket

PCs still lack Blue Tooth technology) and will never be online, nothing will be emailed anywhere when the user “sends” an email of the article out during task 3. Although nothing is actually emailed to anyone, it is implied through the user’s correct use of the interface that the user may pretend that an email will be sent at the end of the day when the iCurator is put online by museum staff.