Assignment 7: Second Interactive Prototype

I213 User Interface Design and Development
Prof. Marti Hearst

Nate Agrin
Jessica Kline
Andrew McDiarmid
Ken-ichi Ueda

Contents

1. Introduction
2. Response to severe violations
3. Other prototype improvements
   1. Changes Made
   2. Changes Not Made
4. Prototype instructions
   1. Known Bugs
5. Work Contribution

Introduction

After we completed our first interactive prototype, we met with the Play it By Ear development group to exchange heuristic evaluations. This exchange worked out very well because the Play it By Ear group not only provided helpful feedback, but also represented our target users through their interest and enjoyment of using map interfaces. The exchanged heuristic evaluation found four usability violations with severity ratings of three or higher. As a result, our second interactive prototype addresses both these severe violations as well as other minor usability problems observed in the heuristic evaluation. In addition, the second interactive prototype improves the interface aesthetics and resolves several implementation bugs.

Response to severe violations

The Play it by Ear development group found four (two were similar and are grouped here as number 2) usability violations with severity ratings of three or higher. Each violation and its respective response is listed below.

1. "[H1 Visibility of system status] (Severity 3; Found by 3; 4 agree) The indication that you need to click on the map to add a marker to the map is not prominently displayed. People may not see it in the observation list."

We agree with the evaluators that the instructions explaining how add an observation are not prominently displayed. Therefore, we have moved these instructions from the observation summary box (highlighted in Figure 1) to the map toolbar (highlighted in Figure 2).

^{Figure 1 - Instructions to add an observation for the First Interactive Prototype}

^{Figure 2 - Instructions to add an observation for the Second Interactive Prototype}

2. (a) "[H8 Recognition than Recall] (Severity 3; Found by 2; 4 agree) In the map callout, there is no label for the "time of the observation" or for the name of the species. Because of this it is not obvious that the "Add species name" field was a text field or a title."

2. (b) "[H11 Simple and natural dialog] (Severity 3; Found by 2; 4 agree) "Add a Photo" and "Delete" are very close to one another in the map callout, this close grouping could cause confusion among users who might hit the "Delete" button thinking they will only delete the photo added. Instead the entire entry of the observation will be removed."

As of the first interactive protoytpe, the styling of the map callout was minimal. Informed by the Play it by Ear's evaluation, we made the following changes (see Figure 3):

• Changed the photo upload link to a thumbnail placeholder and placed it in the upper left corner, similar to initial sketches
• Added labels to the species and time input fields
• Adjusted the placement of the control buttons

^{Figure 3 - Redesigned map callout}

3. "[H11 Simple and Natural Dialog] (Severity 4; Found by 4; 4 agree) It is unclear that several markers comprise one outing. We think that this may be because an outing is not clearly defined. Several issues came up because of this. The "Complete Outing" button didn't make sense since outing is not really defined anywhere. If this is common terminology in the naturalist community this may be moot. User might expect that as soon as they make a change it will be saved (Web 2.0 expectation). It is not clear whether the calendar reflects the date of the outing or the date of the observation. Though it does say "Date of the Outing" on top we were still very confused."

There are two different issues addressed in this violation. The first issue is the use of the “Complete Outing” button. We agree with the evaluators in that our users expect changes and updates to be saved both instantaneously and automatically, without the use of a complete or save button. Therefore, we have removed this button from our interface and implemented the functionality to save changes and updates instantaneously. The second issue is the use of the “outing” and “observation” terminology. We have struggled with the “outing” terminology since the inception of our project. While it is frequently used by avid naturalists, it is less common for casual naturalists. And because our interface has shifted focus to casual naturalist, we agree with the evaluators that the “outing” terminology has the potential to confuse our users. At first, we considered including instructions that explained this vocabulary. But after months of adjusting and discussing this vocabulary, we decided to remove the “outing” terminology all together. Therefore, instead of focusing on adding observations to an outing, users can add any observation to the interface, which can include both related and unrelated observations.

Other prototype improvements

We made several other changes based on Play it by Ear's heuristic evaluation and discussion within our own group.

Changes Made

• "Delete" Should Give Warning - the "Delete" link on the observation callout simply deleted the observation in the first prototype. Now it asks the user to confirm the deletion.
• Layout Changes - we shrunk the header, footer, and margins to give more room for the map. It is the focal point of this interface, so we thought it deserved more screen real estate. We also expanded the size of the observation list on the right just a little, as per the recommendation in our HE, to accommodate a little more information, like the photo thumbnails.
• Consistency Issues - we made the font face consistent across the interface, and added labels to all form fields in the observation callout, as per the recommendations from our HE.
• More Explicit Label for Map Search - Play it by Ear was confused by the language labeling our map search widget. We made the language more explicit to indicate that it only searches for locations, not observations.
• Grey Tips in Form Fields - form tips were black in the first prototype. Now they are gray, in accordance with de facto web standards.
• Done/Edit Confusing - in the first prototype, we had a "Done" button to complete a new observation, and an "Edit" button to complete the editing of an existing observation. Now they are both "Done," as per the HE recommendation.
• "X" to Close the Callout Obstructs the Species Field - this no longer occurs.
• Bottom Box Color Matches Parks in Google Maps - we changed this to gray to make this interface component visually distinct from map features.
• Double clicking the map creates markers that cannot be deleted - this is a bug the Play It By Ear group recognized and we were able to fix for this iteration.

Changes Not Made

• Move Map Search to the Top of the Map - this was recommended in our HE, but since this is a secondary or tertiary function of the interface, we chose to leave it on the bottom to give more focus to the map itself.
• Map Recenter on Callout Close - Play it by Ear found it slightly annoying that the map does not recenter on a marker after its callout has been closed. We agree that this is a minor inconvenience, but it is the standard way Google Maps behaves, and since it is so minor, we chose not to act upon this for this iteration.

Prototype instructions

• The interactive prototype is located at the following address: http://dev.inaturalist.org/observations/new. If the link does not work please contact Ken-ichi (kueda@ischool.berkeley.edu, feel free to phone too. His number's on the wiki). Test to see if the site is up and contact him if it's not about a day in advance.

• The interactive prototype scenarios are located in the Assignment 5 write-up.

Known Bugs

• Photo upload is not working - we are still resolving some backend issues on our server environment. If you'd like to see the fully funcitonal photo upload, see Nate or Ken-ichi
  • Update - this problem has been resolved. Photo upload should be fully functional. -- Ken-ichi 3:50 PM Thursday April 19 2007
• Clicking outside of a callout deletes it, even with new data - this is bug that arose during our second prototype revisions. We will address it before testing.

Work Contribution

Task	Andrew	Jess	Ken-ichi	Nate
Design decisions and planning	25%	25%	25%	25%
Markup code	50%	50%	0%	0%
Interaction code	0%	0%	50%	50%
Application code	0%	0%	50%	50%
Write-up	20%	30%	30%	20%