recipe affordances

Like quite a few folks, we’ve been doing more cooking at home during the 'Rona Isolation Time. I’m no stranger to the kitchen, but there’s something about it that feels different when you no longer have the option of not cooking and you need to plan a week or more in advance due to limited opportunities to obtain ingredients.

Once thing I’ve noticed, particularly when we were first trying to stock up a bit early on, in advance of the RIT starting in earnest, is that the way recipes are formatted kinda sucks. I think we can do better.

(Disclaimer: aside from a desultory web search or two, I haven’t really sought out any existing prior art on this topic — but, nor did I really find any prior art in those searches, either. If you’ve seen this sort of discussion elseweb, please let me know.)

the anatomy of a recipe

So, what’s a recipe typically look like? In my experience, recipes are usually divided into two sections: ingredients and instructions. (Unless you’re a food blogger, in which case you might want to argue for the critical third section, the background story of the recipe…)

Here’s an example I pulled out of our house wiki, a recipe for Caesar salad dressing:

## Ingredients

- 6-12 cloves garlic, minced
- 1 tablespoon Dijon mustard
- 1 tablespoon Vinegar
- 2 tablespoons mayonnaise
- 1/2 cup olive oil
- Salt
- Pepper
- Lemon juice

## Directions

1. Combine garlic, mustard, vinegar and two pinches of salt in a bowl and whisk thoroughly.
2. Add mayonnaise and blend together to form a thick base.
3. In a slow stream add olive oil, whisking constantly.
4. Season to taste with salt, pepper and lemon juice.

(Adapted from http://www.foodnetwork.com/recipes/caesar-salad-dressing-recipe/index.html)

For the non-techies: that’s written in a very loosely structured language called Markdown, which converts well to HTML. I’m going to keep showing things in Markdown; just keep in mind that when it’s actually displayed on our wiki, it looks more like this:

the Caesar recipe rendered to HTML

If you take a look at the original recipe mentioned in the footer of my version, you’ll see I haven’t really altered that much: I upped the garlic (I mean, of course I upped the garlic) and I took out the anchovies. I also split the crouton part out into a distinct recipe in our wiki (which I’m not going to show you), because I don’t always make both recipes when I’m making a salad.-

let’s cook!

So, we’ve got the ingredients list — which actually contains some preparation instructions as well — and we’ve got the instructions. How are we going to go about using that information to actually cook the recipe, starting from scratch? First, we’re going to need to go shopping — but before that, we’re going to need to make a shopping list.

Gaze back up at that list of ingredients. Is that in a useful format for making a shopping list? No. Just to pick on one specific example, when I actually make this recipe, I buy fresh lemons and juice them. (I’ve found bottled lemon juice is usually too sweet and not acidic enough to make a good salad dressing.) But that’s totally not clear from this list, nor does it give you any idea how many lemons you might want to get to juice. The list of ingredients should probably also include some romaine lettuce, lest we end up with a dressing and no salad to put it on. (Yes, I have done this in the past.)

So, after we extract the necessary information from the ingredients list and convert it into a shopping list-friendly format, make the trip to the store (or, given we’re in the RIT, arrange the delivery or pickup…), and then get our stuff back home, then we need to start cooking, right?

Not so fast, buckaroo! Remember, as always, mise is life. Before we can cook, we need to prep. What do we need to prep? Where is that information? What sorts of kitchen equipment or tools are we going to need to do this prep? Where’s that documented?

This is where things start to get seriously shite with how we write recipes, dear reader, because that prep information could be (1) in the ingredients list (e.g., “6 cloves garlic, minced”), (2) in the instructions (for the recipe above we’re going to need a bowl, some measuring cups and spoons, and apparently a fricking whisk), (3) completely unstated anywhere because it’s just assumed as part of the base knowledge of all cooks (e.g., how does one “season to taste”, anyway), or, in every recipe I’ve ever cooked from, (4) ALL OF THE ABOVE.

(Aside: I have a special dislike for recipes that involve lots of ingredient prep of several different things, but don’t make it clear that you’re going to be adding them all at the same time, and can prep them all into the same dish to make it easy to chuck them in all at once. Looking at all y’all, every stir-fry recipe ever…)

Assuming we make it through the preparation phase, then we have the actual cooking part of preparing the recipe. These steps are all (almost always, anyway) part of the instructions part of the standard recipe format, and most of the time are pretty straight-forward — as long as you can keep the “cooking” steps distinct from all the “prep” steps that are mixed in among them.

we can rebuild them

Hopefully I’ve convinced you that the traditional recipe format is crap. What’s a better recipe format look like? I think recipes should have four distinct sections:

  • the ingredients list, split into things you’ll probably have on hand and things you’ll need to buy (and suitably formatted to be copied-and-pasted into a shopping list document)
  • required and optional kitchen equipment
  • prep steps that can be done some time in advance
  • the actual cooking steps

If we rework the recipe above in my proposed format, what’s that end up looking like?

## Shopping

- 1 head garlic
- 1 head Romaine lettuce
- 3-4 lemons

## Staples you might need to restock

- Dijon mustard
- White wine vinegar or plain white vinegar
- Mayonnaise
- Olive oil
- Salt
- Black pepper (or white pepper if you want to be extra fancy or don't
like seeing black pepper flecks in your dressing)

## Equipment

### Gotta haves:

- Chef's knife
- Mixing bowl, medium sized
- Measuring spoon, tablespoon size (15 mL)
- Measuring cup, 1/2 cup size (120 mL)

### Nice to haves:

- Cutting board (if you don't have one, just clean a counter and cut
things directly on it)
- Paring knife (you can use the chef's knife, just be careful)
- Juicer (you can juice lemons by hand if you need to)
- Salad spinner (wet lettuce ain't the end of the world, or you can
pat dry with paper towels)
- Whisk (if you don't have one, you can just use a fork)

## Preparation

1. Peel 6-12 cloves of garlic. If any cloves contain green shoots in
the middle, split them with a knife, and remove the shoot. Mince
the garlic finely and place into the mixing bowl.
2. Place the lemons on a cutting board or counter and lean on them,
repeating 3-4 times while rotating the lemon. (This breaks up the
lemon a bit internally, making the lemon produce more juice.) Halve
the lemons and either squeeze or jucie. Set the juice aside.
3. Rinse the Romaine lettuce well. Cut the base of the head off and
discard. Cut the lettuce into bite-sized pieces (or, if you prefer
a more "rustic" salad, tear into pieces with your hands). Spin dry
if using a salad spinner, or otherwise dry (or don't!) and then
store in the fridge until right before dressing the salad.
4. (Right before starting to cook) Measure out the olive oil into the
measuring cup.

## Cooking

1. Add the Dijon mustard, the vinegar, the mayonnaise, and a pinch or
two of salt to the garlic in the mixing bowl. Using the whisk or
fork, combine into a thick paste.
2. While constantly stirring (with whisk or fork), slowly pour a
stream of olive oil into the mixing bowl. You want to go slow
enough with your pouring that there is never a large amount of
un-mixed-in olive oil -- the goal is to keep it mixing into the
dressing until it's all completely mixed in.
3. Taste the salad dressing, then add some lemon juice and mix in,
and taste again. Repeat until you reach your preferred level of "bite".
4. Add some salt and pepper. Mix in, taste, repeat until you reach
your preferred level of seasoning. **NOTE:** You probably need to
add more salt than you think.
5. Retrieve chopped letture from fridge. Toss well with dressing,
plate, and serve.

Doesn’t that seem better?! Doesn’t having the different activities you need to do in order to prepare the recipe split up into distinct sections make it easier to follow, and easier to understand what needs to happen when, what you’re going to need to buy, and what tools you need to have?

Now, admittedly, I went a bit overboard in a couple places: when I actually rewrite my recipes into this format — which I am planning on doing — I’m probably not going to write “remove the green shoots” each and every time a recipe calls for minced garlic. I’m probably not going to point out you’ll get more juice from lemons and limes by applying pressure to them first. However, since I’m going to be (re-)writing these recipes for the web, I very well may make a “minced garlic” recipe stub and link to it from every recipe!

why is this not more of a thing? let’s make this more of a thing!

Thanks for sticking with me through my ranting and half-baked ideas on how to format recipes for better affordance. As I said back at the top, I’m sure this is not a novel topic; I’m sure somebody — probably many somebodies — has written about this in the past. If you know of any examples, do please let me know.