GR3 - Paper Prototyping

Briefing

Collectors and hoarders own lots of things in some single category, and often need an application that helps organize and keep track of the things they own. Organizing a large collection can be tricky and nontrivial, especially if said collection was not well organized from the start. There is currently no quick, simple way to organize and keep track of one's collection in a mobile, intuitive way that is easily generalized to all categories and objects. Most collection organizers rely on recall, as opposed to recognition, causing many collectors to accidentally purchase duplicates of an item. The problem is compounded when a group instead of an individual is managing a collection, or an inventory, where communicating via objects could be through descriptions or through visual aids. This application aims to allow users and groups to view and organize entire collections on the go.

Tasks

• Make a new collection and add a picture or two to it
• Search the animals collection for a dog
• Share a collection with somebody else
• Add a descriptive summary to the dog item
• Change the name of the animals collection to 'pets'

Iteration 1

Photos

Main Screen

Item Screen

Animal Collection

Collections Screen

Menu Bar

Collection Properties

Sharing Manager Auto-complete

Sharing Manager Table

Observations

User Test #1 - Course 6, Male, owns Droid.

• Task 1 - Make a new collection and add a photo or two to it.   
  • He thinks for a few seconds, and clicks the new collection button
  • He fills in collection name with his own name, then realizes the text box was supposed to be for the collections name. 
  • He adds "'s collection" to the name so that it makes sense. 
  • He adds a short description and clicks okay. (No pauses here).
  • He clicks the add new button.
  • He clicks the shutter button to take a picture.
  • He clicks it again to take another picture. (I think he thought it would take him to a screen to take a picture)
  • He clicks on tags: + to add a tag (he tags a picture of a smily face with Smily001)
  • He wants to add another tag, so he clicks + again. he tags it with the date (we don't have it clear that this is automatic).
  • He clicks on Ok to save the photo and is brought back to the collections screen.
  • He adds another photo
  • He thinks the drag out menu is the back button, so he clicks it... instead it opens up a menu. "Uh oh. That's not what I wanted!!" He clicks the button again to close the menu.
  • We add a return button and he clicks it to go back to the main screen
• Task 2 - Search the animals collection for a dog.
  • He clicks on the animals collection.
  • He clicks the filter: + button , very intuitively.
  • He types "dog" and then he clicks on dog to open up the dog photo page.
  • Now, he opens up the slide-out menu.
  • He clicks on share.......
• Task 3 - Share something with someone
  • He clicks below new sharer button at first - (He couldn't tell that add new sharer was supposed to be a buttons)
  • He then clicks on the actual button - "Ooooh google plus and facebook integration"
  • He clicks on the text box and is slightly confused, but then writes "xxxxxxxxxx@gmail.com" and clicks on view, modify, and then okay.
  • He wants to add another sharer, so he clicks on Add New Sharer, then on the facebook icon
  • He starts typing xxx, and is pleasantly surprised by the autocomplete feature. 
  • He clicks on xxx xxx, view, and then Okay.
• Task 4 - Return to the home screen.** He then clicks on the bottom right okay to get brought back to the dog photo page. ** He clicks return to get back to the animals colelction.** He tries to click on animals. Nothing happens** He clicks on menu. He is surprised that it slides out.** "How do I go home? Oh. Return... return." He clicks on return.** He tries to click on "collections."** He clicks return again and is brought back to the main screen.** He tries to click on the logo. i think he's trolling us.** "Is there a log out or something? That's probably what I'd look for." (We should specify that it's droid so that they know to click on the standard droid buttons).** He clicks home.
• Observations - 
  • "It'd be cool if there was a home screen button instead of return."
  • "The giant logo on top should be a home button."

User Test #2 - Course 24, Female, owns Droid

• Task 1 - Make a new collection and add a picture or two to it
  • Main Page
    • Hits add new collection with ease
      • Had a question about what to collect - anything? What restrictions exist?
  • Collection Properties
    • Understands the collection form
    • Writes "Board Games" in the collection name
    • Description - "Games I've collected over the past few years."
    • Selected Thumbnail - realized she hasn't made any pictures yet
    • Choose a Thumbnail Pop-Up
      • Noticed there is nothing here, cancelled
    • Had question about task - myself? With group?
    • Decided on self, selected private - clicks on okay to finish.
  • Collection Page
    • User thought that after creating a collection, she would be brought back to the main page rather than the board games page - was positive about this
    • Clicks on Add New - confused about what it meant.
  • Item Add to Collection Page
    • Confused about the picture (maybe because it was a bad drawing).
    • Not sure how exactly to take the picture
    • Takes a picture of a board game eventually (was really confused).
    • Confused between the + button on the top and the Ok button
    • Tries Ok first
    • Not sure if a picture was added
    • Added a blank item
    • Went back to the new item add to collection page
    • Clicks plus button this time, is a text entry - user does not understand what text entry box means
    • Assumes that this is title entry box, adds that this is a "Name of Board Game"
    • Done button brings up that "This Collection Does Not Exist"
    • Question: have I taken a picture? have I added a tag? (No and No)
    • Is there a way to take a picture from this page?
    • Clicks menu button for help. Closes the menu
    • Decided to try clicking the screen - yay!
      • This is how droids do it, and she is a droid user... hrmm...
      • Notes that her phone has an actual button to press. (This would make more sense if we had the screen display what was on the camera...)
    • Pressed ok,and is done
    • Wants to delete the blank picture
    • Taps on the blank picture
    • Goes back to add new item
    • Overrides it
    • Done!
• Task 2 - Search the Animals Collection for a dog
  • "Do I have an animals collection yet?"
  • Clicks on browse collections
  • Clicks on Animals collection
  • Decides to search by speaking into it (clicks on the microphone and says dog)
  • Dog tag appears, filtered by dog
  • Done!
• Task 3 - Share a collection with someone
  • Hits return - unsure if that goes back to animals collection or back to all collections.
  • Hits animals
  • Hits menu, clicks Share
  • "Is this something where I would enter text?"
  • Clicks New Sharer box, clicks OK
  • "Did I share it?" - user doesn't understand what new sharer box does
  • Clicks on "Add New Sharer" again - confused by what G, @ and F are.
  • Clicks the text box - "Do I enter name? email? How am I sharing it?"
  • Tries pressing F (assuming it is somehow facebook related).
  • Tries typing in Shankari and pressing okay - "Not a valid email address." What?
  • Types in an email, and unchecks view.
  • Presses F, and types in a Name and clicks the name in the drop down autocomplete.
  • Clicks okay.
  • Done!
• Task 4 - Add a description to the dog item (or moose apparently).
  • Clicks on moose.
  • Unsure about the difference between a tag and a description.
  • Adds a tag.
  • Opens a menu, clicks on add description.
  • Adds a new description in the popup menu.
  • Presses Ok
• Task 5 - Change the name of the animals collection to pets.
  • Clicked on Name: Animals
  • Backspaced through the popup box, types in pets.
  • Clicks done
  • Clicks okay.
• Task 6 - Go back to the home screen
  • Hits return
  • Hits return again
• Observations   
  • Swiping on phones - not as easily remembered as opposed to buttons, tapping.
    The idea of tapping and holding tap, to activate context-specific menu not considered. Not a common action in user vocabulary.
    Add New as the first item is more convenient, than having it in another place. Keep this.
    Would want, for adding tags: add plus button stays at the beginning, new tag created is at end of list, does not push existing tags to the right. For both mobile and computer interfaces. Motivation is that in mobile, keyboard pops up anyways, so eye attention is less important.
    Keyboard is assumed to pop up for text entry, for computers, displayspace is more, can reserve line for expanding plus sign into text entry.
    Sharing screen:
    OK button function confused - which OK it refers to
     - OK could be named DONE
    Add New Sharer - looked like a header without another header to serve that function. second time was okay.
    list is good/could use work to not have unused empty space.
    Add New Sharer can be persistent form, more obvious
    Drop down menu's to do permissions and contact type

User Test #3

First task – make a new collection and add a picture to it

• He clicked on the add new collection button.
• He writes poops in the name, and animal poop from diff animals in the description,
• He tries to click the thumblnail button, but nothing happens.
• He clicks on private.
• There is no textbox for sharing but he doesn’t want to click it anyways
• He clicks on OK to be brought to the collections screen
• He clicks on add new
• He likes the camera photo button more (instead of the shutter).
• He thought the button would take him to screen to take a photo rather than just taking a photo
• He confusedly clicks on the voice recognition button, and rambles to add a random tag
• He clicks the okay button
• He clicks add new to add another photo and explore the functionality
• He mentions at this point that he’s really confused about what the functions do
• He takes anew photo and complains there is no poop.
• He takes a picture of new poop  and clicks the plus tag
• He labels the picture man poop. Now he is done (HE WASN'T SURE WHAT THE PLUS DID)

He was supposed to go back to the home page so he clicks on the arrow again.

Second task – Search the animals collection for a dog

• He clicks on animals “can’t I just go to the menu and search for dog also?”?
• I can't tell which one is a dog
• Menu>search->dog and enter

Third task -  share a collection

• He clicks menu, then share, then he tries to click under the add new sharer button again (like user #1).”WHAT IS THIS”
• He clicks on add new sharer then clicks on the text box then types qwer8000@gmailcom
• He clicks on view and modify and admin.. “What is the difference?”
• Modify… he tries to click on view and modify before closing the keyboard, but it doesn’t work.
• He is really confused by the icons  (Google at sign Facebook)
• He clicks on the facebook button, types in Victoria sun, and clicks done, he unclicks modify. He doesn't want to let Victoria sun modify.
• “Oh boy that was complicated. I don’t know what the at sign means”
• “What’s the difference between modify and admin?”

Third task – add a description to the dog item

• Menu. Search. Voice recognition. “DOG”.
• He wants the dog to be poop.
• He clicks on the poop.
• “I thought it was going to bring me straight to the dog, but I guess it makes sense if there were more than one dog.”
• He clicks on menu, then he clicks on add description. Apparently description has no done button. He wants to click done though

Fourth task – change the name of the animals collection to pets

• He clicks on animals trying to do something, nothing happens.
• He thought clicking on animals or tapping and holding would bring up a text box to edit it (valid, duly noted)
• He then presses menu, then edit properties.
• He renames animals to pets.

Comments:

Thinks menus lack consistency.

(We don’t have one) He thinks we need a real menu.

Didn't know about the voice thing.

Do you think it will be that common for people to voice tag things?

I thought the sharing thing was kind of confusing.

Maye the auto-complete searches all the things at once, and has little icons.

Iteration 2

Differences

We originally had the sharing manager just be a button that a user would push and morph into a menu to add a new sharing user. This proved to be weird and cumbersome, since users didn't really understand how this worked. We changed it to a more googledoc type of adding interface, with a distinct header, and a "done" button on the bottom. A table would populate with new sharers, and a persistently visible form would be there to add contacts, complete with textbox+autocomplete, and dropdown menus rather than checkboxes or radiobuttons. After the design iteration, nobody else had any real trouble with the sharing manager, other than to play around with what view/edit/own permission types meant.

We realized that not many people expected the swipe or press&hold user actions to do anything, or did not expect them. We gather that these actions are not commonly found in user vocabularies, though we will have them for people who do expect them. Conversely, all actions should be accessible through touch tapping exclusively, which we made sure to follow.

We turned the heading title into a shortcut to go back to the main screen, which is found sometimes in interfaces. The heading serves no other purpose currently, and it does save some users a few taps. We additionally took into account that people who were slightly lost would look at the menu to find what they could possibility do, so we're adding a few more items into the menu bar.

There was a bit of confusion with the shutter button, so we added a second camera shutter shaped button, and put it off center near the bottom, which made it much more obvious what the function was. We also switched the add to collection interface with a dropdown menu to select which collections to add to, since one user inadvertently tried to add to a non-existent collection. The drop down combo-box interface will make such errors not available.

Originally we had OK and cancel buttons, but we replaced them with more appropriate labels like Return, Done, and Cancel. However, there is still a bit of work to make these menu buttons more consistent, to not confuse users.

Observations

User Test #1

• This guy does not own a droid.
• Task #1 - Make a new collection and add a photo or two to it,** He clicks add new collection** He clicks on name...  "I don't know what to collect" .. He types in Collections ** He clicks done** "What does this do? Does this make it public?" He clicks public
  • "oh no i wanted to make it private" Clicks private
  • He clicks add new.
  • He just sees what the piciture button does
  • He takes a new picture of a chair
  • He asks what the slidey thing does and then tries it out.
  • He clicks done. (He didn't add any tags).
  • We ask him to tag the chair.
  • He clicks on the chair.
  • He clicks tags: +. He tags furniture.
  • Done!
• Task #2 - Share a collection with someone else.** He clicks on the chair photo. "oops"** He clicks on return.** He clicks on menu -> Share.** He clciks add 
  • He types in one letter. Another one.
  • The email he is looking for is autocompleted, so he clicks on it.
  • "What does this do?" He clicks on can view.
  • Dropdown opens, he clicks on can view again. Done!
  • He clicks on the main done. Done!!
• Task #3 - Search the animals collection for a dog!** Clicks return.** He clicks on animals.** "I guess this is a dog..." Clicks on dog.** "Did I find a dog?" Yes... kind of
  • Clicks cancel.
  • (We tell him we would like him to search for it, in addition to just finding it)
  • Clicks on filter: +, filters by dog.
  • Done!
• Task #4 - add a description to the dog item.** Clicks on dog** Clicks on menu -> add description** Make a brief description, and clicks done.
• Task #5 - Change the name of the animals collection to pets** "hrm..." clicks Menu -> "Hrmmm..." clicks properties.** He clicks on name.** He pretends to backspace, and deletes animals, and writes pets in it's place.** Clicks Done, then Ok.

• Task #6 - go to home screen** Clicks return** Clicks return again... done!~

Comments:
"What'd you think?" - "It's okay - it seemed pretty straightforward"
"Is ther anything that confused you?" - "When searching, I was a little confused - it didn't say search anywhere on the screen.. it said filter..." 
"I wasn't exactly sure how to input the contact for sharing." He likes the dropdown a lot though
"Would you rather it be called search?" - "Yeah, I think it would be more intuitive if it said search or something..." "I guess it's different if you're searching tags"
"Would you rather for the add new contact thing that it autocomplete for you from everything? Or would you rather have a dropdown menu telling you what kind of thing it is?" - "I would rather have an autocomplete. I think it makes more sense."
"Oh yeah, one thing that was strange was that there was no way to name items individually"

User Test #2

Based on user 1's suggestions, we added a name for the item. We also changed filter to search filter, to make it more obvious that it had search functionality (perhaps a magnifying glass would work just as well? Unless people confused it with a magnification scope):
User 2 does not own a smartphone or an android. A short briefing on touchscreens follows.

She thinks this is a cool idea
Task #1 - Search the animals collection for a dog

• PEW - clicks browse collections.
• PEW - clicks animals
• "I DON'T KNOW WHICH ONE IS THE DOG!!!"
• Gets which one is the dog after three clicks.
• Tries holding and clicking all the animals.. moose, penguin, whale..
• Clicks on dog!
• Clicks on home. Returns to android home screen. Realizes that is outside the scope, goes back.
• "What does this button do?" Clicks on the photo.
• "AHHHHHHHHHHHH" Clicks cancel.
• Clicks on menu clicks on menu again.
• We asked her to find the dog in another manner.
• Clicks search filter: +, and types in dog and clicks done

Task #2 - add a description to the dog item

• Clicks menu, then add description
• She types some description
• She clicks done.
• "Where can I see the description?.. Oh.. properties...?" 
  Task #3 - Make a new collection and add a picture or two to it
• clicks menu to close it
• clicks menu to open it.. "Wait how do I go back?" clicks done.
• clicks back again (this time the droid button).
• she clicks add new.
• She clicks on name, and types in "Ice Cream Flavors"
• She clicks done.
• She clicks on description, and types in "Yum"... done
• She doesn't know how to add a pictures? "How do i add a picture"
• She clicks okay.
• She click on add new
• She clicks on name,types in peppermint, and clicks done.
• She takes a photo of some peppermint ice cream!
• She clicks done.

Task #4 - Share a collection with someone else

• She Clicks menu -> Share
• She clicks on the text box.
• She starts typing stuff.. and it auto completes! "Ahahah!"
• She clicks on one of the auto-complete itemes (Wait why does the keyboard steal focus?...)
• She clicks can view, then can view again. She clciks done.
• She clicks done again!!!

Comments
"Was anything confusing?" - "Not really.. it's mostly intuitive. I don't know what these three lines are"
"Anything a bit off?" - "Not really"
"Do you like the teram search/filter?" - "Both make sense..."
"How would I share multiople collections with people at once?"

User Test #3

Does not use droid, but has an iPhone.

Task #1 - Search the animals collection for a dog.

• He clicks browse collections.
• He thinks the three lines are page of selections so he clicks on it. He clicks again to close it. I think if we just have a menu button it's fine. he clicks add descriptions... nothing happens. (This button probably shouldn't be there.)
• He clicks on animals.
• "I'm assuming this is a dog, but lets pretend I want to search for it."
• Clicks search filter: +, then types dog.
• We have a brief discussion about how we're retarded
• He clicks on dog.

Task #2 - Add a description to the dog item

• He clicks on menu -> add description
• He adds a description cat....
• He clicks done.
• Done!!

Task #3 - change the name of the animals colelction to pets

• He tries to click on animals, but nothing happens. he clicks on done. 
• He talks about how some apps require you to hit save or done for changes to happen
• He clicks on menu -> properties.
• He clicks on the name textbox, and types pets, then clicks done. He clicks Ok

Task #4 - Share a collection with someone else.

• He clicks on menu -> Share (after some thought, seems like he is browsing the menu options for later?)
• "also one thing that would be cool is if when you're in the collections, and you choose a particular collection, it shouldnt' be a big transition... it should seem continuous..." 
• bleeben: "If there are like 20 items in a collection, and in the bototm right it says 1/5, how would you view other cllection?" "I'd swipe like this. one thing to do is show part of the items, so you know there are more and that you can scroll"
• "Oh so this means sharing as in allowing someone else access" (He thought it only meant letting them view it... ) We add the can view button, and he says "oh that's what i was thinking."
• He clicks on the text box, and starts typing... he already realizes that it's going to autocompete.
• He starts typing z... then b. Autocomplete appears as zbt
• He clicks on zbt.
• He clicks on can view to open up the drop down.
• "I'm confused about what can edit things and what an owner is... oh an editer can edit it and an owner can share it with other people.. i guess i'll make zbt an owner"
• He clicks on can own, and then clicks done. Done!

Task #5 - Create a new collection and add an item to it?

• He clicks return quite confusedly, but it registers after clicking.
• He clicks add new
• He clicks on name, and names it @... then clicks done
• He clicks on description and starts trolling us, and types whale in the description.
• He clicks on public to make the collection public.
• He clicks on ok.
• He clicks on add new
• "Can I not input a photo i already have?"
• He clicks on add to collection... "Okay yeah that's good.."
• He points it at his face and takes a photo.
• He clicks okay.

Comments:
"Weird?" - "I think I said everything that didn't make sense at time." "Oh wait what's this? (Search filter) Waht are these two buttons?" (Bleeben then explained)
"Is there a way to make that more clear?" - "Probably not that's probably good... in some cases, i think it could be a trap if there are little picture every where... but I think in this case it's good to have a microphone there, it's not confusing like other icon pictures"