Tufte

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

(Filed under: Cooking For Engineers, Web 2.0)

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:

  http://img14.imageshack.us/img14/6332/tiramusu.gif

  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.