Category Archives: Usability

Hyperlinks in Print IV

[cityofsound] Porter notes that they’re dealing with“readers who get most of their news from television and the internet now” and without the hours to spend reading the paper that people used to have. He can’t assume that people are going to read the whole thing – so there arenavigational cues, layout guides, and other devices toalert the reader to other articles of interest within the paper (and presumably online) – almost, “if you like this article, you’ll also like this one on page 14”.

I’ll look forward to seeing how these work in practice. I’m quite a fan of two devices used in the hugely popular Grazia magazine and hugely populist Heat magazine. Now apparently the biggest selling ‘glossy’ in the UK and rather beautifully laid-out, Grazia deploys the thumbnail preview of features on their contents page (see below), providing both a hint of the spatially classy layouts the magazine is developing as well as visually lodging a cue for subsequent reveal.


[…] Heat deploys one of the more compelling bits of in-magazine navigation around (see snaps of the bottom of Heat pages below), indicating what’s to follow if you just turn that page. Quite brilliant. Absolutely one of the best bits of ‘navigation’ I’ve seen all year. Now that’s what I call a navigational hook. I’m not sure what the interaction design pattern name for this might be, however. Any suggestions, decent or indecent? Something involving ‘cheeky’, ‘pull’, ‘arrow’ and ‘crop’, perhaps.

heat1 heat2

Those are excerpts and pics from the great article over at cityofsound.

Web fonts used in print

I am always amazed, though, to see grossly overused“Web fonts” show up as display type on a printed page. Yet I did on several entries this year. If I were to return exclusively to print design, one thing’s certain: I’d never again use Verdana, Georgia or Trebuchet!

Jay Small shares his observations made at the earlier reported Society for News Design’s25th Annual Best of Newspaper Design competition.
Well, I am only mildly surprised that somebody would use those fonts for print design. After all they appear by default in the font list on your computer. Not everybody knows that all three were created specifically for enhanced legibility on screen display. Moreover, most reports typed in on the computer are then printed out, leading people to get used to reading them on paper.

What about you? Did you ever use those fonts for print jobs, or were you ever asked to? How did you react and did you manage to convince the client or your friends otherwise?
I also found this interesting study (2001): A Comparison of Popular Online Fonts: Which is Best and When?

Indeed it is interesting to see Verdana and Georgia in print. Like mentioned ablove, they were all designed for screen by our beloved MC. I have to disagree though when somebody says that verdana is a good font for print. For my personal taste it is heavy and clumsy. However – I have recently compared Georgia to some of the classic typefaces and the outlines are not bad at all. What Carter said in one of his interviews was that he paid much more attention to the space in between the letters than on the letters themselves. This is a standard typographic procedure (since a punch cutter had to cut the counter punch first – which was the space) but often neglected. If you look at Georgia in detail, you will se certain slightly odd features, which are adjusted with excellence, but still visible. I think it is completely fine to use it for smaller – ‘homegrown’ – printed matter, but for continuous text I suggest to look somewhere else.

Trebuchet however is not a nice face at all. The lowercase ‘e’ stands there with an open mouth, the ‘i’ amd ‘j’ have very strong upper serif-terminals and the lowercase ‘g’ has got a really big upper bowl. I think – again because of personal taste – it is kind of ‘all over the place’. Maybe good for screen, not good for print.

But what is interesting is that we might be talking about something that is soon irrelevant anyway. OS X has introduced to its font smoothing capabilities and the fonts we are talking about are mainly designed to work as pixelated faces. So let’s see what comes next.

To continue this talk of converting screen typefaces for print applications, I would like to add the thought about whether this is of any use. I have a few comments:

There are a multitude of typefaces to choose from – needless to say – (nearly) all designed for specific reasons. If a font is designed for screen based work then why feel the need to use it in print? I acknowledge the ‘split’ of designer / non-designer work, and the perceived attitude that ‘we are all designers’, but those with knowledge of type and design should not fall from their pillar into non-designed territory.

Concerning issues of legibility and readability,there is currently an interesting article by Phil Baines in the latest issue of Eye magazine. Coming under ‘Agenda’, it looks at guidelines issued by organisations such as the Royal National Institute for the Blind (UK), and responds with reference to debates of legibility that have been the concern of type designers for over 500 years. Government’s and certain organisation’s views over factors of readability seemed far removed from what type designers and graphic designers have been studying for centuries. Reading the article in conjunction with views from John Tarr (writing in the Penrose Annual of 1949) and Zuzana Licko (in Emigre), presents an arguement that ebbs and flows in design circles. Who controls / states what is legibile or readable? (It might be of interest to note that in Dutch these two terms come under one word. As indeed I believe the words ‘handwriting’ and ‘printing’ use the same basic term in the German langauge).

Verdana or Georgia should remain where they are – on the screen. The adage ‘we read best what we read most’ (Licko) holds true. But as designers we should try to honour for what purpose type was designed for. Otherwise we should all just use Helvetica for everything!

Hyperlinks in Print III

This third chapter of our investigation into the use ofhyperlinking metaphores in print design takes us to a page of theApril 2005 issue of The Atlantic Monthly magazine: David Foster Wallace’s cover story about talk radio. The layout of the article has been altered to facilitate interaction between the main text and the footnotes (not unlike the work done in I.D. magazine in early 2004).

[if:book] Wallace is well-known for his copious use of footnotes & endnotes, and this article is no exception. However, either Wallace or The Atlantic’s art director have decided to treat his digressions differently in this case: words or phrases in the main text that signal a jumping-off point have lightly colored boxes drawn around them, rather than a superscripted numeral after them. In the print edition, boxes in the margins – one immediately thinks ofwindows – with notes in them appear, color-coded to match the set-off phrases. Some of the notes have notes; they get more boxes of their own. It’s subtle and well thought out, and considerably more inviting to read over 23 pages than footnotes or endnotes would be. Most interesting is how the aesthetic draws inspiration from the web: the boxed notes suggest pop-up windows (or the electronic – not so much the paper – version of Post-It notes), especially when they’re layered. And the boxed phrases suggest nothing so much as the underlining that the Web has taught us signifies a hyperlink. The HTML version (preview) on their website follows this exactly, presenting the notes as pop-up windows (some of which pop up their own windows).


Click image for bigger version. Image originally from the if:book website. Reposted here under similar Creative Commons License.

If you have seen some kind of web-like layout in other publications, please let us know by sending us an email using the link at the top left of this site. Thank you.

Hyperlinks in Print II

Let’s start this series with one of the best attemps I’ve seen to usehyperlinks 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 excitingsecond 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 wouldrun 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/cannotsee: 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 anelaborate 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 tooverlink, 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 clutterthe pages, and graphic enough to bring some excitement and experimental rythm to anotherwise 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 itscorresponding 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, London2002 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


Do-Ho Suh – Paratrooper-I

[] Suh described Paratrooper-1 as being a kind of self-portrait, describing his experience of going to the United States for the first time. A shiny, metallic soldier pulls 3,000 taut, pink strings linked to the signatures of different people, sewn into a kind of parachute on the wall.
“If there’s no parachute, then the soldier dies. He has to use it. But when he finally lands, he has to fight in a completely unknown territory. That’s something I felt when I went to the United States. It’s a parachute that is directly tied into your life,” he said.

I’ve just discovered Do-Ho Suh’s work in an art magazine and was really touched by it. I was interested to see that my interpretation of his work was different from his own.
Firstly, I never did my military service in France as it was scrapped just before I was due to enter. It is now a professional-only activity. This opens up a big gap between myself and my South Korean friends who all had to serve for 3 years.
Secondly, I interpreted this piece as being a (dark) metaphore of how the military service draws people in regardless of their will and how violent and mentally & physically disturbing this can be on someone; as if the parachute was a draftee’s skin and his name had been successively stitched in his arm and then slowly ripped off.
Thirdly, I was really excited by the graphic power of those names stitched and then pulled by the G.I’s statue. I could imagine seeing in a flash all the names unstitch at the same time and leave the surface of the parachute completely clean with a G.I falling from his tower.

What made me want to write about it here is that the magazine had an interview of him with pink lines linked to some of the words. A subtle (if somewhat gimmicky) way to link the art work to the interview.
It also reminded me of a Central Saint Martin Art degree graduation show book that was using a similar trick to link keywords to a ruler on the side edge of the page that was being used as a navigation device between the different chapters of the book. More on this in a forthcoming entry.