The Daily Digest - Design #3

Index

1. Scenario Changes
2. Storyboard
3. Usability Analysis

Scenario Changes (Top)

For the most part, I use the same scenario as written on DailyDigest - Designs. There are some few modifications, however. I've outlined the modified scenario here.

• Fred is an experienced user of Daily Digest
• He just got back from a shopping trip to Trader Joes
• He wants to enter the foods that he purchased there
  • Enters items, and accidentally misspells asparagus
  • Goes to correct that spelling
• He wants to enter the past three meals that he's eaten (last night's dinner, todays breakfast and lunch)
  • Receives phone call after entering last night's dinner and is distracted
• Fred wants to look over his past meals
• He wants to view statistics about his eating habits
• Fred logs out

Storyboard (Top)

Fred goes to the Daily Digest login page and clicks “Log In.” A window pops up asking for his MIT Certificates. After logging in, he's greeted with a page titled “The Room.” Deciding that he wants to enter the foods that he just bought at Trader Joes, he clicks on “The Fridge.”

He's greeted with a page titled “The Room.” Deciding that he wants to enter the foods that he just bought at Trader Joes, he clicks on “The Fridge.”

 
On The Fridge page, Fred sees a list of the food that he's recorded on the inside of the right door. He can scroll through the alphabetical list of items. On the left, he sees the menu to add new items to that list (hereafter referred to as “the fridge list”).

The first item he adds is a gallon of milk. He types the name in the “Food Name” text box. Underneath, he selects “Gallon(s)” from the drop-down menu for units, and enters “1” in the amount text box. He then enters the cost and calories in their corresponding text boxes, and finally checks the checkboxes corresponding to the “Dairy” food group.

After he types everything, he clicks “Add to Fridge”, and the milk immediately appears in the fridge list. He reaches into his actual fridge to put the physical milk away, and notices that his 2 Liter of Sprite is almost empty. Fred pulls it out and drinks the last bit, and turns back to the Daily Digest.

Having just finished the Sprite, he navigates to it in the fridge list, and clicks the “Delete” button associated with that entry. A confirmation dialog appears, on which he clicks “Yes.”

He then goes to enter the asparagus that he's purchased into the fridge list. He fills out all of the information, and then hits “Add to Fridge.” It is added to the fridge list and the list scrolls up automatically to make the asparagus visible. When it appears in the fridge list, he notices that he's spelled “asparagus” incorrectly. He clicks on the “Edit” button associated with the asparagus. The entry becomes highlighted in the list, and all of the information populates the form on the left. He fixes the spelling and clicks the “Add to Fridge” button.

He then clicks on “The Meals” tab on the navigation bar (nav-bar) on the left edge of the screen to enter the most recent meals that he's eaten.

 
On The Meals page, Fred is greeted with a familiar interface. He begins to enter dinner fromlast night. 

He first selects “Dinner” from the drop-down menu, then names the meal “Spaghetti at Baker”. He selects yesterday's date from the date-picker, and guesses at the time of the meal to the nearest hour.
 
He ate at Baker Dining the night before, so he can't just add foods from his fridge list. He enters the things he ate using the same interface as the one for adding items to the fridge list on The Fridge page. As he clicks “Add to Meal” for each item that he's entering, they appear in a list on the right (hereafter referred to as “the meal list”), which sorts itself alphabetically.
 
After he is satisfied that the meal list matches what he actually ate, he clicks the “Save Meal” button underneath the meal list. The list is replaced by the text “Meal saved in The Log,” which remains for a few seconds before fading away. 

 
Before he begins entering his next meal, Fred receives a phone call which distracts him. Returning to the task at hand, he realizes that he's forgotten what meal he was about to enter. He looks at the right side of the screen and sees the Previously Recorded Meal was a dinner which was named “Spaghetti at Baker.”
 
He begins to enter his breakfast from this morning, which he titles “Eggs.” He cooked this meal for himself, using items that he already possessed. He begins by selecting eggs from the drop down menu, and then enters “2” in the text box next to the label “Approximate Amount Consumed.” He checks the “remove from The Fridge” checkbox (not pictured) to remove the eggs from the fridge list. He clicks on the “Add to Meal” button and it appears in the meal list. At this point (and not before), the eggs are removed from the fridge list.
 
He then begins to enter the milk that he drank. He finds the milk in the drop-down list. It has “(1 gal)” in parentheses next to it, which is the amount that was recorded in the fridge list. After selecting “milk (1 gal)” from the drop-down, “(enter '1/16' for one cup)” appears to the right of the text box. (These tips appear based on the units of the item in the fridge list.) Fred finishes entering information about breakfast, and then does lunch as well. He then clicks on “The Log” tab in the nav-bar, having been overcome by a sudden curiosity at what he has recently eaten.
 

On this page, Fred sets the “from date” to a week ago using the date-picker. The “to date” (and also the “from date”) was already auto-completed to today. The list of meals (hereafter referred to as “the log” with a lower-cased “l,” not to be confused with “The Log” with a capitalized “L” which refers to this page) appeared on the right. Browsing through the list of meals, he noticed that he had already entered the dinner for today, which is strange because he only just finished lunch. He realizes that he entered the date wrong when he was entering last night's dinner. He clicks the plus sign next to that meal, and then clicks on the “Edit Meal” button. This takes him back to The Meals page.

 
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  (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.
  • Visibility
    • The page you are on is apparent because of both the title and the background
    • Rather than having the entire state of each meal be visible at all times, the more minute details are initially hidden.
    • The date range is visible, both from the date-pickers and from the log itself which shows dates on it.
  • Efficiency
    • The navigation bar allows the user to get to any other page with a single click
    • The date-pickers are auto-completed with today’s date, which will increase efficiency in the case where you want to review the day’s meals.
    • There are efficiency issues with editing and removing meal entries; they require extra clicks. Also, (with editing in particular), you actually have to go to a different page.
  • 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 meal entry into the log is completely editable and removable
    • When the user tries to remove a meal, a confirmation dialogue appears
    • If the user accidentally clicks on the incorrect date using the date-picker, it is easy to simply change it to the correct date. No permanent changes are made to the log on the right.
• The Stats
  
  • Learnability
    • This is the only page where I traded learnability for functionality.
    • There is really only one major task (viewing statistics) to be performed here, but there are many ways to perform it.
    • All of the fields are auto-completed initially to hopefully make it clear how to interact with the interface
    • Extended options only appear for relevant selections, so the user is not bogged down by extraneous arguments
    • The box on the right shows a help message initially, explaining what it does.
  • Visibility
    • This page is largely about visibility. The graph is constantly visible and displaying the results of the statistic over the date range and applying any extra parameters that might go along with it
    • The actual data points are not initially visible, but the user can view them by mousing over the graph
  • Efficiency
    • The navigational bar allows you to get to any other page with a single click
    • The user doesn’t need to go to another window or deal with any collapsing tables to accomplish what he/she needs to accomplish.
  • Error Prevention
    • The user cannot make permanent changes to anything in this view
    • The Manage Account and Log Out links are far removed from the rest of the interface
    • If you accidentally select the wrong option for any of the fields, it is quick and easy to update that field with the correct option

To Top