...
The server send the contents of the user's kitchen (from the database) and they are displayed in a table using the DataTable plugin, which provides live search are re-ordering of the table. The table can be filtered (selecting various locations and categories) using the left hand menu. Clicking any item on this menu send an ajax request to the server, which then refreshes the page with only the filtered items shown. These multiple methods of sorting/finding help users deal with large amount of food and where mostly intuitive to users (the exception being ordering the table, because no arrow affordance showed up). The Add Food button opens up a dialog and dims the rest of the screen. Both the overlay and the dialog are hidden divs that toggle on button clickWe choose a dialog over a new page for better loading time and learnability. In the dialog box, date input box use jquery UI's datepicker to provide a calendar display to the use upon clicking. Location is selected by clicking on images that act as radio buttons. Upon submitting, , which we thought would be less tedious then a drop down menu. Upon submitting, and ajax request is made to the server. The server inserts these new items into the database. The delete button (after a dialog confirmation) sends an ajax request for the server to delete any checked items in the table. Any action . This balanced error making with performance (since deletes happen as one consumes food). All actions that calls the server also causes a refresh client side, so that results are updated immediately.
...
We found individuals for testing by talking to people within our dorms. We felt that this was a good strategy because we originally built our interface for busy, college students. In a dorm setting, it is difficult to manage one's food supply, so we felt that the users we chose fit with the ultimate goal of Dough. The three users all cook (although varying in the number of hours per week) and also all live in different dorms.
Briefing
Dough is a web application that helps you manage your food and your food budget. You can track foods you've purchased, see when your foods are about to expire, look at how much you've spend on food, and find recipes tailored to your food supply. It is built to help you get the most out of your food purchases.
...
We felt that most of our tasks from paper prototyping were still applicable to our final user testing. However, we added a few additional tasks to test a larger breadth of functionality. We did not demo the site to users.
- It's It's Wednesday, March 16th. Your vegan friend Bobby is coming over tonight for dinner. You log in to Dough to check what you can make.#* Go to the Dough website and check what food you currently have.
- Your face falls and you sigh dramatically when you realize you don't have anything Bobby can eat. Looks like you need to make a trip to Shaws.
- Check your budget to see how much you have left to spend on your trip to Shaws.
- While checking your budget, you remember that you received a large tax refund in the mail and can afford to spend more money on food this month.
- Increase your food budget to $300.
- Your remaining money supply seems really low.
- Check your previous purchases for any strange-looking entries.
- You find an erroneous entry of $500 when you meant to enter $50.
- Correct the purchase amount to read $50 instead of $500
- Wandering joyously up and down the aisles at Shaws you find broccoli, whole grain rice, and tofu. You buy the three items for $12.45.
- Add your food on the Dough site, recording when you bought it, where you're putting it (broccoli + tofu go in the fridge and rice goes in the cabinet), and how much the total purchase cost.
- As dinner approaches, you realize you can't just serve Bobby raw broccoli and rice.You need a recipe for some dish.
- Use Dough to search for dinner recipes you can make with your new foods that Bobby can eat. Since your carrots are going to expire soon, make sure the recipe contains carrots.
...
At both prototypes, we took the feedback (from user testing and heuristic evaluation) and incorporated it into our project. Although we didn't use the proposed solutions every time, we did always address the problems, finding a way to fix them. One place where it was difficult to find design errors was in the scale of the paper prototype. Because handwriting is larger than typing, our layout, which looked good on paper, looked very empty and stretched out on the computer. If we had used bigger paper, this might have been avoided.
The paper prototype test we did in the classroom setting were useful, but only touched on the more important features due to time. When creating the computer implementation, we realized that we weren't sure how to sort/filter food on the food page because it hadn't been tested. Sorting/filtering also wasn't tested much on the computer prototype because of it's high-fidelity nature. If we were to do this again, we would do a second paper prototype that was longer and covered these tasks.