Click here to read Hyperlinks in Print II Hyperlinks in Print II
Filed under: Book design & Navigation & Usability

Twin MediaLet's start this series with one of the best attemps I've seen to use hyperlinks in books. For 2 years (2001 and 2002), the designers of the Central Saint Martins College of Art & Design Directory book overlayed each page of the book with a subtle and exciting second layer of information.

Every 4 pages, a double spread (on white background) introduces one of the courses offered by the college; every following double spread (on photographic background) introduces one student or work produced in that previously mentioned course.

On the right edge of page 3 in the 2002 edition runs an evenly-spaced list from top to bottom with the title and page number of each following double spread related to the courses; starting with Foundation 08 at the top and finishing with Research 92 at the bottom. On page 5 runs a similar list giving access to the student work-related pages' titles and names. The two lists shown next to each other give a perfect index of the book and moreover hint that we are looking at a kind of map of the book: the BA (Honours) Textile Design 44 page is obviously half way thought the book (when thinking in terms of page numbers) but it is visibly so too being in the middle of the list and at the vertical center of the page.
Therefore, should I be looking for page 44, I would not have to flip randomly though the book staring at the page number with no sense of where it could be but instead, looking at the thickness of the book and splitting the page number in half would probably get me very close to that page, or and this is where it gets exciting, I could put my right hand thumb at the level of that tab and let the pages flip through my finger until the page number would run from the top of the page at the beginning of the book (following the index map) down to the middle of the page in the middle of the book and would easily be able to intercept the right page (do I make sense here?). What an exciting and efficient way to navigate through a book!
This reminds me of the elevator (scroll) bar you see on the left of a website window; it lets you know, just by being here, that the page is longer than one screen and that you will need to scroll to see the rest of the page, but it also hints at how much of the page you can/cannot see: a long scroll bar gives away a short page, a miniscule scroll bar prepares you for a scrolling fest.

The designers didn't stop here though; as each double spread has some text on it and an elaborate structure of boxes and lines link each relevant word found in those texts to any related double spread on other pages. The taxonomy has been carefully chosen so as not to overlink, and each page doesn't link to more than 5-6 other pages. The (double-hit) green (in 2001) and pink (in 2002) lines are discreet, they do not disturb the reading or clutter the pages, and graphic enough to bring some excitement and experimental rythm to an otherwise rather uneventful layout.
On page 48, the words performer and spectator are boxed and linked on the edge of the page to 2 boxes sending you to follow on to page 12 BA (Honours) Acting and page 18 A Venetian Merchant. Not only are you made aware of the presence of related content in the book but also, by seeing the links on the left side of the double spread are you informed that this content is further back in the book and that you'll need to scroll/flip back in order to read it.

This is just pure genious!


My remarks:
I would not have used page numbers at all so as to make the navigation device completely standalone and easier to understand. If anything, the page numbers here are confusing; only the left page of a double spread gets the current page number and title (placed at its corresponding vertical spot along the page to echo its position in the book)... I would have put it on both sides of the double spread since people flip though a book in both directions. I think that the designers wanted the book to be cut up in spreads rather than individual pages. I understand, but that crippled half their navigation idea as it is impossible to flip foward though the book, since there is no way to know where we are in the book on the right hand side.
Now, what if the index was too long to fit on the edge of one page and you had to have 2-3 indexes... How would you then make the distinction between links to content from another index?
How would you go about linking a word to another one in another book (and don't answer a Bibliography at the end of the book...)?
How would you link a picture in a book to a related bit of text on another page?

I have a few other examples like this coming soon-ish, but if you came accross a book or magazines that used some similar concepts, please let me know, we should feature them here. Thanks.

Credits for the designs:

2001 Edition concept, design and production: Jannuzzi London. Designers at Jannuzzi Smith (former staff and students f the college): Ross Cooper, Michele Jannuzzi, Robbie Mahoney, Stina Nordquist and Richard Smith.
Printed by M&TJ Printers, London

2002 Edition designed and produced by Jannuzzi Smith. All the designers who worked on this project are associated with the College as lecturers or former students: Sebastian Campos, Edoardo Cecchin, Ross Cooper, Michele Jannuzzi, Robbie Mahoney, Stina Nordquist, Richard Smith, Kira Trowell.
The fonts used are Mies, for headlines, created by Jannuzzi Smith for use on the web; Jo, for body text, interpolated from the outlines of Joanna by Eric Gill, who taught at the college in the 1920s; and Bliss, for captions, designed by Jeremy Tankard, who graduated from CSM in 1910.

CSM1


CSM2


CSM3


CSM4

by Paul | 31 October 2004
Comments 13 Comments added
1. On 09 March 2005, Eric Bostrom said:

Don't forget house of leaves by mark z. danielewski

2. On 09 March 2005, Philipp Lenssen said:

"Hyperlinks in books?" This triggered something in my brain which made me realize Choose Your Own Adventure books were like that:
http://blog.outer-court.com/archive/2005-03-09-n52.html

3. On 10 March 2005, and curious? said:

This is purely annoying --- why is every tenth or so word highlighted with a light blue background? Perhaps the article explained the reasoning, I was not able to complete my read of the article.

I see the highlighting is pervasive throughout this site, not just this article.

What purpose is the highlighting? It is not a link? It is not a wiki entry?
- confused and annoyed

4. On 10 March 2005, and curious? said:

Sorry if I seemed a little harsh in my previous message :(. I really don't understand why a good amount of text has a light blue background.

5. On 10 March 2005, Paul said:

Good question. ;-) In short, I am simply highlighting keywords... But you could also consider it an experiment where some of the words or expressions highlighted call for deeper thinking on the reader's part; hyperlinks to more personal research and reflection. I was also curious to see how those highlighted words affect our reading? We spend hours reading online articles riddled with underlined hyperlinks, then designers borrow some of those clues for print design and so I was trying to imagine how the third step could look like, when web designers will start looking at those modified print designs for inpiration... I made the "blue" really light so that it would not impede the reading of the article. (however, RSS feed reading might prove a little more difficult). They are a nice little exercise in style, nice patterns appear, a way to render the block of text more dynamic... just experimenting.

6. On 10 March 2005, spek said:

if the blue highlights were meant to be a style than perhaps you should rethink the relationship of your title/heading blue highlighting. just a thought on good hierarchy.

7. On 10 March 2005, Paul said:

Don't be so strict. I enjoy a consistent hierarchy as well. This blue highlighting is for keywords or expressions too, as I said. Aren't titles keywords or expresssions?

8. On 10 March 2005, Philipp Lenssen said:

Just to add my two cent, I found the blue highlight confusing as well. I thought they were links, and then I didn't understand at all what they were. I hope your experiment nears its end :)

9. On 10 March 2005, paul haine said:

I'm going to add my name to the 'what's with the blue highlight?' list - I found it made the article harder to read, and I spent more time thinking of the highlights than I did the content.

10. On 10 March 2005, rich said:

yeah, blue bold tags are too confusing: two reasons (personal): one, too many sites currently use it as a link indicator, and two, they're bold tags! what's wrong with making the type bold? you know, like you told the browser to do?

I like your experiment, it certainly made me think, but at the expense of reading your article (sorry). I think it might be the frequency of the keywords that helps to make me think they're links. At any rate, they look too much like "doing" elements than "reading" elements to my eyes.

anyway, /2c. will be coming by here again, though - thanks.

11. On 10 March 2005, Philipp Lenssen said:

By the way, I actually switched from Firefox (my default browser) to IExplorer, because I thought something that was *supposed* to happen with the blue text I just couldn't see because I'm on Firefox... like, those DHTML thingies which aren't cross-browser. Oh well.

PS: I'm reading this from home, and now from work, so the forced decision between either "Subscribe" or "Unsubscribe" is a bit confusing, since I'm already subscribed, and I don't want to unsubscribe, or risk getting two emails! (Oh... well.)

12. On 14 March 2005, viceroy321 said:

i too thought, there were links. BLUE is the wrong color for your purpose, try a light yellow.

Were these keywords autogenerated from your posting or did you indicate them with html ?

13. On 14 March 2005, Paul said:


Comments are now closed for this entry.