Here is a half-baked plan to illustrate recipes visually to make them easier to understand.
I’m not much of a cook. I rarely cook for myself. When I do “cook,” I mostly just heat things up. Sadly, except for when I make pancakes, I have not experienced the plaisir of cooking (that’s French!).
Why don’t I cook more?
- I wait to think about food until I’m hungry
- I haven’t learned many recipes
- I lack cooking vocabulary
- I find the textual format of printed recipes hard to follow
- It takes effort to acquire or find all the ingredients
- I have low confidence based on past failure
I think recipes should be communicated visually like a subway map. Show things on a timeline, so it is obvious what needs to happen concurrently. Use separate visual representations (like a flowchart) of ingredients, nouns (“mixing bowl”), and verbs (“mix”).
Here is an example for a Kentucky Bourbon Chocolate Walnut Pie (click for a bigger image).
This is a rough sketch, but I still think it is easier to read than 2 instructional paragraphs. Here is a more complicated recipe for Gyro-style lamb with cucumber yogurt sauce over Quinoa.
My sketch is clumsy, but I love the idea of working from left to right working to a simple conclusion. Sure, there are a lot of lines, but isn’t that preferable to how long this recipe is when written out.
Of course, I’d also like to use this visual format to create an iPad app that you can scroll around in as you cook. It should have integrated video to demonstrate important steps, and a “buy all ingredients” now button (via Amazon Fresh of course).
What do you think of this idea? Would it make it easier to cook? Please leave a comment below.
Aside: I did investigate whether there was a common electronic format for recipes. There is an XML based format, the ingredients and amounts are broken out, but the instructions are just a text blob.
Reall cool! It’s also kind of like sentence diagramming (except not nearly as tedious and much tastier). I think a sidescrolling format on a smartphone or tablet could work really well, and you could deliver that as an app, or as an alternate view of any existing HTML5 recipe page. Expanding or collapsing action nodes like ‘toss together’ and ‘top with’ as you scroll them into view with a tap would reduce clutter, and there is probably a way to link ‘divided’ or ‘combined’ ingredients from earlier steps so you don’t have to draw an interruptive linear connection from beginning to end. (But if you really do want a high-level view of the entire process, fully-expanded is always an option.)
Color coding heating/cooling steps is really smart, too – it focuses attention on key cooking stages. Overcomplicating things: should this also function as a checklist, so you tick off the ingredients and combinations and move on to cooking only once you have them all in place? That way, you don’t forget the baking soda?
Great idea (and good feedback by Matt).
Really does feel like I could just pick up the flowchart an cook with it — no further istructions needed.
True, the gyro recipe was harder to follow. Seems like it’d be easier to read if ingredients that are used in 2 different steps were broken up into 2 “blobs” so that you don’t end up with those diagonal lines cutting through the diagram.
One more thought: time-based steps (e.g. “simmer for 12 minutes”) could be clickable, which would start a timer with an alarm.
Brilliant! Yes, I’m a visual thinker but I think this kind of visualization could be broadly useful. I agree with Matt about clicking/tapping to expand/collapse nodes like in most mind mapping applications and I love the idea of diving in for term definitions or instructional video. The Gyro style lamb recipe seems a bit confusing at first. Perhaps the process could be shown more clearly if the ingredient nouns hung directly down from each verb along the x axis (time) rather than being shown at the beginning of the process and requiring lines to indicate where and how they’re used. I also think vertical lines communicating a time scale could be helpful and maybe even a moving “now” line indicating where you should be in the process. Of course, you’d need to be able to drag that line if steps go more slowly or quickly than expected. All in all, an awesome idea Adam!
Matt & Scott, thanks for the excellent ideas. I love the idea of a “playhead” position (like in audio editing) or perhaps an expanding/contracting “critical path” (bolded main horizontal line).
Brilliant, Adam! It would be such a cool crowdsource project to create a vast database of visualized recipes… These’d be searchable as images, too!
Your pie recipe was pretty easy to follow. I found the gyro recipe really difficult with the lines cutting across each other. Perhaps color coding wet and dry ingredients along with ingredients that get split / divided being displayed further in some other fashion to indicate that the entire amount is not used in one place.
Though I have to admit, I found the written version of the gyro recipe a lot more readable. That might have something to do with how much I understand recipes though 😉
I am a very visual person and I like to cook. Your ideas on representing it more visually will make things very easy for me. thanks!