January 12, 2010 1

Rethinking Recipes

By in Experiments in Info Design

A pretty startling change happens when you become involved in a relationship – you begin to eat foods that come out of a pan instead of a box.  There are a lot of reasons couples cook together – for enjoyment, as a hobby, or because it simply stinks to cook a meal and have no one to enjoy it with.  Regardless, this was a change that I experienced when I began dating my present girlfriend.  We began to cook together.

Now, when I say “cook together”, what I mean is her instructing me on what to do and when while she managed the kitchen.  I am usually relegated to chopping vegetables while she mans the cookbook.  However, once in a while I take a look at the recipes to predict what she will tell me next.  As I spent more time with these recipes, I began to realize that they aren’t very easy to follow.  The steps to get from a set of ingredients to a final dish can be relatively complex – requiring multiple steps, sequencing different tasks, and making sure the right ingredients are ready at the appropriate time.  However, regardless of the complexity of a dish, all recipes follow the same general format.  Below is a recipe taken from VeryBestOfBaking.com for chocolate chip cookies:

A common format for a recipe

I’m sure it looks very familiar to you, since almost all recipes follow this blueprint – a list of ingredients followed by a step-by-step set of directions.  In this case, there are only three steps!

However, if you dig a little deeper, this recipe is a bit more complex than it lets on.  Within step two, there are actually a number of things going on.  We’re combining three ingredients over here, while combining a few more ingredients elsewhere, adding eggs, than adding that first set of ingredients to the first.  Than we’re scooping onto a pan and baking.  While not difficult, it certainly requires some brainpower to piece together a sequence that makes the process efficient and enjoyable.

Perhaps there is a better way to design a recipe, using common design principles to make them more understandable from the start.  Let’s start with a list of questions, and see if we can end up with a recipe design that makes more sense.  Here are some common questions I might ask when preparing a dish from a printed recipe:

  • How long will this take?
  • How much will it serve?
  • How difficult is it?
  • Which ingredients do I need?
  • How much of each?
  • Which ingredients go together?
  • Where do I start?
  • How can I split the recipe among different people?
  • When should I do what?  What sequence of tasks should I perform?

Now, answers to all of these questions can be determined from the recipe above.  However, as I mentioned, it might not be immediately apparent, meaning you are spending more time interpreting the recipe and less time cooking.  So let’s try to improve our recipe design.

Let’s start with the first set of questions – how long will it take and how many will it serve?  Because these are both quantifiable and easily understandable answers, the method used in the recipe above is appropriate – just list them:

We’ll leave the question of “how difficult” to the end – the reason will become apparent.  So let’s tackle the next set of questions – a list of ingredients and quantities.  This is something that I find extraordinarily frustrating when I’m using a recipe.  I find myself going back to the recipe time and time again to check quantities and the list of ingredients.  Let’s use redundancy to make this a little bit easier to understand and remember, and at the same time, establish a visual language for ingredients that we can carry from recipe to recipe.  For example, some of the ingredients for the recipe above might look like this:

A list of visually engaging and simple to understand ingredients

There are a few benefits to a list of ingredients shown in this way.

  1. I’ve chosen colors that more or less can be associated with the ingredient (I’m open to suggestions on the color choices – this is a quick prototype).
  2. I’ve chosen two-letter representations for ingredients that can be quickly scanned and processed.  For example, after using a book with these types of recipes a few times, you will no longer need to read descriptions for common ingredients – you will know that Sa is salt, and Su is sugar.  Those are a lot easier to read from across the room when you’re putting out a grease fire on the stove.
  3. I’ve chosen a simple and redundant way to communicate quantities.  Each actual quantity and its unit of measure is aided by a large, easily understandable representation of the quantity.  Most cooking quantities can be easily represented by a series of full and partial circles.

These three qualities make this list of ingredients, in my opinion, superior to a simple text listing.  My hope is that such a common “language” for ingredients will make reading and remembering a list of them simpler than it is today.

Notice, as well, that I’ve separated these ingredients into two distinct groups, using proximity to make the relationship between the top four ingredients stronger than the relationship between vanilla and flour.  This is intentional, because the recipe calls for the top four ingredients to be combined in one bowl, and the next three to be combined in a separate bowl.  Without any mental math, this design lets me quickly assign each of these ingredients to different parts of the workspace, making my job much easier – and answering the question of which ingredients go together without a single word.

Now let’s tackle the next set of questions – where to start, how to split a recipe for more than one person, and when to do what.  Notice that the second and third questions can be translated into the more functional questions of “What tasks can I perform in parallel?” and “Which tasks depend on other tasks?”.  In the original recipe above, the latter question is answered through the sequencing of steps, and the former is left to an individual to decipher.  This is clearly a flawed design that leaves a very important question to the interpretation and understanding of the chef(s).  What if we borrowed from the world of project planning, and used horizontal and vertical space to organize the tasks?  Simply, arrange tasks that can be completed in parallel in the same space vertically, and sequence dependent tasks horizontally?  While this increases the space a recipe consumes, it makes it far more approachable.  For example:

A recipe that uses horizontal and vertical space to show sequencing and parallelism.

With this design, I can very easily see which steps that I can manage while my girlfriend takes care of the important stuff (like adding the eggs).  It also helps me answer the question I deferred earlier – how difficult is this recipe?  In the original recipe above, they simply label the recipe as “Easy”.  Easy compared to what?  In this revised format, it is readily apparent that this is a fairly simple recipe because there are very few steps and very little sequencing.  The design above provides the chef with far greater context for determining what “Easy” means.

While this design isn’t perfect, my intent was to show how thoughtful information design can take something that seems as simple as a recipe and clarify it substantially.  Using redundancy, proximity, color, and space, decisions can be made more quickly and intelligently.  I also wanted to highlight the process that I think should be the foundation for all pieces of designed information.  We should begin with the questions we want to answer, and let principles of design guide us to an appropriate outcome.

I will be interested to hear recommendations for the improvement of this design and its potential downfalls.  For example, I think it would be interesting to add another element to visually describe the utensils and kitchen hardware one might need for a recipe using simple icons.  I also played around a bit with using similar colors for ingredient food groups.  For example, all fish could be made a hue of blue, while all dairy a shade of yellow.  The common visual language for ingredients is admittedly challenging, because there are only so many colors and many, many ingredients (though I’ve increased my options by coloring both the text and the background).   Still, it would make for a very pretty and useful cookbook.

I’ve included two “pages” from such a cookbook in this attached pdf (please pardon my lack of advanced graphic layout skills).  Notice that the first set of information on duration and quantity is included in a less prominent portion of each page.

What else could make recipes more engaging?  More helpful?



Powered by Facebook Comments

One Response to “Rethinking Recipes”

  1. Rox says:

    I’ve discovered this through a comment you left on http://cooking.stackexchange.com and I think it’s a lot better than the classical way of presenting recipes and that it leaves a lot of room for adaptation to specific types of recipes, which the classic ones don’t.

    I always read recipes at least twice from start to finish, add up all the ingredients that are mentioned and check to make sure nothing’s missing (for blogs, because they usually don’t have editors to check them). This way of showing the recipe makes it easy to check, both by the writer and the one who’s cooking.

    This would also fit yeast dough recipes very well – I’ve done a panettone that was started one day and finished the next, with several additions every two hours and some extra prepping in the meantime. If the waiting time were shown on a timeline it would be a far more intuitive process and I think a lot more appealing than a long list of steps that are in themselves very simple.

    I hope you will continue working on this because it’s a great idea.