Assignment 3: Project Scenarios, Comparative Analysis, and Preliminary Design

I213 User Interface Design and Development
Prof. Marti Hearst

Nate Agrin
Jessica Kline
Andrew McDiarmid
Ken-ichi Ueda

Contents

1. Scenarios
   1. Ted Gets New Scope
   2. Ted Browses and Answers Questions
   3. Adam Goes to Idaho
   4. A Typical Weekend for Jenny
2. Task Analysis
3. Comparative Analysis
   1. Flickr
   2. Avisys
   3. Notebook
   4. WikiMapia
   5. Facebook
   6. Nature blog
   7. Listserv
4. Initial Design Ideas
   1. Welcome Page
   2. Add Observation Page
   3. Individual Observation View Page
   4. Map-Based Search Page
   5. Task Flow Descriptions
5. Work Contribtion

Scenarios

Ted Gets New Scope

Ted gets a new scope and just has to go birding. He gets up at 5 AM, puts on his lucky duck-pattern boxers, carefully packs his digital SLR, his camera mount for the scope, his general field guide to western birds and his Northern California waterfowl guides for those tricky cases, and his trusty notebook. He jumps in his car and heads for his favorite marsh, where he knows there are plenty of shorebirds and ducks that are perfect for scoping (plus a few raptors). At his first spot on a hill overlooking an inlet, he sees a few old friends: a few Ruddy Ducks, some Buffleheads, a grebe or two, and dear lord, what is that?! Ted spots a bird he wasn't expecting at all: a Harlequin Duck! Spectacular! He's seen them on a few trips to the San Juan Islands near Seattle, but never in the Bay Area! Immediately, Ted dives into his bag and grabs the camera and the mount. He fumbles a bit, but finally gets the camera attached and, thank God, the duck is still there. He snaps a ton of pictures, many in just the right light. After he has calmed down a bit, he gets out his notebook and writes down the time and the location, making sure to use many exclamation points. The rest of the trip is fairly status quo, but bathed in the golden aura of that one, key sighting.

When he gets home, his wife is up but bleary-eyed, and has a pot of coffee on. Ted glows with excitement, describing the Harlequin rapidly, as his wife smiles and nods. He grabs a cup of coffee and his ThinkPad and sits down at the kitchen table. He logs onto iNaturalist and creates a new outing. First he adds information about the Harlequin (photos, time, location, species, special characteristics) and imports other information such as weather patterns and temperature. After he's completed his entry about this very special duck he adds some information about the rest of the day's sightings. He also checks the recent entries of other avid birders in the area. He realizes he's the first to post the Harlequin! He announces this great discovery to his local Audubon group on iNaturalist. Go Ted!

Ted Browses and Answers Questions

Ted has been thinking about the Harlequin Duck he sighted all day: while shopping for groceries, while doing a little work from home, even at the gym. Spared the dishes for having cooked dinner for once, Ted sits down with his laptop again and logs back into iNaturalist to see if there has been any discussion over his sighting. He is happy to find that there has been ample chatter in his local Audubon group over the bird, with many people complimenting him on his fine photographs, and others reporting sightings of the same bird later in the day. Nick, one of his frequent birding buddies and fellow Audubon trip leader, was one of the participants in the discussion, and had actually taken some photos of the duck himself. Ted goes to Nick's home page on iNaturalist to check them out, and leaves Nick some complimentary comments. Nick also saw some Clapper Rails that morning, and Ted registers a fleeting tinge of frustration at having missed them. Seeing Nick's observations reminds Ted to check and see what his other friends have seen on iNaturalist. Angela was in a different park, and in addition to the normal array of wintering ducks and waders, she spotted a few migratory warblers. That's a bit early, thinks Ted, and checks when those species were first sighted passing through this area last year.

Ted also checks the Bay Area bird identification group. He tries to help identify a sandpiper someone photographed. He thinks it's probably a Western Sandpiper, but they look very similar to Least Sandpipers, so he asks for a few more details on coloration, or some extra photos. He also helps ID some easy ones, like an American Coot and a White-tailed Kite.

Adam Goes to Idaho

Adam is leading a trip to Hell's Canyon in Idaho in a few weeks, and wants to brush up to impress the travelers with his knowledge of local flora and fauna. He remembers that his friend Shauna spent a weekend in the same park last year, and he knows he can rely on her reconnaissance. After his morning run, he puts on his favorite Phish record, logs into iNaturalist, and browses through his friends list to find Shauna's profile. He searches her entries for Hell's Canyon National Recreation Area, and finds the trip he remembers. Shauna's not the best at describing exactly what she sees, but Adam is able to see enough pictures, species names, and the occasional fun fact to get him started. He makes a few notes for things to look up in his field guides.

From the page for Shauna's trip, Adam clicks a link to more entries for this location and hits the jackpot -- dozens and dozens of entries. He reads up on interesting local vegetation and wildlife, noting by repeat appearances what he's likely to encounter. He also jots down notes on a few bizzare and beautiful things to look out for. Excited about his initial research, Adam alternately leafs through a few field guides and Googles some of the things he's seen to learn a bit more.

A Typical Weekend for Jenny

It has been a typical weekend for Jenny. On Saturday she attended an early morning pilates class and the farmers' market, spent the afternoon with a cappuccino and a good book, and in the evening grabbed tapas and drinks with a friend.

On Sunday Jenny wakes up before sunrise to get ready for her weekly hike with her mycological society friends. She packs her backpack with a nice snack (a peppered turkey sandwich on a baguette with roasted peppers, arugula, and an aioli sauce), a notebook, a field guide, a camera, and a brown paper bag (in case they find edibles). Jenny and her friends go to one of their usual spots in Marin County. The group acknowledges the recent rain as they spotted many mushroom varieties, including porcinis! Other notable findings include chanterelles as well as brightly colored Amanitas and waxy caps. Jenny takes a few photos and notes of each discovery, including the species name, a description of the landscape, and the surrounding flora. The group also spots an unknown Amanita. After refering to their respective field guides, Jenny and her friends are unable to determine the exact species and decide to identify it at home.

Later that evening (after a relaxing afternoon of NPR and mushroom risotto) Jenny logs onto iNaturalist. She creates a new trip, transfers her earlier notes, and adds a few photos. She also specifies the friends that will be allowed to access her trip information. Jenny then searches for Amanitas and is still unable to identify the unknown mushroom. A little perplexed, she adds the observation to the Bay Area mushroom identification group and hopes for a speedy ID.

Task Analysis

After a review of our current tasks we have decided to remove the friends management component of our project. For tasks which involve browsing thorugh friend lists, we will assume a direct link to the friend's page being sought (e.g. Adam finding Shauna's page in the scenario above). We also have decided to designate the tasks of searching, recording, and browsing as primary tasks and designate the tasks of asking questions, answering questions, and correlating other data from other sites (such as weather) as secondary tasks.

Comparative Analysis

Flickr

Summary

Flickr is a web site that lets you manage and share your digital photos. Flickr's most relevant similarity to iNaturalist is that it is a place where people submit observations from the physical world to the Internet, where those observations often inspire analysis and social interaction. Flickr currently fulfills many of the functions we envision for iNaturalist. Many users post photos of things in nature, organize them using Flickr's tagging system (e.g. tagging a photo of a salamander with the common name and species name), note where they took the photo by plotting it on a map, and submit the photo to groups specifically created for natural history topics (e.g. Wild Herps, San Francisco Bay Area Birders, fungi) or groups for identification (e.g. ID Please)

• Tasks: photo sharing; tagging; map annotation; friend management
• Screenshots
  • Main
  • Map View
  • Add to Map
  • Add to Previous Location
  • Zoom Accuracy
  • Geoprivacy
  • Privacy
  • Control ambiguity

Pros

• add new images to old locations
• callout a good locator (example)
  • doesn't obscure the thing you're locating
  • very obvious where you're pointing
• spatial lumping = pts that are close together get lumped and their numbers added
• map interface warns you about adding images when zoomed way out (example)
  • decreased accuracy
• stream browsing
  • temporal organization is fairly obvious
• many privacy controls
• family/friends/contacts distinctions useful for privacy controls (example)
  • but determining meaning of "friend" vs. "contact" is left to the user, potential cause of social friction

Cons

• violations of web interface expectations
  • editable text that isn't in form inputs
  • drag and drop isn't always intuitive
    • when you click on an image in the Organizer, it just selects it instead of providing options for adding a location
    • changing the default picture for a set requires a drag & drop, but the only indication of this is in a FAQ
• confusion between first- and third-person interfaces (example)
  • top navigation bar for me and tools for me to use
  • sub-navigation bar is exploring someone else's data
• doesn't actively promote sociality (example)
  • initial screen is half news about the system
  • only eight pictures from other people: four from friends, four from everyone
  • should prioritize group membership, friends' photos, other people you might be interested in
  • finding others requires active search
  • adding a contact is buried in the profile
• map exploration (example)
  • you can select " -- SELECT A CONTACT -- "
  • the fact that there are filters on what you're looking at is hidden, but exploring similar stuff in an area is so important
  • doesn't keep focused in window when zooming
  • paged map results when lots of images
    • how are the pages ordered? what are these "pages" you speak of?
• privacy controls not emphasized on individual photo view

Avisys

Summary

Avisys is a database of birds, dates, and times that we became aware of in on of our interviews. It is a static piece of software, intended to help birders record and store their own findings, but not networked in any way for sharing. We do not have access to the product, and are just inferring from screenshots. Acoording to the [website], the interface "is a snap to use." We disagree.

• Task: data logging
• Screenshots
  • Date Selection Interface
  • Main Screen Interface
  • Report Interface
  • Place Selection Interface

Pros

• incorporates location into observation logging and species listing
• uses both common and latin names
• shortcuts for power users, hidden from beginners (assuming most users are using a mouse)
• has a LOT of data / application features

Cons

• (Main Screen)
  • modal, but not clear which mode you are in, except through the title bar
  • What are apostrophes?
    • double quotes are for birds in an area you are looking at
    • single quotes are birds seen anywhere
  • unclear as to where the bird listings are coming from. Are they things you've seen? Are they birds common in a specific area?
  • UI is supposed to be a 'snaking display' like a newspaper column, but appears as a table.
  • Switching modes between Latin and common name is related to non-obvious keystrokes. Key "L" OR F12 switches the bird names which could cause confusion or total lack of focus.
  • data entry process: Double-click birds name, choose a date, choose a place, add a note. Once you've done that you can use a "Fix" button to hold the same data for other entries so that you do not have to repeat similar data entry.
  • weird data codes that are not necessary to use, but are not obvious -- new vocabulary to learn
  • button descriptions are not descriptive
    • two sets of up and down arrows, one of each larger than the other, but there is no indication as to what that implies
• vast amounts of textual explanations, possibly implying that the interface is extremely unclear
• Report Criteria -- similar to a search? (example)
  • unclear vocab use in buttons
  • unclear interaction methods -- do I click on the buttons or on the text fields?

Notebook

• Task: data logging
• Screenshot

Pros

• extremely low barrier to entry
• portable
• immediately available
• flexible -- writing, drawing, not limited to predefined metadata
• intimate, personal

Cons

• static
• solitary
• no photos without printing and paste
• can be lost, depreciate
• doesn't know anything already

WikiMapia

Summary

WikiMapia allows anyone to tag any rectangular area on a Google Map. This has remarkable similarity to our envisioned interface for linking observations to maps.

• Tasks: adding things to a map; browsing a map; sharing and commenting
• Screenshots
  • General
  • Tagging
  • Inappropriate content
  • Drawing on Map
  • Categories

Pros

• familiar Google Maps interface
• allows for free-text naming, tagging (example)
• can upload or provide links to photos
• bottom note explains what places are being shown (100 biggest, e.g.)
• click for more info
• anyone can comment

Cons

• can only select/display rectangle shape (example)
• can add irrelevant/inappropriate data--can edit pages, but can't flag for deletion (example)
• unclear modes (Auto, Map, Satellite, Hybrid)
• awkward menu is sometimes hard to see
• strange categories (example)

Facebook

Summary

Facebook is a social networking site originally launched for college students and subsequently opened up to the general public. Users create profiles, exchange messages, and share photos/news with the people in their network. The friends management and privacy controls are expecially relevant to the iNaturalist project.

• Tasks: sharing; maintaining privacy
• Screenshots
  • Privacy
  • Minifeed
  • Friends
  • Photo Tagging

Pros

• commenting on photos pretty easy (not that remarkable, though)
• privacy emphasized (Privacy example)
  • on par with "My Photos," "My Friends"
  • many things you can control (but meaning of controls fuzzy, see below)
• blocking individuals to certain sets of your data
• friends are emphasized (Friends example)
  • with photos
  • photos are not iconic (social norm of facebook?)
  • makes it easy to browse a social network
• tagging exclusively social: you only tag people (example)
  • tags in facebook are like "notes" in flickr
• mini-feed: what's happening in relation to your friends (sharing and browsing at same time -- Minifeed example)
  • makes it obvious how others percieve your data
  • also includes specific actions
    • "caty changed her profile pictures"
    • "caty was tagged in an album"
    • unlike flickr, which basically only notifies you about a single action ("nate added a photo")

Cons

• photo annotation: can't change size of note rect, can't tag a whole image
• privacy controls comprehensive BUT ambiguous
  • sliders control your privacy in several dimensions on scales of 0 to 5, but meaning of the metric is not specified (what does a privacy of "2" mean?)
    • only we were able to figure it out was to use the same interface for search

Nature blog

Summary

Just as with any other topic, there are blogs devoted to naturalism and sharing stories and findings. The format is most similar to a free-form notebook, but similar in that it can be made publically accessible.

• Tasks: sharing, data logging
• Screenshot

Pros

• combine photos, stories, and other data
  • easy to add "data," just writing free text
• personal
• syndication feeds (RSS)
• interesting to read (anecdotes are fun!)
  • narrative orientation over data-centered
    • reading a story is more fun than looking at a list
• pull medium

Cons

• difficult to aggregate
  • syndication requires 3rd party app and prior knowledge of syndication tech
  • non-standardized
• not specific
• high activation energy (average naturalists might lack incentive to create their own site)
• not necessarily on topic
  • might not just be a nature blog, could veer into dating experiences

Listserv

Summary

From our interviews and experience, we know that avid naturalists are often signed up for e-mail listservs to share findings, post announcements, and ask for help identifying.

• Tasks: sharing, data logging

Pros

• low barrier to entry
• popular (large user base)
• searcheable (through your own email client or an online archive)
• communal by nature
  • it's always a community
  • but can be contentious (maybe that's a good thing)

Cons

• people receive unwanted information (push)
• impersonal
• often only in text format (hard to share multimedia)
• not always aware who's receiving your info
• content can be very diverse, which can make it difficult to search

Initial Design Ideas

In developing out initial design ideas, each of us individually sketched potential interfaces on paper, and then met to discuss the pros and cons of our sketches. From these we synthesized cleaner sketches incorporating our initial ideas and those form our discussion. We created interaction flow diagrams for each of the main interfaces, encompassing most of the interactions we plan to implement in this project, and narratively re-stated our scenarios in terms of the interfaces we developed. These are all still preliminary designs, and there remain several points of contention among us, but we believe they are a good start.

Welcome Page

Sketches

Interaction Flow

Add Observation Page

Sketches

Alternate Designs

• Alternate 1: Free text species selection.
• Alternate 2: Hybrid free text / structured species selection.

Interaction Flow

Individual Observation View Page

Sketches

Interaction Flow

Map-Based Search Page

Sketches

Alternative Designs

• Alternate 1: We came up with several search interfaces but finally decided the map-based one above was the best.

Interaction Flow

Task Flow Descriptions

The following task flows describe the various paths through the interfaces that each persona takes when using iNaturalist. The task flows correspond with the scenarios listed at the beginning of the assignment.

Ted's Task Flow

Ted logs onto iNaturalist. He sees a welcome page that displays the location and the other data from his most recent entries. Ted clicks on the "create new outing" button and is directed to the data recording page. He first completes information pertaining to the harlequin duck and later adds information about the other day's sightings. He completes the "when" component by selecting the date and time period of his general outing. He then completes the "what" component: adds the name of the species, chooses a dozen favorite photos, changes the time period to 8:37 am, and clicks on "more options" to add additional data (temperature, tide, descriptive information about the surroundings, and a story about the last time he saw the harlequin in the Northwest.) He then completes the "where" component by dragging the hand-print to the regional preserve of his sighting. After completing all three components he clicks on the "add your data" button and is directed to his homepage. He sees the tab of his latest entry, clicks on its link, and reviews the specific observation page to be sure its absolutely perfect. He then returns to his homepage so he can add additional information from the day's outing. He repeats the above process for the "when" and "where components. With the "what" component he keeps the original time selection, adds each species name, adds a few photos, and does not click on "more options". When all components are complete he clicks on "add your data". Once he's directed back to his homepage he logs out of iNaturalist.

Later in the day, Ted logs back into iNaturalist. He uses the search bar to locate the pages of some of the other hot birders in the area. He searches for "Dave Chavez" using the search bar on his homepage. The search results gives him two listings: one of a Dave located in Jackson Hole, Wyoming and the other of a Dave located in Fremont, California. Ted clicks on the latter's name and Dave Chavez's user page appears. Ted scrolls through Dave's recent entries and finds that Dave hasn't logged any data since last weekend. Ted repeats the same process with his friend Nick Anderson. After finding Nick's page, Ted scrolls through his findings to discover that Nick has also spotted the same harlequin! Ted clicks the specific entry and the observation page appears. Ted scrolls through all of Nick's photos and leaves a congratulatory comment for his friend.

Adam's Task Flow

Adam opens iNaturalist. While he has an account, he doesn't log on because he is searching rather than recording information. Adam searches "Shauna O'Conner" using the search bar on the iNaturalist homepage. After finding his friend's page he zooms out on the map so he can view the United States at the state level (rather than at its current setting). He centers the screen on Idaho and zooms back in so he can see a more detailed view of the state. He then scrolls through Shauna's most recent entries that correlate with the current map display. He finds and clicks her fairly recent trip to Hell's Canyon. The specific observation page appears and Adam browses her photos, reads her various stories, and notes some of the species Shauna mentions.

Adam then returns to the iNaturalist homepage and searches "Hell's Canyon" using the search bar. The search results give him numerous observations of various animal and plant species. Adam scans through the results, looks at specific observations that contain nice looking photos and interesting names, and jots down several species he hadn't seen on Shauna's page.

Jenny's Task Flow

Jenny logs onto iNaturalist. She sees the welcome page that displays the location and other data from her most recent entries. Jenny clicks on the "create new outing" button and is directed to the data recording page. She completes the "when" component by selecting the date and time period of her outing. She then completes the "what" component by adding each species name as well as a photo or two for some of the individual species. She then completes the "where" component by dragging the hand-print to the regional park of her outing. The interface asks Jenny if she wants all entries to associate with the same location. Jenny clicks "yes". After completing all three components she clicks on "add your data" and is redirected to her home page.

Jenny also searches iNaturalist for other amanitas with the hopes of identifying the unknown mushroom from her hike. She searches "amanita" using the search bar on her homepage. The search results give her numerous observations. She scans through the results with photos and clicks on a result that features a mushroom with similar coloring. The specific observation page appears and Jenny realizes that it isn't the same species. She clicks a "return to search results" button and continues to repeat this same process. After fifteen minutes of browsing, Jenny logs out for the evening.

Work Contribtion

Task	Andrew	Jess	Ken-ichi	Nate
Scenarios	25%	25%	25%	25%
Task Analysis	25%	25%	25%	25%
Comparative Analysis	25%	25%	25%	25%
Initial Designs	25%	25%	25%	25%
Write-up/Publishing	25%	25%	25%	25%