Improving the Digital Reading Experience

April 3, 2012

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 one and the same experience when seen at the theatre, studied on paper, or scanned on your 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. What matters is not the schematic of a device, but what we think, do, and feel when using it. What makes a CD digital is that we do not need to turn it over half way through, that it can play single songs precisely, that it can play the songs in random order, that when it’s scratched it sounds like a techno track and not like something that has a scratch, and that we do not know or care how it works. 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 in the stream of ones and zeros buzzing through the processor that drives it. Unlike books, radios 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 zeroes 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:

  1. You sit down in front of a computer, becoming unaware of your body and your surroundings
  2. You switch the computer on and start loosing track of time
  3. You focus on the screen, framing your perception within a relatively small visual square that replaces your general perception
  4. You enter the logic of the operating system, and your body/mind coordination reduces to your hand and eyes
  5. You enter the browser and let go of the operating system’s environment
  6. You let go of the browser and focus on the functional structure of a website
  7. You let go of the information architecture of the website and start reading
  8. 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:

  1. The dust jacket or cover, with the title, author and edition
  2. The back cover, with quotes and more information about the author and content
  3. The dust jacket flaps, with more information about author and content, both in the front and back
  4. One or more empty pages
  5. Copyright information
  6. An empty page
  7. Author’s dedication or quote
  8. The title page
  9. More empty pages
  10. The table of contents (either at the front or back of the book)
  11. An empty page
  12. The title again
  13. The preface
  14. The title of the first chapter
  15. The main text
  16. Empty pages
  17. The index
  18. 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 that 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, so far, this has proved to be a fairly weak argument.

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 hobbling? 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 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 text neither share the same mental model, nor do they offer the same 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 within seconds 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 his or her 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, without a doubt, 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, not 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.

***

Contact

iA is a strategic design agency with offices in Tokyo and Zurich. For questions regarding our apps, please visit iAWriter.com. If you are interested in our services, please use our contact form. If you are interested in joining iA, check out the job openings.

Thank you

Your message was successfully sent.

Oliver Reichenstein Route Kamiya-cho Bld 5F 5-2 Kamiyama-cho Shibuya-ku Tokyo 150-0047 Japan