...
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. 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. 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.
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".
Notice that when she leaves the homepage, the three large column buttons reduce into three small icons in the bottom right corner. These three icons stay on the screen when the user scrolls down, and are links to the three different pages.
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:
- The cursor is already in the input box at the top left. She types "be", and autocomplete fills in "beef".
- At this point, a default price (the last she paid for beef) fills the price field, a category (meat) fills the category field, and an estimated expiration date fills the last field.
- The "fridge" button is then highlighted, since Erin usually puts her beef in the fridge. She could press "enter" to put her beef in the fridge, but if she wants to put it in the freezer, she clicks the "freezer" button.
- This enters "beef" in the meat category and returns the cursor to the input box.
She continues this method for all her items.
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.