...
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:
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. Suggestions for items names help prevent these errors, but they will still happen. 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., 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.
...
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.