Orthogonal Thought | Random musings from the creator of Cooking For Engineers and Lead Architect of Fanpop






Posted 19 July, 2007 at 2:20am by Michael Chu

The Tufte one day class was pretty interesting, but I'm not sure it was worth the money. With a bunch of people that use Mosuki, we managed to get enough people to sign up to get the 25% off discount so I ended up paying $285 for the course. Along with the course, you receive all four of Edward Tufte's books - a $185 value if you buy them from his online store (or $133 from Amazon.com). That means I paid about $100 - $152 (not counting parking and lunch) for the privilege of seeing Edward Tufte in person, chatting with him about the CFE Tabular Recipe Notation for about three minutes, and hearing him teach out of his books. At these prices, it's not too bad for about six hours of lecture, but since almsot all the material is available in his amazingly well written and beautifully designed books, I'd have to recommend others to pick up his books first and read them.

Most of the time, ET (as he refers to himself) had us read a little from one of his books and inspect a chart or graph. It was interesting that it was clear that each person drew a different set of information from the same graphic. Tufte would then talk about what we should take away from the design of the graphic and what works and what doesn't. Unfortunately, if your'e a fast reader, you'll find that what he says is right there in the book, before or after the graphic of interest. This DOES reinforce one of the messages that ET repeated throughout the course - if you want someone to take away an idea, then don't just say it or present it, but leave them something that you've written down so they can read it. When you're done with your presentation, unlike a powerpoint or other presentation, the paper still exists and the audience member might refer to it again (perhaps during the next presentation or when they get bored) and your ideas keep coming back to life. There is truth in this - one sheet of paper filled with considered information can be more useful and enlightening than a whole series of presentation bullets and summary points and action items. ET does a phenomenal job with his books, so I encourage you to read them if you are at all interested in either the theory or the practical side of presenting data (simple or complex).

Since I was there, I thought I'd take the opportunity to ask ET about what he thought of the recipe summary tables that I use on Cooking For Engineers. I hadn't thought about this ahead of time or I would have made some decent print outs of the format, so as it was, I only had the crappy business cards (which I made with VistaPrint a couple years ago). These cards are crappy because the back has a recipe table of Tiramisu but the color is wrong (they printed half tone grey instead of black that I specified), the line thicknesses were overly thick, some of the font was floating a few pixels higher than it should, and overall did not look like the Adobe Illustrator design that I sent to the printing company. I never got another set made because I felt I should pass all of these out before spending more money on business cards - which probably have a minimal impact on the success of Cooking For Engineers (seriously, how many of you have seen one of my business cards? I bought 500 two years ago and have passed out over 300, but that's three orders of magnitude smaller than the number of unique visitors that read Cooking For Engineers each month). His feedback was to fix the font (talk to a typographer), remove the gridlines (all of them - they were redundant; the typography should dictate shape), and don't show the cards to anymore people until I get the design right and the printing right.

Now, I can understand about the font (but Gill Sans doesn't come with Windows and, believe it or not, that's 90% of the consumers on the web), but the gridlines seem essential for readability. It does look cleaner with a minimal amount of gridlines, but you can't read the table as fast and if you've printed it out and in the kitchen prepping, not having the gridlines means you have to take a few extra seconds to make sure which row you're working with. I've attached the images of a couple different alternatives that I tinkered with at the bottom of this post.

As to his final advice of not passing out the cards, well, I can see the logic in that if my business was designing or based around the recipe summaries. The problem is that I teach people about food and how to cook, so it doesn't make sense that I should stop passing out cards because I haven't gotten it perfect yet. Hell, that goes against most of the Web 2.0 philosphy of being agile - give people what you've got and iterate! So, I'll keep giving out my cards and keep thinking about what to do about my next batch (mainly I need to change vendors since VistaPrint did a really crazy job rasterizing the Illustrator file I gave them - I was appalled at how different from the source the final output was).


Minimized gridlines (I couldn't bring myself to take them all away - it was unreadable; ET said not to worry about it and the typography would dictate the row spanning, but I couldn't figure out how to do it and still have it render in basic HTML with CSS):
Minimized Gridlines

Finally, I played with a version that used color blocks to dictate spanning. This is kind of a time consuming process since picking good colors that form a natural flow will be dependant on each table:

What do you think? Are these two better than the original? (I think they look better and are more artful, but I don't necessarily think they are more readable.)

11 comments to Tufte

WmD, July 19th, 2007 at 6:23 am:

  • I've always gotten lost in the lines of the tabular notation (although I love the concept).

    So, I like the color blocks more than the other two.

Milo, July 19th, 2007 at 7:51 am:

  • I like the color blocks, although it makes me wonder what it would look like if you also "block" the ingredients. Then again, that would just bring you back to having gridlines.

    Something interesting happened when you removed the gridlines. In your first image, the "shavings of unsweetened dark chocolate" box stopped early and "cover" had to stretch to meet it. In the other two images, "cover" is not stretched at all. When you apply this idea back to the original image, you get a version that I think might be better than the original: http://img477.imageshack.us/img477/313/tiramusutrnyd6.gif

Trey Jackson, July 19th, 2007 at 9:42 am:

  • Interesting - I just missed out on going to his class (but my boss will be, so I'll get the books that way).

    I find the middle card to be impossible to read, the groupings are just too difficult to parse out.

    The colored blocks is better, but in some of your recipes the list of ingredients is long and the table wide, in which case the colored blocks would do a poor job of grouping (because it'd be tough to see which of the ingredients way on the left correspond to the block on the right).

    That being said, the original does have a few too many lines.

    I found it interesting that the lines you chose to remove were the horizontal lines, I would have removed the vertical lines at the end of the ingredient portion of the list.

    Or, perhaps extend the coloring of the first set of blocks to the left in order to include the ingredients. Though that might be awkward in recipes that really have a progressive (add X, then add Y, then add Z) flow.

glyphobet • глыфобет • γλιφοβετ » Blog Archive » Tufte & Tiramisu, July 19th, 2007 at 11:17 am:

  • […] Michael's post with his redesign ideas, and check the comments for ideas from his […]

||      timoni.org      ||, July 20th, 2007 at 1:43 am:

  • […] Since I'd arrived ten minutes before the course started, I hadn't realized (unlike this attendee) that a lot of what he was saying aloud was quoting verbatim from his books. I did, however, […]

Kim Lindsey, July 28th, 2007 at 8:21 am:

  • I absolutely love the colored blocks version. It is by far the clearest (and the prettiest - though that's totally irrelevant!).

Michael Chu, July 28th, 2007 at 6:28 pm:

  • As suggested by my mom, the colors should go all the way to the left to either include the ingredients or go right up against the right edge of the ingredients list - that will make it even easier to read. Unfortunately, the color method is the most time consuming method and won't look that good printed…

Aaron Traas, October 8th, 2007 at 1:32 pm:

  • The color method is the nicest looking, but your original method is more readable. I disagree strongly with Tufte's recommendation; I find the lack of lines, because it's so much text that just blends together, make it harder to read because there isn't discreet grouping.

    I showed your site to a friend of mine, who's an actuary, he scrolled down to the recipe card and commented on how it was so simple, and so very obvious. Adding color to this would allow you to get rid of the horizontal lines, but I'd go by your mother's suggestion, and do the colors all the way to the left.

    Another option would be to build the recipes in XML, and write a little Ruby or PHP script or whatever to parse the XML and generate the card, that way you can play with different formats, and keep your data separate from your presentation.

Case Larsen, August 3rd, 2008 at 2:03 pm:

  • Maybe just more horizontal white-space? Yes many things can be done in parallel which is why they are stacked on each other vertically, but making the recipe longer horizontally may make it more readable and less packed?

unordained, January 9th, 2009 at 12:02 pm:

  • Original: yes, too many lines.
    Verticals: too few lines, hard to tell what goes where.
    Colors: won't survive faxing or copying, painful to freehand for a friend.

    Other things to try:

    Instead of |mix, try ]-mix, with short tips on the brackets and maybe a central dash to the verb, to avoid the full lines of the grid but still give you an "idea" of inclusion. (That works well enough for first ingredients, or combinations of results of actions, but you'd need longer tips to reach back to ingredients later on, when a short tip just doesn't help anymore.)

    Flip the diagram horizontally, putting the ingredient list on the right (keep the left-justification, as it's important as an ingredient list, but it hurts the diagram readability), with the flow going left from center. Maybe combine that with indenting ingredients to their earliest point of use? But then that'd defeat the useful left-justification.

    More generically:

    Is the order of nouns clearly defined? "dip" and "cover", for example: in this case, it's "dip into" and "cover with", assuming "up" is "left" in the grammatical sense. These are trivalent verbs, with (0) being the imperative "you". So it's (0) dip (1) into (2), and (0) cover (1) with (2), while "mix" is essentially divalent: (0) mix (n) together. It would be hard to dip liquid into fingers, or cover cocoa with everything else, but with "fold", you may want to make sure people know what's being folded into what. Your diagram follows this convention, but is that on purpose?

    Do you have a standard way of indicating splits? The chocolate cake recipe I see on the site simply has a step of "assemble and frost"; it glosses over instructions you typically see in recipes such as "use a quarter of the frosting between each of the 3 layers, assemble the layers, trim the outer rim, then use the other half of the frosting on the outside". The frosting isn't an original ingredient (hopefully), so simply showing it twice on the left side wouldn't work. Thoughts? (Apart from my example, this is "graph reduction", and still a cleaner way of representing it than a lot of angle-bracket diagrams you can find for it on google. *shiver*)

Shawn Dowler, April 14th, 2009 at 4:12 pm:

  • Building on Milo's idea, I think I like the ingredient box extending and terminating in a vertical line, but I think the ingredients that are used together in the first step should not have lines between them. This makes it easier (for me, at least) to read the recipe at a glance. Here's an example:


    I would also probably use lighter gridlines (meaning gridlines only slightly lighter or darker than the background), which is something Tufte would probably recommend in lieu of removing the gridlines altogether. I would be interested in his take on the recipes on the site since that would provide more context for his analysis.