iCurator Final Project Report

for Group 5, CS 160, Fall 2001

Kevin Wang: content

Leila Takayama: documentation

Chuck Moidel: software

Scott Carter: design

Online version available at http://www.madpickle.com/icurator/

Introduction

Art museums are often a daunting challenge to visitors, whether they are visiting for their first time or one hundredth. On weekends, museums are usually crowded and thus curator-guided tours are often over-attended. As a result, visitors gain little knowledge about the art, most pieces are left wholly unappreciated and ultimately the museum-going experience is unfulfilling. Museums are less crowded on weekdays but there are no curator tours. Visitors are expected to navigate the museum using nothing more than little placards denoting the artist, date and a couple of rather unsatisfactory sentences about the piece. Audio-guided tours are equally problematic — they usually select a few pieces and leave out a majority of the collection. Furthermore, neither audio tours nor curator-guided tours encourage group discussion or interaction. It is our opinion that art cannot be understood without knowledge of its context, nor does art succeed as a communicative medium without discussion.

As a response to these problems we have developed a system, called iCurator, that would allow visitors to automatically retrieve information on artworks, navigate their way successfully through galleries and communicate ideas and opinions regarding pieces to other patrons. iCurator is a system created for adult museum visitors with a wide range of experience with art, museums, and technology. iCurator allows museum 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~~ entrance of a gallery, at the elevator doors, or in front of a specific artwork.

Tasks

Task 1 (difficulty level: hard)

Find the artwork entitled “Number 6” by Jackson Pollock in the Berkeley Art Museum using the iCurator. After physically locating it, use iCurator to find additional information about the artwork.

This task was chosen because it was based upon a realistic scenario in which the user is introduced to the iCurator and then uses it to look for a specific piece of artwork in the museum. Completion of this task requires an understanding of the home page, use of the search function, use of the map function, use of the barcodes, use of the directions function, and physical navigation through the museum. The task is both simple and complex in that it is a very basic and desirable task yet it entails a brief usage of many iCurator features.

Task 2 (difficulty level: easy)

Find an artwork related to “Number 6” in the Berkeley Art Museum. Physically go to that piece.

This task was initially chosen because subjects of the contextual inquiry said that they would find it useful to have a related artworks feature on the iCurator. It is easier than the first task because it only requires the use of one new feature, specifically reading the article about the artwork “Number 6” and looking for links to other pieces. It is a good task because it allows users to follow connections between artwork within the museum and gain a deeper understanding of many pieces. It incorporates accessing articles about the artwork, finding the location of related artworks within the museum, and navigating through the museum.

[LT1] Task 3 (difficulty level: moderate)

Read more information about “The Prey” and e-mail a relevant article to yourself using iCurator.

This task was chosen because it makes use of a more innovative feature, the emailing of information, from the museum to a personal email account, for future reference. While the email function may be used for just jotting down notes or writing to friends, the task of sending an article was chosen because it did not require the user to compose an email on the spot. Instead, it only required users to forward a prewritten article to themselves by using the on-screen keyboard to enter their email address. This task particularly highlighted iCurator’s context-sensitive email feature.

Design Evolution

Changes from Initial Sketches to Low-Fidelity Prototype

Figure 1a – initial sketch Figure 1b – low fidelity Figure 1c – initial sketch Figure 1d – low fidelity

· Backtracking navigation was changed from menu at bottom tool bar [fig 1e] to a hierarchical display (e.g., “home: 4^th floor: gallery x”) at the top of each page [fig 1d] because this form of navigation requires less movement by the user and is standard in Web site navigation. This also allows users to quickly identify their location within iCurator’s hierarchy.

· A map was added directly onto the home page [fig 1a and 1b] so that users could quickly scan the map upon opening the iCurator.

· Instructions such as how to select an artwork from the gallery page were added to make steps for use of the iCurator more explicit [fig 1c and 1d].

Figure 1e – initial sketch

Changes made based upon Low-Fidelity Prototype Testing

Figure 2a – low fidelity Figure 2b – high fidelity Figure 2c – low fidelity Figure 2d – high fidelity

· During testing, we added location information indicating the floor to which the displayed information pertained, in the top right corner of each screen [fig 2b].

· Also during testing, floor labels were added to maps [fig 2b].

· The “How to Use iCurator” link was made to stand out for increased saliency in case the user was lost or confused [fig 2b].

· Because users never made use of it, the forward arrow button on the bottom tool bar was removed [fig 2b].

· The Jornada’s on-screen keyboard function was added to the bottom tool bar to facilitate content entry [fig 2b].

· The iCurator logo was branded onto each page so that users always know that they are within the application [fig 2b and 2d].

· Instructions were given a distinct typeface so that they would be more visible [fig 2b].

· Instruction wording was clarified (e.g., “Click on the map for more detail” [fig 2b] rather than “choose a point on the BAM map that interests you” [fig 2a]).

· Link labels were made more descriptive (e.g., “articles about this piece” [fig 2d] rather than only “articles” [fig 2c]).

· To adhere to interface convention and provide appropriate system response, an email confirmation was added.

Changes made based upon Heuristic Evaluation

Figure 3a – high fidelity Figure 3b – final prototype Figure 3c – high fidelity Figure 3d – final prototype

Figure 3e – high fidelity Figure 3f – final prototype Figure 3g – high fidelity Figure 3h – final prototype

· The bottom toolbar was reorganized so that the Map and Home buttons are separated. Also, the Back button was moved to the far left side to adhere to Web interface convention [fig 3a and 3b].

· Because users had difficulty locating it on the built-in keyboard when entering email addresses, a “@” was added to the email composition page [fig 3b].

· The email confirmation page was changed to restate and confirm recipient’s email address to reduce errors in sending iCurator email to the wrong email address [fig 3c and 3d].

· The “email this article” text was added to the send-article button, which was moved to the bottom of the screen for clarity [fig 3e and 3f].

· A foreign language option was added, though not implemented, to support a wider range of users, including non-English speakers [fig 3h].

· A font size option was added, though not implemented, for those who are visually impaired [fig 3h].

· Instructions to “click on picture for more detail” were added to inform users of the optional feature of zooming in on points of interest within an artwork

Changes made based upon Pilot Usability Testing

Figure 4a – high fidelity Figure 4b – final prototype Figure 4c – high fidelity Figure 4d – final prototype

Figure 4e – high fidelity Figure 4f – final prototype Figure 4g – high fidelity Figure 4h – final prototype

· Maps and clickable regions were enlarged to ease navigation and input [fig 4a and 4b].

· Because all users had problems opening, using, and closing the onscreen keyboard, help messages were added [fig 4f].

· An introduction screen was added, which allowed users to decide between novice user mode and experience user mode. This feature makes new user support much more obvious and allows experienced users to easily bypass introductory tutorials [fig 3g].

· A series of step-by-step navigational directions, using pictures and text, were added because users appeared to be only using the iCurator’s images to orient themselves within the museum and voiced qualms with the prototype’s directions [fig 4h].

· Links were underlined and enlarged to make them more recognizable and noticeable [fig 4d].

· The “related artwork” link was embedded in the article text because users would often search for related works on that page rather than the artwork page, the original location of the link [fig 4c and 3f].

· Some links (e.g., “Museum Shop” and “Museum Café”) were removed from pages where their presence was inappropriate [fig 4a and 4b]..

· After emailing an article, users were returned to that article rather than directed back to the home page.

· The Back button functionality was implemented to support backward navigation.

Most Valuable Evaluation Technique: Pilot Usability Testing

Pilot usability testing allowed for more realistic interaction with the iCurator, making it our most valuable high fidelity prototype test. For example, users actually clicked on the screen with the Jornada stylus rather than with a pencil as in low fidelity testing or with a mouse as in heuristic evaluation. Users also experienced textual input with the on-screen keyboard rather than by scribbling in words with a pencil as in low fidelity testing or with a full-sized physical keyboard as in heuristic evaluation.

Pilot usability tests were performed at the Berkeley Art Museum, and much of the elicited feedback depended upon proper context. For example, in low fidelity usability testing and heuristic evaluation, the users did not actually have to physically navigate through the museum, which is a large portion of our assigned tasks. Because users did not experience the physical movement through the museum they were not able to judge the effectiveness of the map or direction features, which are crucial to tasks 1 and 2. Context seemed to be what made the biggest difference between the quantity and quality of comments elicited from the pilot usability study as opposed to the other forms of evaluation.

Scenarios

Task 1 (difficulty level: hard)

Find the artwork entitled “Number 6” by Jackson Pollock in the Berkeley Art Museum using the iCurator. After physically locating it, use iCurator to find additional information about the artwork.

Figure 5a Figure 5b Figure 5c Figure 5d

Figure 5e Figure 5f Figure 5g Figure 5h

Figure 5i Figure 5j Figure 5k Figure 5l

· The user is standing at the main entrance of the Berkeley Art Museum. The iCurator is turned on and the first screen appears [fig 5a] on the PDA. For the purposes of user testing the tutorial is not yet being utilized so the user clicks on “I already know how this works.” This brings them to the language and text size selection mode [fig 5b]. The user chooses a language and text size option, such as is “English (normal text),” so that link is followed. This brings them to the home page [fig 5c].

· The user wants to locate the artwork “Number 6” by Pollock so the user clicks on the Search button [fig 5c] to go to the Search page [fig 5d]. By clicking on “title” the user is taken to the Search by Title page [fig 5e] where the instructions read, “Please select the first letter of the artwork title.” The user clicks on “N” for “Number 6” and the artworks beginning with the letter N appear [fig 5f]. The user selects “Number 6” from the menu of artworks and is taken to the page for the artwork [fig 5g].

· At the top of the screen, it shows that the artwork is on the 6^th floor [fig 5g], so the user will click on the Map button on the bottom toolbar to get directions to the artwork. From the Map page [fig 5h] the user reads the instructions to scan the nearest barcode, so the user will walk to the wall and scan the barcode with the iCurator barcode reader. This makes a red dot appear on the map, indicating where the user is currently standing [fig 5i]. The instructions then tell the user to select their desired location from the map, so the user clicks on the sixth floor on the map. This opens the Directions screens [fig 5j and 5k], indicating pictorially as well as textually how to go from the BAM entrance to the 6^th floor.

· The user then physically navigates to the 6^th floor using the iCurator directions. Once on the 6^th floor, the user may hit the back button on the bottom toolbar to go back to the page on the artwork “Number 6”. Using the image on the iCurator screen, the user may identify which piece in the gallery is the correct one. After identifying “Number 6” in the physical gallery, the user approaches the artwork and has completed task 1.

Task 2 (difficulty level: easy)

Find an artwork related to “Number 6” in the Berkeley Art Museum. Physically go to that piece.

Figure 6a Figure 6b Figure 6c Figure 6d

· The user is now standing on the 6^th floor of the Berkeley Art Museum in front of “Number 6”. To look for related artwork to “Number 6” the user wants to read more information about the artwork so they click on “Read about this piece”. This takes the user to the More Info page [fig 6b] which has articles about the artwork along with links to related artwork.

· The related artwork link, “The Prey,” is clicked, which takes the user to the artwork page for “The Prey” [fig 6c]. By looking at the top of the page the user sees that “The Prey” is on floor A of the Berkeley Art Museum.

· Because the user has already been acquainted with the layout of the museum, the user will simply click on the Map button at the bottom tool bar, which will open the Map page [fig 6d]. Using the overview map of the museum, the user will walk down the stairs to floor A to find “The Prey”.

· To locate the artwork on the floor, the user will hit the Back button on the bottom toolbar to view the iCurator image of “The Prey”. By comparing the artworks in sight to the image of “The Prey” on the iCurator, the user will locate the artwork in the physical space.

Task 3 (difficulty level: moderate)

Read more information about “The Prey” and e-mail a relevant article to yourself using iCurator.

Figure 7a Figure 7b Figure 7c Figure 7d

Figure 7e Figure 7f Figure 7g

· The user is now standing on floor A in front of “The Prey” and wants to email information about the artwork. The user will click on the link to articles about the piece, which opens the More Info page for “The Prey” [fig 7b]. After reading the article the user decides to send that information to himself or herself via email. The user will then click on the large email icon on the bottom right corner of the page [fig 7b] to go to the Email page [fig 7c].

· At the email page, a brief animation appears of a red arrow dropping down to indicate to the user how to make use of the on-screen keyboard [fig 7d]. The animation disappears and the user clicks on the keyboard icon on the bottom toolbar to enter the email address into the textboxes [fig 7d]. When the user is done, the keyboard icon is clicked again to close the on-screen keyboard [fig 7e].

· To send the article by email the user then clicks on the Send button, which opens an Email Confirmation page [fig 7f].

· The user double checks to make sure that the correct email address was recorded, sees the email privacy statement, and clicks “send”. This takes the user back to the article that was just emailed.

Final Interface

The Final UI Design

The final UI design supports robust physical navigation, contextual awareness, email and familiar, intuitive information navigation.

Robust physical navigation~~[LT2]~~

iCurator helps the user navigate through the museum while providing information and insight into the museum collection. This leads to a better understanding of the art and a less stressful museum visit. iCurator’s interface is layered much like a museum. The art works are in galleries, which are on certain floors, and the floors make up the museum. As many museums are usually works of art themselves, it lends to a rather unconventional layout and structure compared to that of an office building. In response, iCurator needed to help the patron navigate through such spaces in a simple, clear yet intuitive way. Because a 3D walk-through of a museum is beyond our time constraints as well as the current graphical capabilities of a Pocket PC, we decided that visual cues were best suited to our needs. We took pictures of the entrance to every gallery at BAM and used it in Figures 5j and 5k as the turn-by-turn directions. During our high fidelity prototype testing, one of the techniques commonly used by our testers to confirm that they have arrived at a certain gallery was to match a picture on the iCurator with one around them.

Contextual awareness

Our vision for a complete museum navigation system in the iCurator included a barcode scanner that would be used to determine the users current location by scanning barcodes placed throughout the museum. They would be placed next to art works, elevators, bathrooms, stairs and even benches. This feature is currently Wizard of Oz’ed in our prototype. Akin to an interactive map with the “you are here” marked, it connects the user’s conceptual model of the museum to the actual physical space. The iCurator is contextually aware through use of the barcode scanner. Upon scanning a barcode, it instantly takes the patron to the relevant piece of information they require. If a barcode is scanned at a particular location, then the map with a “you are here” icon will pop up, indicating to the visitor their current location. If a barcode under a piece of artwork is scanned, that work’s page will show up. The user can then chose to read an article about it or possibly view a small video clip about the work.

Email

As temporal beings, the museum is not able to escape time. Certainly, many of the larger museums are at least whole day affairs. Even with the best photographic memory, one could not possibly remember all the pieces that peaked one’s interest. Once home, the name of a piece or the name of an artist would often be forgotten. The iCurator is able to bridge that disconnect between the museum and the user’s own life. All of the articles and images provided on the iCurator can be emailed to the patron’s own email address. Underneath every article’s text window is a conspicuously large email icon. Because of the Pocket PC’s limited screen real estate, it is difficult to read through an entire critique. The email function allows the reader to digest an article at their own pace and in the comfort of their own home. Through user testing, we discovered that because of the size and enigmatic design of the Windows CE keyboard icon on the lower right side, many users were not able to find the keyboard to enter their email addresses. We now have an added animated arrow to cue the user to the button ~~which~~ that brings up the keyboard. Another distressing issue we confronted during user testing was that Microsoft placed the “@” sign, so vital to email addresses, under a different keyboard that can only be brought up using the “shift” key. Because most of our users had difficulty finding it, in the current version, the original email text input box has been replaced by two such boxes separated by a “@” sign. This eliminated the user’s need to find the “@”, as it is already there. After sending and the confirmation, the user will be returned to the article from which they came.

Familiar, intuitive information navigation

The user interface design was initially based on Internet Explorer’s method of non-linear interactive navigation. We wanted to mimic a widely used web browser interface so that users would feel more comfortable using it. iCurator therefore shares common browsing functionality with IE. The back button is functionally the same as the one found on IE or Netscape. The home button takes users back to the start screen as a point of departure for all information regarding the museum. The various underlined links throughout the iCurator enable the users to jump to other relevant parts of the system. The top of the iCurator employs a category type of hierarchical organization program commonly used on the Internet. The Home location can branch to Floors that can branch into Galleries that include art works. Each of these are separated by a colon at each level of the click-able hierarchy. This enables quick navigation if the viewer decides to see all the pieces in a gallery or all the galleries of a floor. Navigation through the iCurator system is also supported by the most salient navigational functions in a permanent toolbar at the bottom of the screen. Also, links to pages higher up in the organizational hierarchy of the iCurator are available at the top of each screen just below the page title. The partially implemented search function duplicates the same type of functionality found on a web search engine. But so far, we have limited the iCurator to a click-able index of letters, sorted alphabetically, that the user can go through. The barcode system part of the user interface is an even simpler way to do the above as one would not need to go through many screen to find the relevant information. With the barcode system, maps and directions will be context sensitive, like that of a GPS system but without the extra bulk and cost ~~(?? Is this true? Bar code was pretty costly).~~. The email pages were designed to be as simple as possible.

Because of the difficulty of entering text on a tiny pop-up keyboard, the system remembers the email address so that the user does not have to enter it repeatedly to send multiple articles during the same museum visit. Perhaps in the future a kiosk companion to the iCurator can incorporate a keyboard for comments as well as bulletin board access. Because of the difficulties of entering text, the iCurator offers mostly lists of choices such as the artworks in a gallery or the list of titles on the “Search by Title” page. Thus the user can click and recognize their desired choice from a list rather than having to recall options.

What Was Left Unimplemented

Certain functionality was left out of the current iCurator prototypes due to many limitations of the development platforms and unforeseeable circumstances. The scroll bar, while easy to implement in Java or Visual Basic, is quite an undertaking in Flash, so it was decided that project time could be better spent elsewhere. Content is incomplete. The original plan was to include not only text articles, but also audio and video clips, but the later two were not implemented due to the complications of running video and audio files from within the browser. Also, there were copyright issues so that only pieces from the 6^th floor and floor A could be photographed. There are no robust database back ends for the Pocket PC (which could be used for text and picture retrieval), so we would have had to build one from the ground up. Also, due to the absence of any Bluetooth-enabled PDAs and their prohibitive high cost, the iCurator is not actually connected to the Internet while in the hands of the user. Email can be sent when the user returns the iCurator and it syncs with a central system that then sends the emails, but this also has not yet been implemented.

Barcode scanning is Wizard of Oz’ed: we cannot afford the $500 scanners and the $200 SDK required to implement it.

Tools Used

[LT3]

· 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[LT4] 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 on the Flash 4 version for the PDA. 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) for the PDA. , However, we~~but~~ have developed a Flash 5 version in anticipation of the release of Flash 5 ~~capabilities~~ functionality foron PIE ~~in the near future~~.

· The Internet was used ~~for~~ to learn~~ing~~ more about development on~~for~~ the HP Jornada and to find out what can and cannot be done with Pocket PCs. It was also 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. Also, information about the Berkeley Art Museum was taken from the museum’s website.

· A Digital Camera was used to create images of for navigation through the Berkeley Art Museum as well as images of the artworks throughout the museum that where necessary for completion of the tasks. It was useful for recording step-by-step navigation through the museum, because it allowed for different points of view along the user’s route. It was also useful for recording artworks at a reasonable level of detail. This ~~to support~~assisted navigation through the gallery and enabled users to easily locate the desired artwork ~~in the gallery~~.

· Adobe Illustrator and Photoshop were used ~~for~~ to improve the clarity~~ing~~ ~~aesthetics~~ of images and shrink them to fit ~~into~~ the iCurator’s small display ~~window~~. Images collected with the digital camera were cropped with Photoshop to emphasize~~display~~ ~~and focus~~ on ~~relevant~~ important portions of the images ~~collected with the digital camera~~ ~~for~~ before insertion into the iCurator interface. We used Adobe Illustrator to create vector graphics.