There is a difference between checking Google Maps on your iPhone and asking a stranger for directions. It matters whether you listened to Beethoven’s 9th in a concert hall or in your living room, whether it plays from a vinyl LP or from your iPod. King Lear is not the same experience when seen at the theatre, studied on paper, or scanned on a Kindle.
It is not always easy to discern digital and analog experiences. A lot of seemingly analog devices have digital technology built in without us realizing it (tape decks, ovens, cars), and, as you might have noticed, more and more digital devices try to look and feel like analog tools.
The technology below the surface—whether it is manual, mechanical, automatic or digital—is not what matters. Not the schematic of a device, but what we think, do, and feel when using it. Whether we call something “digital” or “analog” depends more on the way we perceive, understand, and use a device than the ghost in its shell.
Whether you read text on paper, a cathode ray tube monitor, an LCD screen, or e-ink, whether you read in indirect or direct light, high or low resolution, and whether the text is at arm’s length or not is one side of the equation. The other side is defined by you as the reader: Where are you, what are your motivations, and what are your goals?
To optimize the reading experience, no matter whether in print or on the screen, we need to understand the humane function of a computer, and examine the differences between digital and analog reading experiences. Then we can think about ways to improve the experience to get better results for the reader.
I will try to sketch out how to do this in the following 14 minutes of text.
1. The humane function of computers
The hammer is an extension of the hand. Glasses are an extension of the eye, the radio an extension of the ear. As long as our tools are recognizable as analogies of our body, the form and function of these tools are easily comprehensible.
But once you enter the digital realm, analogies with our body break down. Instead, digital tools are analogies of analogies. Text editors are an analogy of type writers, type writers are an analogy of writing with pen and paper, writing with pen and paper is, initially, a substitute for our memory. In general the computer now works as an extension for our head controlling those tools.
Steve Jobs claimed the computer should be “a bicycle for our mind”. It’s like computers add steampunk spider legs to our head.
While some would agree with this image, what Jobs meant was obviously not that creepy. What the computer does (or should do) to our mind is what the bicycle does to our legs. The computer should be an empowering extension of our mind.
But is it? Or do computers make us more like Spider Baby from Toy Story? What part of our mind is Twitter an extension of? What about Google Search? Is it in the nature of digital to break analogies?
Blind abstraction, a lack of real-world analogies, the feeling that the workings are a black box, and the experience of multiple fast-paced, fragmented processes—this is more or less what we mean when we use the words “digital” to describe a device.
Software usually feels as fragmented as the packages of bits and bytes streaming through the processor that drives it. Unlike books, radio or movies, digital media does not just create a singular parallel reality with its own continuity. In tune with that discrete stream of ones and zeros in our devices, digital media often creates a landscape of discrete and often unrelated experience fragments. This is what makes digital media feel more “virtual” than traditional forms of media.
Documents, images, videos, and audio tracks on the web are not more or less real than in any other medium. But they feel unreal and less credible on a computer, because digital media snippets reach us like fragments of a dream: unprepared, out of context, and lacking orientation, causality and continuity.
To design better software we need to build programs as extensions of our mental processes, supporting clear continuous thinking, instead of subduing our thoughts and actions to the opaque, fragmented technology that drives the device.
2. Digital vs analog reading
2.1 Reading in a browser
Similar to the nervous landscape of Super Mario Bros., contemporary computers have different levels that change rapidly and require fast reflexes to cope. If you are reading online, you descend multiple levels to reach the text. For example:
- You sit down in front of a computer, becoming unaware of your body and your surroundings
- You switch the computer on and start loosing track of time
- You focus on the screen, framing your perception within a relatively small visual square that replaces your general perception
- You enter the logic of the operating system, and your body/mind coordination reduces to your hand and eyes
- You enter the browser and let go of the operating system’s environment
- You let go of the browser and focus on the functional structure of a website
- You let go of the information architecture of the website and start reading
- You then jump around between levels 4 and 7 until you stop reading in the browser
If you compare the overall information architecture of a website to a book, you will notice that the difficulty in reading a digital text is not just a matter of all the synchronous processes, or the typographic design of digital text. Think about the number of frames of reference that you need to enter, the number of levels that you need to climb down—and the mindset that this climbing requires—until you reach a digital text. How much more complexity do you need once you reach the ultimate text layer? Why is it that once we reach the text, we hardly stay there for more than a couple of minutes?
The reader gets constantly distracted by links, related content, navigation, blinking elements, and jumping icons in the dock. Instead of keeping readers in the continuity of the text, they are constantly ejected into a different level of Super Mario Land.
2.2 Reading a printed book
Just like a digital text, a printed text is embedded in different invisible frames through which you need to cross to get to the body text. There are various ways to embed text in a book, magazine or pamphlet. The following architecture of a book is, again, just an example:
- The dust jacket or cover, with the title, author and edition
- The back cover, with quotes and more information about the author and content
- The dust jacket flaps, with more information about author and content, both in the front and back
- One or more empty pages
- Copyright information
- An empty page
- Author’s dedication or quote
- The title page
- More empty pages
- The table of contents (either at the front or back of the book)
- An empty page
- The title again
- The preface
- The title of the first chapter
- The main text
- Empty pages
- The index
- Empty pages
As you can see, books also have a series of levels or frames that we cross to get to the main text. Studying these layers it becomes clear that books are not as linear as they first appear—before opening a book many people look at the back cover, the dust jacket flaps, and the table of contents. But a well written book follows a pattern of continuity and clarity that is simpler and clearer than your average thought process.
There are obvious differences between the overall architecture of a book and a website:
- In books the transitions between the different levels or frames are clearly separated with empty pages. They act like airlocks. You know when you enter a new level, and when you leave it.
- Books have a closed, complete content structure.
- They have a physical presence that illustrates this integrity.
- Once you are in the text, you reach a state of continuity comparable to your direct presence, bare of any distractions from the act of reading.
The benefits of a linear, finite information architecture has been promoted again and again by old media publishers pitching their iPad apps. They posit (some would say hope) that the reader prefers the finite structure of a book, magazine or newspaper to the incomplete stream of information provided by the web. I cannot judge whether this is true or not. But this has proved to be a fairly weak argument so far.
One thing is sure: it is harder to focus on a screen than on paper. Why? Is that because of the screen’s digital DNA? Or is it because the software is badly designed? If the computer is a bicycle for our minds, why are we still wobbling? My guess is that bad software, not bad hardware, is to blame.
3. How to design better digital products
To be able to design a better reading experience at the most basic level, we have to understand how to bring digital reading into a form of continuity. And to get there we need to find out what makes and breaks continuity.
One way to make software look like a bicycle for our minds is skeuomorphism: making digital interfaces that look—but don’t work—like analog tools. But beware. A digital book that looks like a physical hardcover but works like a video recorder will backfire. As Jan Tschichold wrote in Meisterbuch der Schrift (The Masterbook of Typography):
What one wants but cannot achieve, becomes kitsch.
“Winnie The Pooh” in iBooks looks great in a TV spot for iPad, but as soon as you use it you know it’s a fake print product. The information is forced into a structure that is not medium-appropriate, the interaction is painful, and the typography is random. Instead of studying and imitating the look of analog devices, we need to observe what our mind does when we use them.
3.1 Information Architecture
Print and digital have a different mental model, and offer different content. If you look at a printed book you do not have the exact same thoughts as when you look at a file name. This becomes even more obvious if you just look at the printed artifact as an object:
- A printed text can tell you in a glance where in the text you are, how much you have read, and how much is left to read
- A printed text defines a pretty good spatial landscape to remember where in the book you read something
- A printed text captures traces of where and when you read it
A digital text, on the other hand, has completely different strengths and weaknesses:
- It’s easy to find a particular sentence
- It can tell you how much time you spent with it, and how much time is left
- It’s hard to remember text location, but easy to work with text, e.g. sharing text highlights and taking notes
- It can adapt to your personal needs and taste
While the printed text has been refined over centuries, the digital text is still young.
3.2 Interaction Design
Most reading interfaces are not based on the most basic User Interface principle: “Minimal input—maximal output”. They are a result of a desired feature list. These features are then crammed into one interaction design.
It is astonishing that, with all the high-pitched projects around reading in the last few years, nobody has developed an alternative navigational model for reading digital text. The main interaction models for digital reading are still flipping or scrolling. Both have their advantages and disadvantages, and both kind of suck on a tablet.
We have been working behind the scenes on a better navigation model for long texts. For now, I’ll just say this: As long as reading a book on a tablet requires more physical interaction than reading a printed book, tablets are not competitive reading devices. And, maybe even more importantly, for a long period of time texts were written for the specific shape of printed text. Isn’t it more than probable that the shape of writing needs to adapt to the media it is consumed in?
3.3 Surface Design
Most digital books fail at the most basic level of the reading experience: typography. Good typography does not look nice to please type nerds. Primarily, well set type reads well. It captivates, leads along, and doesn’t let you escape: it creates continuity.
The untrained eye won’t see why a book with bad typesetting feels wrong, but everybody will feel that it feels wrong. “Winnie the Pooh” in iBooks is a tedious reading experience, but not because of bad pixel resolution. It’s just as tedious on an iPad 3.
And it’s not the missing paper smell either. Not because of the missing heft of the read versus unread pages. Reading “Winnie the Pooh” in iBooks is tedious first of all because no one took care of what constitutes the continuity of reading on the screen: how to set the type for optimal readability and legibility.
In a well crafted book every single letter has its correct position in the whole of the text body to guarantee maximum readability and—through this—continuity of the reading experience. The text in e-books is set at random. Type size, line hight, leading, measure, contrast, and even font choice are left to the user, who usually has no clue about typesetting. Inevitably the text flows more or less randomly, rather than for the best reading experience, because of this.
Tech people find pleasure in playing with app settings, in adapting programs to their specific needs. The average reader prefers to leave it to a professional designer. Typographic algorithms can improve the reading experience, but, ultimately, setting a book really well requires a well-trained human eye. If it’s done well the results are amazing, if it’s done badly the most beautiful text can feel like junk.
But font choice is important, right? Everybody should be able to choose their favorite font, no? No. Instead of embedding 20 fonts in 20 sizes into an e-book, one suitable font at one size for each orientation is enough. In return, the layouts should be reviewed by a professional designer. This claim will enrage a lot of tech people. But as long as accessibility needs are addressed, one font and one size would lead to a much better user experience than the typographic randomness promoted by tech people.
We have shown successfully with iA Writer that excellent typography with one beautiful font creates more focus, and frees the user from settings hell.
What about the typeface itself? Current fonts were developed for low resolution, low pixel density CRT monitors. They do not work as intended on contemporary high density LCD displays anymore. In my experience, traditional print fonts work better on high density displays like Apple’s Retina Display than standard screen fonts. Georgia, a beauty in the realm between 12 and 16 pixels, becomes a monster if you scale it over 18 pixels; over 14 pixels the otherwise very neat Verdana falls apart; however a Sabon at 24 pixels on a iPad 3 screen starts to shine.
The downside with traditional fonts is that they are not always optimized for digital use. And there is also the question whether traditional fonts really perform perfectly on backlight screens, or whether there is not a new form of type that does the job better. I am still waiting for thorough scientific research on how fonts perform on these new display types. This will inform the creation of new digital fonts that are optimal for high density screens.
4. Conclusion
The computer is an extension of our mind. To design better software we need to build interfaces as extensions of our mental processes, rather than analogies of our body. Building better reading interfaces requires that we closely observe and rethink the way we read. While we need to find ways to navigate long texts on tablets, typography will continue to play the main role in the performance of a reading interface.
The technical challenges, information architecture, interaction design, and digital typography are complex and tough. But if our goal is to build digital reading interfaces that improve the efficiency of our reading experience as much as the bicycle improved the efficiency of our legs, we have to not just optimize screen typography and type design, but rethink reading and writing from inside out.
