Page History

...

 
     He changes the date, and clicks the “Save Meal” button. He receives confirmation, and that
dinner is now listed in the “Previously Recorded” section. He clicks on the meal title in the Previously
Recorded section, which takes him back to the entry for that dinner on The Log page.
 
     Satisfied with the log, he decides to check out some analytics. He clicks on “The Stats” tab on
the nav-bar.
 

 
     Fred is interested in keeping track of two personal goals that he's set for himself. He wants to be
eating more vegetables, and he wants to be spending less money on snack food. The page defaulted to
looking at cost per day over the past month, so he decides to first look at how much he's been spending
on snack food.
 
     He decides that snack foods are generally either grains or sweets. He changes the drop-down
next to “per” to “Food Group.” A series of checkboxes appear underneath the graph: one for each food
group. They all begin checked, and there are a number of colored lines on the graph, and a map key on
the left side of the graph. He unchecks all but the “sweets” and “grains” boxes, and is content that at
least the trend is slightly decreasing.
 
     He then changes the drop-down boxes at the top to view statistics about “Food Groups” per
“Day.” The checkboxes remain in place, but all become checked again. He again unchecks all but
“vegetables,” and looks at the trend over time.
 
     Satisfied, he clicks on the “logout” link in the top right corner of the page to leave the Daily
Digest.

Usability Analysis 

Anchor
UsabilityAnalysis UsabilityAnalysis

To Top

* Overall
** This design is meant to be an extended metaphor for a dorm room, which will be extremely familiar to our target audience (MIT Students). This is intended to make the product more learnable in general
** In general, I valued making the product learnable and consistent (mostly internally, but also externally) over efficiency.
** Additionally, I generally valued visual simplicity over making all state visible at all times.
* The Login Screen
** Learnability
*** The login screen is very simple. We’re using MIT Certificates, so the user doesn’t even need to enter a username or password. The only thing he/she needs to do is click “Log In”
*** There’s not much to learn here.
** Visibility
*** There’s no real state to view. There are only two things you can do from this screen.
*** The Log In button is large and very visible
*** The sign up hyperlink is a little less noticeable because it comes after some text describing our product.
** Efficiency
*** This page only requires a single mouse click to move on, so it is about as efficient as it can be. The Log In button is very large to help with Fitt’s law.
** Error Prevention
*** The “Sign up” link and the “Log In” button are separated and it is unlikely for someone to accidentally click one when he/she intends to click the other
* The Room
** Learnability
*** The entire site is a metaphor for a dorm room. This is the main page where you can see the entire room.
*** There are only four clickable buttons (and two hyperlinks in the top right corner), and mousing over any one of them will display information about that button in the whiteboard on the right.
** Visibility
*** The stats link in the top right displays small versions of a few default statistics.
*** Besides that, there isn’t much state of the account that is visible from this page.
*** Each option is visible and obviously clickable
** Efficiency
*** I’m trading Learnability for Efficiency here; it might be more efficient to be able to perform common tasks from this main page. It would also be more efficient to have the options less spread out on the screen.
*** I did try to make the most common features large (in particular, The Fridge and The Meals). In fact, the clickable areas for each of the sections is quite large, which helps with Fitt’s law.
** Error Prevention
*** Each clickable area is spread out, so it is unlikely that you will accidentally click on one section while aiming for another section.
*** Mousing over any clickable area will give a message describing what will happen when clicking on that area
*** The “Manage Account” hyperlink and the “Logout” hyperlink are separated with a horizontal gap, so that it is less likely for the user to accidentally log out while trying to manage their account.
* The Fridge
** Learnability
*** The interface is internally consistent with The Meals
*** There are two tasks to be performed here; scrolling through the list of items, and adding a new item to the list.
**** Editing an item involves clicking the “Edit” button after finding it in the list, at which point the item moves to the “Add to Fridge” interface. It’s essentially a combination of the two tasks above
*** The section titled “Add to Fridge” has strong affordances for being able to add an item to the fridge.
*** It is plain to see that there is a scrollable list of items on the right side of the fridge. It might not be immediately apparent what this list is, however, and when the fridge is empty, the user doesn’t see a list there at all.
** Visibility
*** It is clear which page you are on from the title and the background
*** While entering an item, the user can see all of the information about that item at one time.
*** Once an item is in the fridge list, visibility is reduced to avoid clutter. You can no longer see all of the information about each item (cost, calories, etc.)
**** Clicking on an item’s name will reveal will expand it to allow you to see the hidden information concerning that item
** Efficiency
*** There is a navigational bar which allows you to get to any other page with only one click.
*** The navigational bar is on the far left, which is very easy to click according to Fitt’s law, when the window is flush with the left edge of the screen. This applies to all of the following pages that contain the navigational bar
*** Efficiency suffers a little bit because you can only enter one item at a time, and deleting an item requires a confirmation dialogue.
** Error Prevention
***

...

"Manage Account” and “Log Out” are both very separated from the rest of the interface, which makes it unlikely to click on either of those accidentally.
*** Each entry into the fridge list is completely editable, and removable.
*** When you try to remove an entry, you must confirm via a confirmation dialogue.
* The Meals
** Learnability
*** The interface is internally consistent with The Fridge
*** There are two basic tasks to be done here: adding food items to a meal, and saving the meal to the log.
**** Editing food items within a meal is analogous to editing food items in the fridge list
** Visibility
*** The page you are on is apparent because of both the title and the background
*** The contents of the meal are visible as the user enters more food items.
*** The previous meal recorded is also visible, which is meant to help the user determine which meal he/she means to enter next.
*** The user cannot see the contents of other meals that they have entered. This was partially to reduce clutter, and mostly because that is the explicit function of The Log page.
** Efficiency
*** The navigation bar allows the user to get to any other page with a single click
*** Efficiency suffers slightly because you can only enter one item at a time and deleting an item from the meal list requires a confirmation by the user.
** Error Prevention
*** The “Manage Account” and “Log Out” links are very separated from the rest of the interface, making it difficult to accidentally click one of those buttons when intending to click another.
*** Each entry in the meal list is completely editable and removable
*** When you try to remove an entry, a confirmation dialogue box appears.
* The Log
** Learnability
*** There are only three tasks to be accomplished from this page: selecting a date range over which to view past meals; viewing past meals; and deleting past meals
**** You can also edit past meals, but clicking on the “Edit” button takes you to The Meals page in order to edit a meal
*** Selecting a date range is intuitive because it occupies a relatively empty portion of the screen. Your eyes are quickly drawn to the date-picker.
*** Viewing past meals involves nothing more than scrolling through the list of meals on the right.
***

In 

...

order to view more information about a meal, you must click the 

...

“\[+\]” box next to the meal title. This is externally 

...

consistent with expanding a collapsed table

If 

...

you want to edit or delete a meal, you must first expand it. This 

...

will hopefully be intuitive because if the user wants to do 

...

something beyond simply viewing a meal, they would first attempt 

...

to press the “\[+\]” box because that is the only control that 

...

they initially have over the individual meals.

...

To Top