One of the challenges I’ve set myself this year is to write some sort of book about Yahoo Pipes. Reading Presentation Zen three or four weeks ago, I started to imagine the form such a book might take. What I aspired to was something uncluttered, something that would contrast with the typical confusion of words and ideas that tend to end up being dumped into OUseful.info; something like an artistic recipe book, perhaps, or an art gallery catalogue; the form should be decomposable, allowing sections to be removed or updated without too many side effects on the rest of the work; and the authoring environment should complement the the publication environment, enforcing constraints of the medium the book would be published into.
In short, something like Powerpoint done well, but for print rather than screen.
It seems (of course!) that Tim O’Reilly had already executed a similar idea in the form of the Twitter Book, as John Naughton pointed out to me a couple of days later.
You can read more about O’Reilly’s take on the philosophy behind this sort of representation in Reinventing the Book in the Age of the Web.
Anyway, I spent a weekend doodling ideas, and then left it a couple of weeks. Now I’m looking at it again, and I’d appreciate your comments on whether this sort of presentation works for you, (and if not, why not?), how it might be improved, how it might be simplified (but remain accessible to a novice) and so on. The numbering scheme used is not related to pages – instead, each “point” I make has a number, and these are referred to from the index (I drew inspiration for this sort of numbering from The Pengin Cookery Book). Comments on the level at which the technical content is presented, and the way in which I have started trying to develop a narrative, will also be appreciated.
I originally thought that the “book” should be printed in an A4 landscape form, but then I started to wonder whether two landscape A4 pages could be combined into a portrait A4 page. The font size is problematic, and the I don’t think the same layout works for the landscape vs. portrait view, at least, not as it currently stands.
Anyway, here are the landscape and portrait versions. I don’t think they work as embedded content, which is a shame, but they weren’t written for that sort of medium, so it’s to be expected.
(If you are reading this in a feed reader, you will probably need to click through to the original post in order to see the embedded documents.)
Please bear in mind, too, that I’m not a designer (this much will be be obvious), but that I do think design could play a large part in making this approach usable.
Please feel free to add your comments below:-)
OUseful.Info, the blog... 
Tony, I like the style and as a general intro to the topic this could be useful. But I just wonder about this as any sort of “book” – it’s probably wrong to generalize my own experience as being everyone else’s, but the last time I bought a book to learn a technical subject was probably 8 years ago. And it’s not that I haven’t learned a lot of technical things since then.
It seems to me the happy medium would have the flow and online basis of OUseful, but the style and readability you are working at here. It seems to me the difference is that in OUseful you are brain dumping your process at a high level of detail, which is fine but messy, whereas here you’re making a conscious effort to craft the message to a certain level of understanding. I guess I’m saying it’s a writing issue, not a format one, and format-wise, while you might *sell* some books, which I understand is important, it’s likely to be used by more folks if it was online.
Tony, I strongly support Scott’s comments: the style of the larger, commentary text is very appealing (and would indeed work as a supplementary voiceover); but it seems odd not to take advantage of hypertext/temporally spaced presentation in a project like this.
I’ve only a wee screen on my Mac, but with good design (see Nicola below, on ‘Wireframes’) I think you could achieve what you want in an online format, especially if you take advantage of varying levels of transparency. You can maximise that feeling of space (oh, so necessary – I felt quite ill looking at that Robofesta muddle ;-)) by allowing the viewer to select hypertext boxes at will.
Could something like VoiceThread (https://voicethread.com) work? Not that exactly, but with similar possibilities for voiceover/ pointing/ supplementary material? Again, with good design, I think there may be hope!
I’m aiming to learn about Pipes myself, but failed in your earlier tutorial (?OUseful post?). If you want to use me as a guinea pig, I’ll maintain myself in a state of eager naivete until you have some prototypes for me to play with . . . ;-)
I love this and would even assign it to the students. Needed! But I have to agree with Scott that fewer people would buy a book than follow a slideshow like those above or a screencast. If you could package all three together, that would be ideal. I’d buy the book, personally. But I’m not sure how many others would. Nevertheless, this is sorely needed and you know what you are doing.
whatever design would be i would like to see the book about pipes from you.
i can imagine the screenshots from pipes where some of the boxes are #comments box which explains more about the pipes flow.
@howard/@scott Thanks for the comments; I agree with you about the reach coming from an online presentation, but I wanted to explore the print form for a couple of reasons:
a) it feels different to the screen, and potentially offers better resolution and scale. BOoks are also artefacts and are to be enjoyed in a different way to things presented on screen. For me, this would be the sort of thing I’d skim over in the bath!
b) the book layout offers two surfaces to put the content on, so the two pages can carry different designs; e.g. I opted for an image page and then a page with 2 text dimensions on it. On screen, surface area is very much at a premium; scrolling gets in the way?
c) I have experimented with all on one page layouts before – e.g. I did a set of materials a long time ago for the Robolab environment (sample here: http://www.robofesta-europe.org/britain/download/resources0.2a/sample1.pdf [PDF]) that overlaid several dimensions of text on a visual program. (See also https://ouseful.wordpress.com/2009/04/23/how-to-create-wordcloud-from-a-hashtag-feed-in-a-few-easy-steps/ ) The examples in the post above can be recast to either of these forms, but they are both more cluttered and I wanted to go for a feeling of space. (I really need to read up on some design books, and starting looking at page layouts more critically! Got any recommendations?)
d) for the online delivery, then we can arguably get another dimension for free via an audio channel. So for example, I could use Slideshare to splash a title screen, explanatory screen (the larger text) and then go into the static image with narration corresponding the the small numbered text elements, or do either a narrated movie, or a silent vide with balloon popups, but again that’s not what I was after.
e) thinking more abstractly, the pages are built up of different components – images, titles, “why bother?” text and detailed explanatory text. These could be delivered in a feed powered way – e.g. thinking about the delicious browser bar of the previous post, we could click through the images and load explanatory text into a sidebar (i.e. I could probably publish the book via flickr or delicious and then build a viewer client for it) but again, that’s not the challenge I set myself.
(this is all getting very 50 ways, methinks!;-)
What I keep coming back to is that the two facing page layout I’ve used gives me three dimensions to play with (image, large text, small text), with the idea that the eye is primed by the title of the pipe on a facing page and then, as the page turns over, moves to the image on the left, across to the large text explanation, back to the image, up and right and into the numbered sequence, cross-referencing back to the image and moving round and down it with the numbers. SO we’re mixing circles and lines and encouraging a sense of flow, which is what happens to stuff going through the pipe. I’m way off being able to do this (not a designer, not a visual artist), but I want to try and find a way of provoking an experience of flow that somehow complements the flow of content through the pipe.
(this is: a) getting all very pretentious, and is: b) all very made up on the spot; but it reflects me reflecting for the first time on the sorts of thing I think page layouts might help to deliver ;-)
Hi re pagelayouts ‘I love wireframes’ might offer some inspiration:
http://wireframes.tumblr.com/
Great examples here of how good design helps you to make the most of limited viewing space, so perhaps there’s hope for an online version.
I enjoyed Doug Belshaw’s #movemeon 2009 – created with Twitter and Lulu. http://www.lulu.com/product/download/%23movemeon-2009/6170010
For me, the Slideshare approach doesn’t work – because I can’t read the text when it’s small, and if I have the full-screen version up I can’t be trying out Pipes or Googling the bits I don’t understand (RTW may be the simplest pipe – but I would kind of like to know what RTW means).
I’d like to be able to quickly and easily plot my photos onto an interactive map, but still haven’t worked out how to do it. And page 18/32 does make me feel I’ve stepped in out of my depth and should be doing something simpler first.
Wonder if Cohere would be a useful tool in this context – it could support annotation and discussion around the pages?
Tony, As someone who (1) has struggled to find decent tutorials on Yahoo Pipes and (2) is looking at this from a students, rather than a tutors point of view, I think your method in the post above presents the information in a clear and concise way.
Maybe it’s clearer to me now as I’ve had time to tinker with pipes. However, I still find it easier to read your presentation above, rather than using the minimal/unclear information on the Yahoo Pipes site and pipes discussion forum.
I like the way you’ve presented the pipes screenshot with the highlighted A,B,C,1,2,3 etc references and then concisely described why these highlighted areas are important. Having the asides in bolder text is useful too and indicates that the larger text is important, but in a different way to the highlighted A,B,1,2 etc references.
By not bombarding the reader with pages of text in one go makes the book more accessible. Reams of text, without screen shots would instantly put me off.
Whilst learning about Yahoo pipes I’ve also found it useful to dissect other peoples pipes that provide a method of manipulating data that I’d like to use myself. Maybe you could focus the book around a series of projects (as separate chapters), going through the whole process from beginning to end in the same way as you have done above, but also including links to ‘more detail’ for those who want to know. For example, with 15 in the Slideshare presentation above, you could connect the filter into the pipe and explain what has been filtered out, why and how it affects the output. Maybe a hover-over tip or link to another ‘extra info’ page from that module screenshot could work for those who really want to know?