Page History

Index

1. Storyboard
2. Usability Analysis
   1. Overall Usability
   2. Login Page
   3. Food History
   4. Food Stock
   5. Analytics

Anchor
Storyboard Storyboard

Storyboard (top)

Anchor
UsabilityAnalysis UsabilityAnalysis

Usability Analysis (top)

Anchor
OverallUsability OverallUsability

Overall Usability (top)

DailyDigest is organized into three tabs, each of which covers one of the application’s three major functionalities: Food History (what the user has eaten), Food Stock (what the user owns but has not eaten yet), and Analytics. The tabs are always shown at the top of the page so that the user’s location in the website is always visible. We predict that the Food History and Food Stock will be used much more often than Analytics, so the ordering of the first two tabs is somewhat arbitrary; they can be switched around with little effect on efficiency. In all pages of the application, the login/logout link is always at the upper right hand corner of the page, which is consistent with the interfaces of most modern websites. The user’s name is also in that corner so that it’s easy for users who use the same computer to tell who is currently logged in. In addition, there is always a bar at the bottom of every page with links to product information (e.g. About Us), which is consistent with most websites as well.

Anchor
LoginPage LoginPage

Login Page (top)

This is first page that potential users see. It contains a brief description of DailyDigest. If they want to start using the application, they can choose to login with MIT certificates by clicking the “login” link. This page is intentionally simple, so there isn’t much learning, doing, or error-making involved.

Anchor
FoodHistory FoodHistory

Food History (top)

This is the first tab that the user lands on after logging in. The interface looks like Google Calendar’s (GCal’s) interface. Each meal is analogous to a GCal event and can be handled the same way. If the user wants to view more details for, edit, or delete a meal, he can click on it, which will generate a pop-up with those options. The user can specify the size of the time range that he is interested in (i.e. single day vs. week vs. month). He can also specify the time range by navigating the small calendar that’s shown on the left side of the page. If the user is only interested in seeing certain meals (e.g. breakfasts and lunches but not dinners and other), he can do that by toggling the four labels that are shown under the small calendar. In addition to viewing his food history, he can also add a meal by clicking on the “Add Meal” button above the small calendar, which would generate a pop-up with the form to enter details.

...

An added item instantly appears in the history, so if the user made an error in an entry, he can immediately see it and click on it to fix the error. Every decision is reversible (e.g. a toggle can be untoggled).

Anchor
FoodStock FoodStock

Food Stock (top)

The items in the user’s Food Stock are shown in a list grouped by food group (vegetable, fruit, grain, meat, poultry, and dairy). There is an Add Item button at the top that allows the user to add something to the Food Stock. Similar to the Add Meal button in the Food History tab, clicking it will show a pop-up with the form to add details instead of redirecting the user to a separate page. To edit an item, the user can click on the item, which will show a pop-up that looks like the pop-up to add an item.

...

We chose to have the add item/edit item dialogs appear on the same screen as the Food Stock instead of navigating to a different page so that all information is visible. This lets the user see what he has or has not entered yet, which helps him correct the type of mistakes that Fred made when he forgot to input the last item on his grocery receipt. Once an item is added/edited/deleted, the changes are immediately reflected on the page. This helps Fred correct his asparagus mistake sooner rather than later.

Anchor
Analytics Analytics

Analytics (top)

This tab initially contains four pictures (only three are shown in the storyboard). Each one represents a different way of cutting and showing information about the user’s eating habits. The four ways are by food group, cost, location, and calories. Each image is a link to more detailed information about each area. Each image is a graph of the overall trend in their respective areas (e.g. the one that’s displayed for cost shows the amount of money that the user has spent across some time range). After the user clicks on one of the four images, he will be redirected to the appropriate page with a bunch of graphs and widgets to specify the time range that he wants to view analytics for.

...