This started because I got surprised by a recipe that slipped in a “put in refrigerator for 24 hours” in the middle of a paragraph – great for developing flavor, not so great when you have dinner guests coming in 2 hours.
Yes, it’s my fault for not reading through the recipe thoroughly, but surely some of the fault is for the design of the recipe format to not point out such an unusual requirement.
So, as I typically do, I ground my gears over this and started to come up with a solution after waaaay too much research and thought.
Early Recipes
Here’s an example of an early recipe:
Remove stones from green, black or mixed olives, then prepare as follows: chop them and add oil, vinegar, coriander, cumin, fennel, rue, mint. Pot them: the oil should cover them. Ready to use.
No amounts, no timing. You’re kind of on your own, and the recipe could easily be mistaken for incomplete. However, you have to keep in mind these recipes were meant for full time cooks who knew their way around a kitchen and really just needed suggestions for ingredients. The reader knew what to do with cumin, fennel, etc. and probably gathered them.
As fine cooking became more democratized, though, the recipes needed to be more complete for cooks who may not be as competent. Here’s an example:
The above recipe is better, but the intent of the design is, presumably, to list ingredients so the user can scan and ensure they have all the ingredients before starting. The intent is NOT to use this recipe as you are in the kitchen. It is not easy to scan the measurement of an ingredient, it is not easy to find which step you are on if you lose your place, and there is no indication what equipment or technique will be needed for each step. It could use a redesign.
Ingredients List Corrected
The ingredient list needs to be scannable – in two different ways. It needs to be scannable for the measurement (Tablespoons, cups, liters, etc.) and also the amount of that measurement. This means creating a list with multiple columns that are carefully spaced horizontally. The Gestalt Principal of Proximity dictates that each ingredient must be closely spaced so they are recognized as single ingredients.
This seems to solve the problem, but this needs to be tested. If the user does not recognize this as a list of three ingredients, then it has failed. If, on the other hand, it is recognized as such, but still scannable so the user can quickly find the amount and measurement as needed, then this design is successful.
Sectioning the Recipe
Another issue with the standard recipe is that dishes often require two or more separable processes but the visual recipe is not shown as separate sections. The poor cook is often surprised they need to pull out another bowl or prep a frying pan. The solution is to create sections visually, and to pair them with the ingredients (as above) and instructions.
Equipment List
Finally (for now), we need an equipment list. It would be very easy to add that to the overview section of a recipe, but since we already have sections, why not list the items in their own column by section? That way the cook can scan the tools needed, and know which is coming up in the next section.
Putting it All Together
Here’s the final version, which hopefully solves all the pain points to the standard recipe. I’ve included a fairly standard overview with the recipe, with one exception – changing “Total time” to “Total Time to Plate” which, in my opinion, is more accurate.
UX UNbound 