...
After entering her username and password, she it taken to the Dough home page. It contains a menu bar on the left side, status messages at top, and a list of items, separated by location and initially organized by expiration date. Food can be shown by location by clicking the arrow near the location name. This causes all the items to be displayed below. The top status bar displays hint for using the system and (when applicable) and link to undo that most recent acton, such as adding food (like in gmail). On top of the menu bar is a box that displays the current budget progress, how much money out of the total amount that has been spent in the current month. Looking there, Erin can quickly check how much money she has left.
...
Food is added by storage location. Erin specifies location by clicking on the appropriate tab. She enters the food items one by one, specifying their expiration date (if they have one listed) and any other notes. When the entry box is selected, a cursor is displayed. By default the food is listed as purchased on the current date. This can either be changed item by item or for all items using the purchase data at the top of the window. Changing the data on individual items overrides the data set on the top. If more items need to be added, more item entries can be added using the plus sign. Items are submitted by clicking the button at the bottom right of the addition window. (looks like a smudge on the scan).
...
Erin goes back to the Kitchen Contents page and sees that she still has asparagus from last week. She checks the box near asparagus, as well as the frozen greens she has in her fridge. Then she click the recipes button and is taken to an external recipe site with a query using those items in a new tab.
Evaluation:
Learnability and Efficiency:
Visibility
Efficiency
Error Prevention.
This design values efficiency over learnability. There are no splash screens explaining procedures. Each entry box has a label near it, however, as well as having the mode displayed on the menu bar by means of highlighting the name current page. The nested menu idea (with the clickable triangles) used for displaying food is similar to file systems in operating systems like Mac OS X aiding learnability. I expect the most complicated part to learn would be searching for recipes, as there is no dedicated search page. The status bar at the top will initially include a message about selecting the check boxes near food and then hitting the recipe button, but there is no guarantee that users would read that. Efficiency is hindered slightly by the fact the users must separately enter items and price. Users also must specify a location for food items, and add items in different locations in different views. For users who don’t organize food by location in their head (aka, want to add milk, then cereal, then ice cream, each in different locations), this system would not be efficient. This tradeoff is made to prevent users from having to type/select the location for each food item, would would also not be efficient. In looking for items, users can either scroll through the entire list, or use the search at the top of the page, speeding up the process.
Error Prevention/Correction:
Users are prone to make errors when they type, and there is a lot of text entry in this design. The status message includes a link that will allow you to undo the last action (such as add food) so that users can undo a change if they notice quickly. Otherwise, if a user added the wrong food, (and it was more than one click on the sight ago) they just have to delete all the foods they added and re-add the correct items. The time to do this would be improved by searching for the item, but it’s still not fast. The same holds for adding purchases to the budget page.
Visibility:
The page the user is on is visible (via highlighting) on the left on the menu bar. Unfortunately, this may not always be visible, however, i the user has a lot of items listed and scrolls down to look at the bottom of the list. The links on the menu also have a good information scent by listing the actions that can be taken after clicking on that link. Then menu bar will be colored differently than the rest of the page, but an additional afforance, such as a clickable texture, would also be useful. The same is true for the tabs on food entry page. Text boxes will include a cursor when selected, to make it clear which box it being edited when. Food stored and budget are only displayed as list in this design, which could be problematic for those who are visual learners.
Design 2:
Upon loading the website, Erin sees the Dough home page. It is easy for her to find the login button at the top, and she enters her username and password in the modal dialog box that appears when she clicks it.
...
Erin decides poached eggs and asparagus sounds good, so she clicks on it. It brings up a pop up page containing the recipe from an external recipe site.
Efficiency and Learnability:
In several parts of this design, it was difficult to achieve both efficiency and learnability. For instance, the thumbnail page presents a lot of information to the user at once, but it is quite efficient because an experienced user could quickly glance at the information, process it, and perform selections and actions on many food items at a time. However, a new user may not understand what the pictures, progress bars, icons, and check marks on this page mean. Specifically, the food location icon at the top right corner of each thumbnail might be confusing (refrigerator, cabinet, ice). They may also not know what the progress bar indicating time until expiration means. The tabbed organization of the website as a whole also represents a battle between efficiency and learnability. It would be possible to combine all the functionality thats separated into these tabs into one page. For instance, a recipe search could be done efficiently from the food page by selecting foods and clicking a "find recipes" button. However, from a learnability standpoint it made more sense to keep the site more modular. If you want to do something, you go to the corresponding page. This gives new user a clearer idea of what goes on where.
Visibility:
Overall, this design has good visibility. The state of the program (the current foods the user has, their food budget, etc.) is presented to the user with graphs, charts, and pictures of their foods.
Error prevention/correction:
There are strengths and weaknesses in error prevention/correction in this design. Though there are many text boxes to fill in while entering foods, autocompletion and predictions about the user's entries can easily help them fill in the fields quickly (also an efficiency benefit) and generally without error. Nonetheless, users may also ignore the autocompletion or forget to fill in values on their own. Even worse, they may not realize that they did not change the predicted value and not know to correct the error. In most cases, errors are easily recovered from. Food entries, for instance, can be moved around and deleted with ease. Any errors made with the budget can be changed on the budget page. Modal dialog boxes also help with error prevention. They prompt the user for necessary information and, because of a faded background, clearly indicate to the user that a new mode has been entered.
Design 3:
Before going out to buy food, Erin checks her budget on Dough. When she goes to the website, she first sees the homepage.
When she enters her username and password and clicks "Login", the login bar at the top changes to display "Welcome, Erin". Wanting to check her budget, she clicks the rightmost column, labeled "Budget". This takes her to the budget page.
Here Erin can see how she has spent her money recently, and how much money she has left. She selects "weekly" on the right, to know how much she has left to spend this week. She can customize her budget by clicking "Change budget".
...
When she returns from the store, she logs in to Dough again. This time at the homepage she clicks "Food", the leftmost column, taking her to the food page.
Here she can see a graphical display of her categories, in this case fruits, meat, drinks, and other. She adds her items as follows:
...
Now, on this same page, she can check which items are going bad. Since the food is by default sorted by expiration date, she looks at the top of her fruits and vegetables list, and realizes asparagus is about to expire. When she checks the box to the left of asparagus to note that she would like to use it in a recipe, a box saying "find recipes" pops up in the lower left of the page. Thinking she would also like to use chicken, she checks the box next to chicken and clicks "find recipes". This takes Erin to the recipe page.
Here she can navigate to different recipes involving asparagus and chicken, and when she clicks on one, it appears on the right side.
If Erin had not selected ingredients, and had simply clicked on the recipes icon or column from the welcome screen, the page would have looked like this.
Evaluation:
Learnability:
This design favors learnability, since it has an initial welcome screen with descriptions on what to do. There are some things that are not as learnable though. For instance, the check boxes on the food page that allow a user toAgain, the check boxes mentioned in learnability are also not as visible as some other aspects.
search for a recipe from those items has no affordances. A user would have to click them to find out what happens, or go through a tutorial.
The toolbar at the bottom is also unusual. Although it makes things more visible and efficient in the long run (since it floats and is always visible), it is a little more difficult to get used to than more popular navigation methods, with selection on the top or left side.
Visibility:
In general, most things are visible in this design. Each page displays all the information at once. An example of this is that the recipe page shows recipes returned from the search (or if there was no search then popular recipes or recipes you can make) on the left, and specific recipe details on the right. This omits lots of clicking the back button to see the list again (which increases efficiency also).
Efficiency:
This design also tries to make things efficient for the user. Autocomplete and filling in defaults is an example. Also, the fact that the input field to add new food is at the top of the screen instead of in a modal dialog makes it easier for the user to add things instantaneously. The check boxes on the food page are an example of choosing efficiency over learnability. Since the user only has to learn this feature once, and it is a more advanced feature, he can check items more quickly than going to the recipe page and entering that information there. A problem with efficiency is that the user enters a price for each item, instead of listing all the items on a grocery list with one price. This is a trade-off with the accuracy of the data, though, since it could be useful to the user to know how much was spent on which items.
Error Prevention:
One of the things designed for error prevention was putting the check box for recipe searching on the left of the food items, instead of the right. Putting this on the right would mean it is near the delete button, and that could cause errors. This design tries to keep those types of buttons apart. A weakness of this design in this area is the default values automatically completed. A user may enter an item and not want the default values, but automatically click enter because it is the easiest thing to do. This is a trade-off with efficiency.