Jeffrey Chan, Ryan Lacey, Amruth Venkatraman
Protoypes
Photos
links
Iterations
| Anchor |
|---|
| Table of Contents |
|---|
| Table of Contents |
|---|
|
Table of Contents
How it changed.Briefing
Thank you for volunteering to test our website mock up. We're working on a design for 6.813 and believe that your feedback will help us revise our design to be more intuitive and easy to use.
...
We'll provide you with a couple tasks to try to accomplish, but feel free to explore the space. We encourage you to talk aloud as you navigate the site, especially if you find something confusing or peculiar. And don't worry about trying to find "the right way" to do things. We are testing our site, not you, so any troubles you encounter reflect a flaw in our design. Your test results will be kept confidential. Feel free to stop at any time.
...
Tasks
- List donations on website.
...
- Check messages to see if anyone has responded to your listing.
Observations
User 1
When User 1 first opened the user interface to complete his first task of giving a toy, he started by filling in his name and description until the “Condition” field tipped him off. As designers, we had assumed that the user would automatically know that we only cared about the toy’s information rather than the user himself’s information. Next, User 1 was curious as to what the box on the right entailed until he guessed that it might have to do with a picture, and he wished allowed that there was a placeholder picture. When the user saw the “add toy” option, he thought it would act like a submit and suggested using “Add Another Toy.” The user was also really confused with the difference between what a single item and a collection of items entails such as “Is a deck of cards a collection?”
For the second task, it was unclear to the user whether the images would dynamically change or there needed to be a submit button for the search. This was probably a result of the fact that the prototype could not change fast enough for the user to realize it was dynamically changing. The user had trouble figuring out how the drag-and-drop worked since clicking the image already showed more detailed information, so he did not think to drag the photo.
The “New” button was confusing to the user as to what exactly it would entail. Messaging was unclear to the user even though it was modeled after Facebook’s messaging feature.
User 2
When registering toys on the website, User 2 put his contact information in the description field of the list toys interface. This was unexpected as we expected people to use the messaging feature, but not being exposed to the product like we were, the user thought the description was the appropriate place to put the contact information. He also was a bit confused about there not being a placeholder image for the image box that is filled after selecting a URL or file from disk to populate it.
...
Protoypes
 Image Added | Navigation Bar
Users can navigate around the site to visit the homepage, give page, get page, messages, and profile. |
 Image Added | Give Page
Users upload information on toy(s) they would like to donate.
"Single" - List each toy individually
"Collection" - Upload a batch of toys as a single item. Items do not have to be related (eg. User could upload dolls and board games as a collection).
Accordion collapsible interface for listing toys.
Toy Listing Details:
- Name of toy
- The age range the toy is appropriate for
- A description of the toy
- An image of the toy
|
 Image Added | Get Page
Users browse offerings and select toy(s) to ask for from other users.
Toys listing displayed as item picture with name as caption.
Page Features:
- Drag & drop interface allows users to drag toy image to cart.
- "Quickview" (not shown) - Popup on picture click that provides detailed toy information.
- Filters for more powerful and efficient search:
- Item Name (search bar)
- Age Range (drop-down)
- Toy Category (checkboxes)
- Toy Condition (drop-down)
- Checkout prompts user to message toy owners to begin the exchange process.
|
 Image Added | Messages Page
Interface through which users communicate with one another.
"Recent Contacts" - Listing of people user is in comunication wih.
Standard messaging interface to allow users to dialogue over contact information, how toy(s) will exchange hands, etc. |
| Anchor |
|---|
| Observations |
|---|
| Observations |
|---|
|
Observations
Iteration 1
User 1
- Field names unclear
- Confused by browse/URL since there was no picture placeholder
- Add toy looks like it behaves like submit
- No clear all option
- Cancel button is unclear what it corresponds to
- New button in messaging unclear
- Single vs Collection unclear
User 2
- User wanted to put contact info in description
- User wanted a picture placeholder but was able to assume function
- User wanted a button that says “any” for age
- User wants submit confirmation for donation
- “Any” condition for dropdown filter
- Drag and drop not obvious
- Feedback on hover for shopping cart
- What does clicking on cart do
- Confirmation that message was sent
- Notification on envelope for unread messages
User 3
- Where is remove button on toy listings page?
- Can I submit toys of different types at once?
- Checkout is confusing...
- User tried clicking shopping cart
- Distinguish which item is being messaged for
- Can I cancel order after placing
| Anchor |
|---|
| Summary of Iteration 1 |
|---|
| Summary of Iteration 1 |
|---|
|
Summary of Iteration 1
- Make age range a drop down (learnability)
- “Add toy” label changed to “Add another toy” (learnability)
- Distinguish single toy vs collection of toys better (learnability)
- Add clear filters button (efficiency)
- Delete new button in message window (learnability)
- Add send button in message window (safety)
- “Any” field in toy condition search filter (efficiency)
- Affordances for cart on drag and drop (learnability)
- Add to cart button as well in receive page (learnability)
- More clear remove button on add toy listings page (learnability)
- Distinguish which message is going to which user for which item on requesting items (efficiency)
- Change name of “checkout” button (learnability)
| Anchor |
|---|
| Iteration Step |
|---|
| Iteration Step |
|---|
|
Iteration Step
How it changed between iterations:
- Made toy listings field descriptors more clear
- Added picture placeholder before a picture is uploaded
- Add clear all filters option
- Change "Add toy" to "Add another toy"
- Made age range a drop-down to suggest possible values
- Added remove toy button on receive page
- Changed interface for getting toys
- Cart metaphor changed to wishlist metaphor
- Wishlist contents not shown on page, but rather on clicking the wishlist
- Can add toys to wishlist either by drag and drop or from detailed view of the toy
- When dragging an item, the wishlist image animates to a "Add item" image
- Messages page: send button shown, removed add new conversation feature
Iteration 2
User 4
- Enters own name in toy name
- Struggled to map deck of cards to category
- What is single versus collection? (trying to put two things should be a collection?)
- Confused by what a wishlist is
User 5
- Didn't enter a category for toy 1 since wasn't required
- Wanted to type his own category for toy 2
- Tried claiming own toy
- Confirmation of toy submission bothered user
- Confused why all toys were showing when nothing was checked under categories on get page load
User 6
- User entered name in for toy name
- What is single v collection?
- Thought had to message owner to claim, so thought he was done with task 2 before he was
- Didn't understand where there was a limit he could claim
- Is notifications for messages per message or # of different users messaging me?
...
| Anchor |
|---|
| Studio Commentary |
|---|
| Studio Commentary |
|---|
|
Q: How does claiming a collection work?
A: The user messages the owner for specific things he sees in the image
Q: What happens if multiple users claim the same toy?
A: The owner of the toy gets requests for his toy and gets to pick who gets the toy.
Q: What happens if the accordion fills the screen?
A: When adding a new toy, the window automatically scrolls to the toy they are trying to add.
Q: What about a message label instead of checkout?
A: That's an idea we considered but decided there is a distinction between messaging an owner of a toy for more information versus actually claiming, so we decided to avoid thatWhen User 2 proceeded to task 2, he tried searching for an “any” category that was looked over by the designers. He also struggled for a couple minutes trying to figure out how to add items to his shopping cart. Drag and drop was not natural for him. He made an interesting note on the benefit of having an affordance for hovering over the shopping cart, a feature that was not currently in place. On finishing task 2, he commented that there was a confirmation message after the message to the toy owner was sent. After hearing task 3, the user wondered why there was no notification in the header of the website telling him there was a notification.
...