InteractivePrototype-Group:GeoPhoto
From CS160 User Interfaces Fa06
Contents |
Geophoto: Interactive Prototype
Team Roles
- Andrew Hao: Coding
- David Wallace: Writing report, graphics, presentation
- Yang Wang: Writing report, writing presentation, doing presentation
- Jack Yeh: Coding
Problem and Solution Overview
Problem
Our user interviews indicate that Flickr's geocoding interface is hard for users to figure out. It is also time-consuming to place a day's worth of photos on a map, and the user may not remember exactly where each photo was taken.
Solution
The user prints out a map of their area on Anoto paper. As they take photos in the field, they circle their location on the map, along with other optional metadata about the photo (tags, privacy options). When they get home, most of the steps are automated by our application -- it downloads their photos from the camera, uploads them to Flickr, tags them, and sets their location.
Tasks
(1/2 page; 3 representative tasks to test your interface (easy, medium, hard))
Printing a Map (medium)
The user's goal is to print a map of their location. This requires them to visit Google Maps and cut'n'paste the URL into our application, which is a complex task for some people since it requires switching to a browser and coming back.
Uploading Photos to Flickr (easy)
Although this is the longest task, it's a fairly linear process so it shouldn't be difficult for most people. It consists of the following sub-steps:
- Flickr authentication
- Downloading pen data
- Selecting image files
- Viewing map preview
- Uploading
Changing your Flickr Login (hard)
If a different user wants to use our program, they'll have to switch to their own Flickr login. We've provided a button that will launch the authentication process again. Once on Flickr, the user will have to log out of the previous user's account, log in as themselves, and then complete the authentication process before returning to our app.
Revised Interface Design
Changes as a result of low-Fi testing
Printing Task
For the printing tasks, we have made three changes to our interface.
First, the unusual workflow of cutting & pasting an URL into our application was confusing our users, so we've added an extra instructions page to the printing task. This gives them a clickable link to Google Maps and detailed instructions on how to get the needed URL. Since experienced users will know how to do this, we added a "do not show again" checkbox on this instruction page.
Second, we added some help links on the second page of the printing task. By clicking "What is this?" the user will get a pop-up help balloon describing the meaning of the various interface elements.
Lastly, we changed the text from "Tags" to "Tags you will use". Users were confused because they hadn't taken any photos yet and they expected these tags to apply to photos that already exist. This new wording helps them understand that these tags are for photos they will take in the future.
Photo Taking Tasks
Although all the users had difficulty using the map that we printed out. But they mainly due to the fact that our instructions are not clear. One of our users forgot to pinpoint the location of the picture on the map, one of our users didn't know the difference between GeoTag and regular tags. These problems can all solved by making and printing our instructions on the map (fig. 3). We has increased the size our or instruction from the size of the header to a very significant size that user simply cannot ignore. This should be able to prevent user from making the mistakes in the first time. And if the users developed a habit of taking pictures -> circle location -> tag it, then it is even less likely that the user will make that mistakes.
Fig. 3 Instructions on the map.
Uploading Tasks
For our lo-fi model, one computer-savvy user pointed out that although we have a screen asking users to put the pen in the cradle, it should automatically proceed to the next screen once the pen is in the cradle. After much consideration, we decided to keep our original design and ask users to press "Next" button after putting the pen in the cradle. Although computer-savvy users may think this step is tedious, for novice users, switching to the next screen may confuse them and throw them into a loop. We believe it is more important that users feel our interface is friendly and easy to use.
However, one of the users believed that she should continue to operate on Flickr after being taken there for authentication, instead of returing to our app. This is an error on our part. We put extra instructions on our authentication page (fig. 4) to remind user that they should close the web browser once the authentication is complete.
Lastly, we've added "Cancel" and "Back" buttons throughout our interface to allow users to back up or switch to a different task.
Fig. 4 Instructions on the authentication prompt.
Others
There are a couple other changes that we have made to improve the overall experience of the user. These problems are not discovered by the previous users, but they are there to make our program more complete
1. We added a main menu for the GeoPhoto program (fig. 5). The main menu allows the users to choose from two actions: print a map (action to take before taking and tagging picture) and upload pictures (action to take after taking and tagging picture). This interface provide user with a better idea of what to do and the basic functionality of the software.
2. We have implemented error handlers to handle situations that may produce an error. Example: if user trys to load pen data by clicking "Next" without putting the pen in the cradle. There will be a error popup.
3. We have redesigned our preview interface (fig. 6). There was nothing wrong with our original design, but since there is also nothing special about the design, we decided to copy the preview interface of other software. We design the interface to very closely resemble the photo preview in Windows XP, and users are expected to be much more comfortable with the interface.
Fig. 5 The Main Menu
Fig 6 The Photo Preview Map Interview
Storyboards of Tasks
1. Printing a Map
First, the user chooses the Print task from the main screen.
The user is presented with instructions on how to get a Google Map URL. If the user already knows this, s/he can check the box to skip this screen in the future.
Now, the user pastes in their Google Map URL. They enter any tags they expect to use in their photo-taking session. Finally, they can print their map directly or save it to a PDF to print later.
The paper map interface.
2. Uploading Photos
From the main screen, the user chooses Upload.
If the're not already authenticated with Flickr, this screen asks them to do so. Otherwise, it provides an opportunity to change logins.
A Flickr page pops up, allowing them to authorize our application. When they're done they return to our application and click "Continue".
The user is asked to place their pen in the dock.
The user chooses the photos s/he wants to upload, using a standard Windows file chooser.
Now the user is presented with a preview of the data we will be uploading. On the left side is a preview of each photo, and on the right side is a map with markers for the location of each photo. As the user steps through each picture on the left, the appropriate marker is highlighted on the map.
If the user wants to skip the upload of certain photos, s/he can use the checkbox on each thumbnail to toggle its upload status.
If the user is satisfied with the geotagging data, s/he clicks Upload.
When the process is complete, a Flickr page is popped up showing the user their photos on a map.
3. Changing Flickr Authentication
[Hello Joe]
Let's say the user wants to change to a different Flickr account after already authenticating with one. The first screen of the Upload task allows them to do this by clicking the "Change login" button.
This will launch a Flickr page prompting them to log in, then asking them to authenticate with our application.
Afterwards, the user continues on the Upload task as described above.
Prototype Overview
Overview of the UI implemented
Our interface consists of two main paths: printing a map and uploading photos to Flickr. Both have a linear workflow. There is a short additional workflow path branching from the Upload task which allows the user to change Flickr logins. Not shown in this diagram are the Cancel buttons that take you back to the main menu, and the Back buttons that allow you to back up one step in your current task.
Changes from the Low-Fi Prototype
The low-fi prototype was great, simple to use, and fast to implement. But actually building a high-fi prototype addresses a lot of the problems that we were not able to discover with our low-fi project.
One, with a high-fi prototype, we are able to realize the limitation of the technology and our ability to implement an interface of our desire. We learned to scale down our interface a little bit more, trading off reliability with flashiness.
Another limitation with Low-Fi prototype is that it is harder for a programmer to get into the mind of the user using a paper prototype, for it remains a design for the programmer. But a high-fi prototype allow us to see from the perspective of a user, and understand some of the reason that users might take (although those actions seems really foolish under a paper prototype). It forces us to address the issues such as error handling and ask ourselves questions such as where the program go to if the user press on quit or cancel.
What was left out and why / Wizard of Oz techniques used
Because we've focused on the functionality of the user interface, nitty-gritty behind-the-scenes functionality has been replaced with dummy versions. This includes:
- Downloading map tiles from Google maps and assembling into a PDF file for printing, with tags. (Instead, we give the user a pre-prepared map of the Berkeley campus.)
- Using Flickr's API to authenticate. (We simply pretend to do it.)
- Downloading pen data. (We present a dummy progress bar.)
- Correlating the pen data with the user's photos by timestamp. (We don't have pen data yet.)
- Showing the user a preview of his/her photos on a map. (We use a mockup with pre-selected photos already in place.)
As we complete the application logic, we will replace each of these Wizard of Oz cheats with the actual functionality.
Prototype screenshots or scripts
The main menu the user is presented with.
This first screen (reached by clicking 'Get Map' from the Main Menu) instructs the user how to acquire a map on Google.
The main map tagging interface. Clicking "print" calls up the system print dialogue. Clicking "Save" brings up the system file save dialogue.
The paper UI
This first screen (reached by clicking 'Synch Pen' from the Main Menu) ensures the user is authenticated with Flickr.
The software pops up a browser to guide the user through Flickr's API authentication process.
Once the user finishes browser authentication, the user returns to the application which will authenticate its token with Flickr.
The user begins the pen data download.
A progress bar indicates status.
Next, the user is instructed to select image files to upload.
The files are imported and paired with pen XML data onto the preview pane. Files can be selected or deselected for upload via checkboxes, and clicking on each image brings it up in the large preview pane (its corresponding location, as indicated by the green arrow, is also displayed).
A progress bar indicates upload status.
The process has finished and the user is taken to his or her Flickr site (optionally returning the user to the Main Menu)
Presentation
Image:GeoPhotoHiFiPresentation.zip
