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.

Our design is continuously evolving and we need your help to further improve our user interface. Remember, we're testing our design, not your abilities. As such, please feel free to explore the various parts of the interface and do not be afraid to say that you don't know how to do something. Any difficulties that you encounter are opportunities for us to improve; they are not your fault. Your results will be kept strictly confidential and will only be used to help us improve our design.

The idea behind the application is to allow college students and other groups of friends to find what drinks they can make given a collection of ingredients. As you might know, sometimes it is difficult to come up with an interesting recipe on the spot. We also want to allow interaction among users by allowing upvotes or downvotes of drinks and the ability to write comments and add your original recipes.

We'll present you a paper prototype of the interface, an enlarged version as it would act on a standard touchscreen smartphone. Just treat the paper as the phone's screen and interact with it as you would a touchscreen device. We'll give you three short tasks to do on this interface. As you do certain things, I will be changing the paper in front of you or its contents to reflect your actions, and my teammates will be taking notes on your actions or responses, things that you say, or anything that. If you can, we would greatly appreciate you thinking out loud, so that we can note your thought process and see if any parts of our design are unintuitive.

Finally, if you would like to take a break or stop, feel free to do so at any time.

Scenario Tasks

Task 1 - Searching

You are at a party and have the following ingredients:

  • orange juice
  • pineapple juice
  • vodka
  • ginger ale
  • sprite

Find the highest rated drink that can be made from these ingredients.

Task 2 - Voting

Find the drink that you just looked up. Either "vote up" or "vote down" the drink depending on whether you like it or not.

Task 3 - Commenting

Find the drink that you just looked up. Leave a short comment about the drink.

Observations

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.

Task 2

  • The home screen was again very intuitive. The user remembered the drink's name, so he easily searched by name and was brought to the drink's page within a few seconds. The user appreciated the autocomplete feature of the search bar.
  • The user was not sure where to find the upvote or downvote buttons. It was suggested that we place the buttons closer to the top of the page, instead of by the comments. It was also suggested that we use actual thumbs up or down instead of up/down arrows.

Task 3

  • Once again, the search was fast and efficient.
  • The user appreciated the large, obvious button for leaving a comment, and the simplicity of the page containing the textbox for comments with no other clutter.

User 2

Task 1

  • Like the last user, this user also had some troubles switching between different categories of ingredients. This user selected vodka from the liquors subcategory, but could not figure out how to go back. Instead, he clicked “Done” and then “Submit”, leading to inaccurate search results.
  • The user easily found the large back button on the search results page, so he was able to add the remainder of the ingredient list.
  • The user also found the breadcrumbs after staring at the interface for a bit, so adding the rest of the ingredients was quite efficient. However, it took a significant amount of time to find the breadcrumbs.
  • Like the last user, this user was afraid of losing selections when navigating with the breadcrumbs. Again showed the need to demonstrate visually that we are saving some form of state.

Task 2

  • The user forgot the name of the drink, so asked for the ingredient list. This showed us that we should maintain a list of history
  • The user easily found the upvote button and selected it.

Task 3

  • The user now remembered the name and use the name of the drink to find it, a much more efficient method.
  • The user commented that there was a lot of text on the drink page (ingredients, instructions, comments, etc.) but that it was very easy to find the button to leave a new comment.
  • The user liked the simplicity of the page to leave a comment.

User 3

Task 1

  • The user found or “Find Drink” button to be confusing. While the button was meant to be used after all buttons had been entered, the user thought it could also mean “Click here to find a drink” which is what he was trying to do.
  • The user was initially confused a bit by the layering of the juices. Why are there more options after I click “Orange Juice”? Then he realized that there were many types of orange juice and it made sense.
  • The user was easily able to correct mistakes in selection. He selected pomegranate instead of pineapple juice, but simply tapped the button for pomegranate again. The visual feedback of the dark outline around a selected ingredient was effective.
  • The user identified the breadcrumbs and use them to navigate effectively.
  • When presented with search results, the user didn't know what the numbers meant. But the presence of negative numbers indicated a ranking or relative “upvote” to “downvote” number. He selected the highest ranked drink by using that inference. Nonetheless, we should make it more obvious that the numbers are the rankings of the drinks.

Task 2

  • The user forgot what the drink was called so had to go through the selection by ingredients again. This further demonstrated the need for a “drink history” option.
  • The downvoting process was easy and efficient.

Task 3

  • The user remembered the name of the drink by now. He easily found the comment button, enters the comment and submits.

Prototype Iteration

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.

  • No labels

1 Comment

  1. Edward Oscar Benson

    Excellent work. Good recording of observations. Would help to have +/- next to each one. Excellent documentation of the iteration and results of the changes. Unclear from this writeup whether you had three users try the modified version.