Research Synthesis Design Solution

Low-Carb Life  


02 Sketches

Home Page Sketches

We went through a number of home page sketches and considered other content which might be helpful to our user base. Additional content such as articles and personalized content would make the grid of the home page more interesting as well as provide support for our users.


Navigation Sketches

We realized our site roughly had a 3-layer hierarchy: home page, a series of category listing pages, and individual recipe pages. Here are some ideas for making the navigation manageable.

This design had the major categories on the left, the recipe list within the category in the center column, and the recipe detail on the right side.


In this sketch, we discussed the idea of categories having non strict sub-categories. That is, the chicken category would show all chicken recipes but one could traverse into lower subcategories to narrow the scope of the browsing activity.


In this sketch, we considered a structure where going into a category would bring you to a page where the listing of the recipe names was on the right and the recipe details were in a frame on the left.

Listing Sketches

When we were walking through our users tasks, we anticipated a lot of time would be wasted moving from a listing screen to the detail of a recipe and back. We discussed several designs as depicted in the following sketches.

We considered an interface which relied on mouse-rollover to help the user quickly flip through a listing of recipes like they would in a recipe book. The left column was a listing of recipe names. A mouse over would bring the detail to the screen on the left. We abandoned this idea when we realized that the user couldn't skim quickly to get the relevant information they needed to select a recipe.


A more detailed rumination of the same idea. One problem with rollovers over listings is that the user could accidentally move the mouse and lose focus on the desired recipe. We considered letting the user click on a recipe to "lock" it in right frame. Unlocking the frame to return to mouseover proved to be tricky to design.



We then realized that we needed to move recipe information up into the listing because the user needs more than a recipe name in order to decide whether it's worth looking at the details. We believed that recipe search was a matter of elimination and that it was important to move up information about major ingredients up to the top. This meant the user could quickly look at the ingredient list and eliminate a recipe if she lacked the item or was not fond of it. We also moved up some vital statistics like Phase, Carbs, and Prep Time.


In the recipe listing, we also wanted to put in a short textual description of the recipe. Also, we wanted to aid recipe elimination, by indicating which recipes required special equipment. We were also concerned about the visual ugliness of long, thin horizontal lines of text. We considered breaking up each listing into 3 columns where the textual listing would be on the left with the recipe name, the ingredients list would be in the middle column, and the vital stats and special equipment information would be in the right column. Using this structure, a person could just scan down the middle column to look for a set of ingredients that matched what they had or were willing to buy. We discarded this idea because we were concerned it wouldn't be obvious that rows of the grid were higher in the information hierarchy than columns.


IID 2005 . Human-Computer Interaction Institute . Carnegie Mellon University