Prototype Photos
The prototype photos correspond to the first iteration of the design.
Briefing
First of all, thank you for participating in our user study. We're designing an application for our 6.813 User Interface Design class, and we've made a few paper prototypes for you to test.
...
In general, all users completed our tasks without help, although some made errors and had to backtrack or showed significant hesitance to tap certain buttons because they were unsure of the results. Here, we do not give a play-by-play recap of each user testing session, but rather what each user taught us about our design at each task.
Observations for the second iteration of the design are included in the "Prototype Iteration" section under the "Results of the change" column.
User 1
Task 1
- The home screen was very intuitive. The user immediately selected the option for searching by ingredient.
- The user did not easily pick up on our “breadcrumbs” form of navigation. Since a page of ingredients could be a subcategory of another broader set of ingredients, it was necessary for the user to back out of the current page after making a selection to make additional selections. Because the user did not pick up on the breadcrumbs, he was unable to continue selecting ingredients in a different category.
- Instead, the user clicked the “Done” button. He expected the button to bring him back to the main ingredients page; rather, it gave him his current selections.
- The user did not want to “Submit” the incomplete selections, so he forced himself to find an alternate way of navigating, which led him to breadcrumbs. Things were straightforward and efficient from here on.
- The user was not sure if navigating backwards using breadcrumbs would save his current selections. We need a way for the user to realize that state is being saved in our design.
...
Problem with first iteration | Solution tried in second iteration | Result of the change | |||
|---|---|---|---|---|---|
User could not see bread crumbs | Kept bread crumbs, but made them buttons instead of simply underlining them | User still did not use bread crumbs. In a few additional tests, we removed breadcrumbs and instead provided a large back button on each page. At the cost of some efficiency, we were able to make our design a lot more learnable. | |||
User was confused about the functions of the "Done" and "Submit" buttons | |||||
|
|
| |||
Eliminate the "Done" button. The Submit button simply goes to the search results using all selected ingredients in one step. This will be used in conjunction with the "bin" (see below). | Some users were confused and hit submit, only to realize that they wanted to enter more ingredients. Users that successfully used the bin did not have this issue. The users that hit submit prematurely weren't severely affected because of the large and obvious back button on the results page. We also added an "Add More Ingredients" button next to the submit button to make things clearer for the user. | ||||
User wanted to know what has already been added and be sure that they can navigate around pages and their selections will still be remembered. | Create the "bin". This is a permanent icon at the top right of the screen when selecting ingredients. Selecting an ingredient plays an animation in which a small icon pops out of the ingredient selected and into the bin. De-selecting plays an animation where the small icon flies out of the bin. Users can tap on that icon to view the contents of the bin. They will have the option to remove any ingredients, add more ingredients, and start the search. | Users were comforted by the animations of things going into and out of the bin. The concept of the bin along with it displaying the number of thing in the bin made users feel like the program was saving their selections in between pages. Some users checked the bin before submitting, others seemed to remember their selections fine and did not need to check. | |||
Users wanted to be able to identify the drink rating system easier (thumbs instead of arrows) | On the drink pages, the up and down arrows changed to thumbs up and thumbs down icons. On the search results page, the column with the scores now includes a "rating" heading. | Users more easily identified the thumbs up/down system. Although this was not a pervasive problem in the first round of tests, users now definitely seem to know the numbers' meaning. | |||
Users sometimes know of a drink they had but forget its name, causing them to have to search by ingredient. | Add another option at the home screen: view previously viewed drinks. | All users in our second round of tests used this option instead of either search options. This allowed for greater efficiency in finding the drink to rate or comment. Users preferred scrolling through a list of drinks over having to recall the name of a drink out of thin air (search by name) or go through all the ingredients again. We can also add other functionality such as view all "thumbs-up" drinks. |
|
|
|