Here’s a glorious bit of design nostalgia for the New Year. It’s hardly a new find on the web; designer Nick Job first started this archive of the British Rail identity manuals in 2011, but I’ve just been reminded of it. Somehow I’ve never written about it either, which is a bit of an oversight given the entirely-unofficial and tongue in cheek name of this site: the British Rail alphabet and signage guidelines were also used by the British Airports Authority and National Health Service, making them as much a government standard as Britain ever usually manages.

The alphabet had two variants, one for dark-on-light type and one for light-on-dark. Light (and illuminated) type on dark backgrounds creates an optical effect known as ‘halation’ - i.e. it develops a halo, a slight sense of the letterforms being thicker than they are. To cope with this, the letterforms are reduced by the width of an outline for the lighter type, shown in the last panel above — while retaining the same spacing and other details of the type. It’s worth pointing out that a revival of the typeface is now available to license and as a web font from FontDeck.

For the non-British (or the very young) British Rail was the nationalised entity that ran the vast majority of railways (and a few ferry routes and other transport-related things) in the UK, beginning in 1948¹. It was rarely out of the news (more so on slow news days) for ‘record losses’, ‘strikes’, ‘failures’, ‘delays’ and so on. Starting in 1994 the network was dismantled and sold off, with the last few bits sold in 1997. Instead of a nationally-owned monopoly, we have regional monopolies owned by a variety of companies and (perhaps amusingly), the nationalised rail corporations of other countries. The headlines are now about ‘record price rises’, ‘record profits’ (also: greedy executives and shareholders), ‘overcrowding’, and yes, ‘delays’. According to the polls², privatisation is generally considered to have been a Very Bad Idea and Can It Go Back To How It Was, Please. Whatever your view or politics on the matter are, running an at-capacity rail network will never make you popular with the people who have to use it. I’m being charitable there.

Despite each of the rail operating companies having their own brands, for most British people the British Rail identity is still a familiar part of the landscape, with the logo being the road sign symbol for any rail station, and much of the signage (especially at smaller stations) unchanged from pre-privatisation days. But what an identity! The whole thing is such a brilliantly consistent and well-designed system, owing much of its strength to its crisp, stark simplicity, to its minimalism and almost-total reliance on typography alone. There’s so little to it that there’s very little (virtually nothing) that can ever really look out of date or old fashioned — sure in the 80s everyone³ had a thing for Rotis (for heaven’s sake) and there was that grunge stuff in the 90s and we’ve had the web and all that⁴, but nothing that was really so outstandingly superior or more modern. What made the identity look bad was the usual thing that ruins most good things: neglect and apathy. A faded peeling sign in a shabby, half-ruined station with leaky roofs and deathtrap toilets is never going to look great, and by the time privatisation came along that was the caricature we were being presented with, and so out it went.

And that’s a real shame, for so many reasons.

Very much a hey, look at this post, this. I’ve just seen a link to this collection on Things Magazine of Pelican Books covers for the 1960s (and each decade they were published). It’s interesting to see how the template developed along with the Penguin series until it all got a bit chaotic in the late ’70s and was discontinued in the 1980s. Joe Kral also maintains a collection of Penguin and Pelican covers on Flickr.

A couple of years ago I wrote about Kuka, the RobotLab project built to write the entire Martin Luther bible onto a long roll of paper. The robot emulates the calligraphic style replicated in the Schwabacher blackletter typeface, writing it using a pen as a (particularly neat and tireless) human might. It’s quite a lovely thing*.

I was reminded of it when I saw this project by Walter Nicolino and Carlo Ratti (of Carlo Ratti Associati). They’ve designed and built a suspended plotter to write the contents of the Open Architecture Manifesto page on Wikipedia onto a wall at the Adhocracy exhibition at the Istanbul Design Biennial. As the text on Wikipedia is updated the robot erases and rewrites the document on the wall at the exhibition.

The comparison between the two projects is perhaps obvious, that one is reproducing a historical, unchanging document, while the other reproduces a brand new, constantly-updating and ephemeral one. Indeed until the manifesto was published in Domus magazine (whose editor Joseph Grima is curator of the biennial) the article kept being deleted by Wikipedia editors.

I’m especially interested how the plotter is reproducing the text. The typeface could be Times, but the generous amount of ink the fat nib of the plotter pen puts down, and the way it outlines the characters, makes it hard to tell exactly. Also, looking at the video the output is a serif face but part of the processing (in Processing) looks like it uses something more like Verdana or Tahoma. Could be that different parts of the text are in different faces of course. Curious.

I had been searching for something geometry-related when I found the Euclid book in the last post so when I found the Public Domain Review I wondered if they had anything else about the subject. Turns out they do, and I found this fascinating and somewhat bonkers book from 1887, Geometrical Psychology. Nothing to do with what I was looking for, but it has some remarkable illustrations in it where the author attempts to diagram the evolution of human consciousness. Some of my favourites:

The back of the book also has several pages of adverts for other works available from the publisher, and just the titles alone are fun to read through. Some of my favourites again:

A series of unsuccessful (and unrelated) searches led to the happy result of finding this book (and the site it’s on). The Public Domain Review is a fascinating collection of articles about (and a collection of) out-of-copyright texts, images and films, and somehow I’d never seen it before.

I’d seen a page from the book and thought it to be something quite modern, something produced by some later follower of De Stijl or Bauhaus (something the Public Domain Review also comments on), but it is in fact from 1847. Not something you’d associate with early Victorian publishing at all. It’s a remarkable book, and thinking back to when I first learned geometry I wondered if something like this would have helped. In all honesty (and of course entirely my opinion) I can’t say it would. The pages are a visual delight but they compel the learner not only to learn the concepts and mathematical language but a whole new graphical one too. From my memories of Euclid you need a good guiding commentary (or a good teacher, or both) rather than a new translation to help you make the necessary connections and learn the principles well.

Something I found the other week and caught my eye, a project by Jonathan Puckey to convey some of the aspects of handwriting, namely speed, into typographic weight. I like the idea, I remember having a pub conversation along similar lines many years ago. It was after a fairly difficult day and the old problem of conveying tone or mood in emails came up. A friend suggested a keyboard with pressure-sensitive keys and software that varied the size, weight, and perhaps even the style of the text depending on your typing speed and the force you were typing with.

The possibilities are still interesting (which is why this caught my eye) and might be an entertaining set of dimensions to add to OpenType. I guess you’d have to be careful with the calibration—some people type as if there are bankers hiding under the keys—otherwise you’d be known as “the shouty one” based on nothing but your emails.

Image via Jonathan Puckey‘s site. Also check out his Lettering Tool. Sadly it’s not available to download.

I was taken by this collection of Chevy speedometer designs brought together by Christian Annyas. As I’m always a passenger (I don’t drive) I’ve had plenty of time to study the details of the dashboard and to note the little typographic touches there. Purely graphically I much prefer the horizontal kind of indicator, but in terms of function the dial has an advantage in that the numbers are spaced evenly. The horizontal kind means it’s harder to differentiate at a glance between speeds in the centre of the speedometer, simply because they’re bunched together. It’s also just the range where most speed limits are. Just in writing this article I’ve wondered whether a logarithmic scale might work better for speedos – giving you greater read accuracy at lower speeds, and less at higher ones. The odds of killing someone in an accident change dramatically between 10 and 40 miles an hour, but don’t change much at all above that (i.e. it’s pure chance whether they die or not), so if you’re going fast the only practical awareness of your speed is whether you’re near the limit or not. I’m not entirely convinced by my own argument, but I’m not exactly a fan of going fast in cars and generally grumpily mutter about people going too fast on the roads anyway. Anyway, go and take a look at the full collection, here.

The Guardian now has an iPad app. Previously if you wanted to read Guardian content on an iPad you could read the website, use the iPhone app or attempt the Digital Edition. I used to subscribe to the Digital Edition, a downloadable PDF of the paper (now with an online viewer) in exactly the same form as it was printed. By the looks of it, it’s much improved these days. I cancelled my subscription fairly quickly, because while it was good for reading some articles, seeing things like “continued on page 5” with no hyperlink felt weird, and some of the diagrams in articles had text on them which at the resolution the PDF was created at was unreadable. I complained about one issue like this and was sent a jpeg of the graphic at a higher resolution. Great customer service but it never seemed a scalable or sustainable solution.

So last year the Guardian did a survey of its iPhone (and presumably web) users asking what they’d think of an iPad app, and how much (if anything) they’d be willing to pay for it and/or a subscription. I figured that if they did it well, it could be revolutionary. The iPhone app was (and is) so good it still stands as a reference guide for how to do a content-driven app well. If the iPad app was as good, then it’d be great.

I’ve used a fair few magazine and news apps for the device and they’ve all been a bit of a let-down. As it’s the first mass-market tablet the iPad presented a new and unfamiliar environment to design apps for. Some went down the fill-it-with-crazy-interaction route, others down the scan-our-printed-edition route, most sort of somewhere in between, but nothing really felt natural to the device. It takes time to learn about the new medium rather than simply adapting what went before.

I think the Guardian app is mostly there. There are a few things that I think ‘hmm’ at (well one thing, the issues list), but it does what it’s designed for and is a pleasure to use. The design principles for the app (from this article by the project lead, Jonathon Moore) are beautifully focussed and simple:

• Reflect the strength of the form
• Create an interface that is always responsive and consistent
• Design simple user journeys
• Design for the majority (what are the 3 or 4 features that everyone will enjoy?)
• Realise we can’t do everything
• Appreciate simple is best

These are principles that can and should apply to the design of pretty much everything.

Strength of the form (of content)

It struck me that in all reviews of apps like these, much attention is given to the surface features of the software, but the content is largely ignored. It’s typical feature-itis, and ignores the user’s experience of a thing. The entire reason for someone using this app is to read the Guardian, and let’s be fair, reading a printed broadsheet (or even a Berliner) in almost any situation is rarely a comfortable experience. But you put up with it, it’s worth it for the content, and after a while the medium of crumpled, flapping paper tends to fade away. To do the same (or better) in an app requires a deep understanding of what the content is and how people regard it.

“But to me it was always about how to capture the essence of the print experience and translate that into forms and behaviours that felt right on the iPad.” Mark Porter

I know from experience of developing websites that content is often regarded as the ‘word filler’, viewed as the own-brand mystery sauce to be poured into the shell of the app, not really to be considered as an aspect of the design itself. This is a massive mistake.

Browsing the printed Guardian you see articles from a broad range of subjects, short snippets of fact here and there, and huge page-spanning features and editorials. Newspapers are varied. News websites, even the Guardian’s, are rather more uniform. The pressures of news-now, of getting the story ‘up there’ before anyone else changes the style and format of journalism. There seems to be less room for editorial and analysis - a story is happening now, and this is how it is, …but what does it mean? Most of that type of content remains in the printed paper.

“When we look at the pages of a printed newspaper we take in a range of stories at once. Some are big, some small; some are obviously more important than others. The decisions about space, position and treatment are the product of the experience and values of the editors, and when you buy a printed newspaper you’re not just buying the words and pictures, you’re also buying those values and judgments.” Mark Porter

Bringing that to an app requires a solid understanding of how it works in the paper - how to signal to the reader the relative importance and scale of an article. Is it news reporting? Is it opinion? Is it editorial? Analysis? In any paper it’s the typography and layout of the page that gives you this information.

“I worked closely with Barry Ainslie, our Art director for Sport, to define a range of typeface styles that suited our headlines from print. We defined the minimum required and slowly built them out as the app developed. It’s the first time we’ve used our (extensive) range of fonts to such effect in any of our digital products.” Andy Brockie

That extensive range of fonts is the Guardian’s own typeface, Guardian Egyptian by Christian Schwartz. It has over 200 fonts.

It’s quite clear from reading the app that a great deal of thought and effort has gone into the typography, making it work perfectly on the iPad (which isn’t a perfect medium for great typography in itself). Looking through the images detailing the design process shows just how many iterations of type and layout were tried. I must admit to feeling a bit envious of them to have such time and resources to spend on it.

The details of the typography are often subtle - body text is perfectly readable, sidebars with links to related articles don’t intrude, colours are carefully used to illuminate interactive elements and bring variety to front pages, and headline styles change depending on the type of article. Most articles get a regular weight headline, so that when you get to one with a lighter weight, you know it’s a different kind of content, comment, editorial, obituaries and so on. Features and very long articles get a big screen-filling photo with text overlaid on it, with the article starting below.

It all creates a beautiful effect, inviting you into the content, and letting you read it without intrusion or obstruction.

The treatment of adverts is interesting, and welcome. They do exist in the app, but are restricted to interstitials and section front pages. So by design, while reading an article you don’t see adverts. By design! No hacks, no reformatters, no plugins, no extra services, this is how the content is presented, by the Guardian. Only a few other news apps (like the Channel 4 News one) do anything similar.

Strength of the form (of device)

The iPad is a determinedly multifunctional thing, but it relies on the two universal gestures we can do with our fingers, the stroke and the tap. Stroke vertically to scroll, horizontally to swipe. Stroke with more than one finger - more functions. Tap to select, to activate things and to type. Tap and hold for a contextual functions. But how to design and build an app that responds to these things in a natural way? Apple apps provide clues, but obviously didn’t solve all the problems - there never was an Apple app with loads of content that updates frequently, unless you count the browser itself. But that web/app debate is a whole other kettle of worms, and I’m not going there.

The Guardian app solves this simply, in a way that we’ve come to learn feels natural for the device. There are very few interactions possible; Text scrolls vertically, and you swipe sideways to change articles or sections. You can tap on links to other articles and sections. There are a couple of settings and you can share some articles, but that’s it. Which leads to:

We can’t do everything

What’s interesting is what’s missing. There’s no double-tap to expand the text. You can’t tap and hold to select (and copy) text. Many articles can’t be shared - only the ones that are also on the website can be. There’s no pinch zoom. Navigation is pared-down to just a few common functions and links.

There’s no option to have larger text sizes, accessibility support (such as VoiceOver) is OK, but fails on the front pages (where it reads out the ID for that type of headline).

Some of these things could certainly be added, and the accessibility could be improved, but I know from experience that the desire to get all features into the shipped product usually leads to the product not shipping at all. This is version one of an exceptionally solid app, and I’m glad they’ve polished it as they have. They may not be able to do everything, but what they’ve done is very well done.

Design for the majority

And this leads nicely onto the features the app does have. I strongly suspect it’s aimed at readers of the paper who are looking for something more convenient than the print edition but find the website content lacking and maybe the small form-factor of the phone apps constraining, i.e., commuters. Commuters on trains, specifically. Phone signal on trains is notoriously variable, and train operators often charge stupid money for Wi-Fi, even when it works, so the Guardian app pre-downloads its content in the background in the very, very early morning.

But aha, you say, what if something newsworthy happens at 7AM? The app is out of date! Martin Belam nails it:

“To me, that is like arguing that there is no point the BBC broadcasting the Today programme or putting Newsnight on iPlayer, because the news might be “out of date” the instant the programme is finished.” Martin Belam

To my mind that’s where newspapers still have a unique and valuable offering. You can get live feeds of news from multiple sources, but it’s newspapers, books and documentaries that (on their different timescales) tie the stories together and provide context and meaning. As a result it actually doesn’t matter if a newspaper is a little out of date, provided the journalists have done their jobs properly.

I suspect that the majority of the app’s users want a better, more convenient newspaper, not a prettier newsfeed. It sounds like that’s what the Guardian thinks they want, too. I know I do.

Design simple journeys

Printed newspapers offer very simple user journeys. There are articles on pages, and the paper is divided into broad subject categories, as sections, and you simply flip through them, stopping to read whatever catches your eye. The app uses the same scheme, but also creates a front page for each section. The design of a front page like this isn’t a trivial matter, and it’s particularly interesting the technology the Guardian uses to build these from the content of the newspaper automatically. When I read about it I was amazed at what they’d done.

“This was to be the world’s most beautiful, elegant, interpretation of the print experience - with a few digital twists. It was also to be tied intelligently into our print production systems. That was big task – a task that we underestimated. From get-go.” Jonathon Moore

That’s an enormous task, and I bet immensely satisfying to work on. Looking again at the design evolution Andy Brockie presents, I wonder how the system works out where to put everything. I’m slightly relieved that there is some human input to fine tune things, because if all of that was automatically generated we’d better get ready for welcoming our new robotic overlords.

“Unlike the iPhone and Android apps, which are built on feeds from the website, this one actually recycles the already-formatted newspaper pages. A script analyses the InDesign files from the printed paper and uses various parameters (page number, physical area and position that a story occupies, headline size, image size etc) to assign a value to the story. The content is then automatically rebuilt according to those values in a new InDesign template for the app.” Mark Porter

And then from InDesign to HTML. Automagically. That’s the future right there.

Appreciate simple is best

The simplicity and straightforwardness of the Guardian app is (like its iPhone version before it) going to stand for quite a while as the acme of how these things should be done. It’s also a good reminder that simplicity is actually quite hard.

A note on the business model

Much has been said (by oh so many people) claiming that ‘print is dead’ and that newspapers are whipping a dead horse of a business model. If you look at the distribution of printed newspapers people pay for with money, vs. the assumed-free access to news on websites, you’d be right. There’s more to the story than that though. As I pointed out, there’s a special type of content that newspapers have, and despite everything, not much of that content is actually available online. The few newspapers that have made a success of paywalls, such as the Financial Times, do put their analytical and editorial content online, and it shows that plenty of people are willing to pay for it.

For a more general audience the received wisdom has been that people are highly resistant to paying for news, and the Guardian’s own survey showed that many people are. However, not all are, and many people (I include myself in this) actually want to if it means getting a higher quality product. I can’t put it better than Martin Belam, again:

“It strikes me that it is considered quite normal for car manufacturers to have a range of products that are designed and priced to suit different sectors of the market. When a news provider does it, from some sections of the web community there is an almost instant knee-jerk reaction that this proves news organisations “don’t get” digital.
Just because you can have an always on app that crams in updates and breathlessly fast breaking news from live blogs, doesn’t necessarily mean that you have to.” Martin Belam

There’s no doubt that the business models of delivering news to people are changing, but it’s quite clear that people still want news, and people still want journalism. I doubt the constantly-updating feeds of largely analysis-free news updates will provide much of a business model to anyone (except in aggregate) but actual journalism, that is most definitely worth something. Whether this app is what nails it we don’t know yet, but I think it’s got a damn good chance at making that breakthrough.

I just read this well-written and clearly-argued piece by Stephen Few on the work of David McCandless. It expresses many of the thoughts I’ve had on the kind of ‘popular infographic’ going round, though I wouldn’t restrict my criticism to McCandless, nor would I be quite so critical of him personally. The style of work he produces is popular because it presents correlations (and sometimes, coincidences) in data in an accessible, attractive and entertaining way — the error is to assume that this represents the best of graphical analysis or that it’s intended to be viewed as such. As many commenters on this Flowingdata piece have pointed out, there’s a difference between graphical analysis and infographics, and while I disagree with the apparent thrust of their collective argument (that Stephen Few is wrong) it is an important distinction to make.

McCandless’ pieces are often beautiful, and they are indeed based on information, hence the title of his book and site, Information is Beautiful, but they rarely offer deep insight into the data. What I would like to see is the equivalent for graphical charts representing actual analysis. Time for an Analysis is Beautiful perhaps?

These two sites each transform the common, straightforward act of scrolling into amusing visual effects. The Beercamp one uses a page-within-a-page idea, with a smart little in-joke right at the lowest level, instantly recognisable to anyone who’s seen that film. The zooming effect works really rather well and seems perfect for a small site like this. The TEDx Portland site is interesting in that the broken-CRT visual effect actually interferes with the text somewhat — you have to scroll more than you might do normally before the text (ahem) ‘below the fold’ is readable. That might be irritating, but it’s well done enough that it leaves you with more of a, “oh, that’s fun” feeling instead. Well, it does for me. Your mileage may vary.