Vision Quest

In: Articles

By Jonathan Follett

Published on August 14, 2006

While the web contains a vast quantity of multimedia content—photographs, audio, video, animations—the primary task required of most internet users is reading. From e-mail to instant messages to blogs to interactive forms, it is the ancient technology of written language that defines our communications and drives the information economy.

More writing is created on and read from the computer screen than ever before, but the displays that have dominated the marketplace have left both creators and viewers of content in a consistently frustrating low-resolution environment.

In comparison to the leaps forward in computer-processor speed and storage capability, the monitor has changed relatively little in the past decade—a bottleneck in the information distribution process. Flat screens may take up less space, but they don’t display any more information than a comparably sized cathode ray tube (CRT) monitor. In fact, the rise of smart phones, Blackberries, and other small-screen internet devices has made the reading landscape worse. By ignoring legibility issues, we may be letting the cornerstone of our communication devolve.

My Eyes, My Eyes! (Or, Why Reading Online is So Difficult)

When you closely examine any computer display device, as you approach the surface, the screen image begins to dissolve into the dull edges and halos produced by the fuzzy phosphors. Unlike a printed page—for example, a map, which you can hold closer to your face to explore more fully—there is no hidden detail.

Our eyes are continually trying to make up for this lack of sharp focus, which is why, after extended periods of monitor-gazing, we need a break, some eye-drops, or an aspirin. The Effects of Video Display Terminal Use on Eye Health and Vision, a paper from the American Optometric Association, details the growing health difficulties that computer users face, including, “eyestrain, headaches, blurred vision, and neck or shoulder pain.” While computer displays are probably not permanently destroying our vision, it’s safe to say that low-resolution displays are making it difficult to read anything at length. The experience of reading on the monitor is so difficult, compared to print, that the reader must slow down substantially, according to research by usability guru Jakob Nielsen. The result of all this is a real physical impatience with web reading. Our eyes can only take so much, and our bodies are telling us that something is wrong.

Computer Worker, Heal Thyself

We have developed a host of coping mechanisms for dealing with low-res eye fatigue. In addition to the headache medicines and rest breaks, it’s not unusual for someone to have a special set of glasses just for computer work. It’s also fairly common for people to print information rather than read it on screen—even the most basic ink-jet printer can provide a resolution of three hundred dots per inch, and laser printers can provide more than four times that. For the moment, paper and ink trump the less than one hundred pixels per inch of monitors every time. You may be able to make low-resolution viewing a bit less painful, though: Computer workers who spend countless hours viewing content on screen can reduce eye strain by setting CRT displays to higher refresh rates. User studies have shown that at 70Hz or more, flicker is not perceptible to most people. In the case of flat screen LCD monitors, stick with displays with faster response times—15 milliseconds or better—to avoid blurred imaging and low contrast ratios.

Visual Scanning

In his 1887 speech “The Benefits of Reading,” British Prime Minister Arthur Balfour said, “He has only half learned the art of reading who has not added to it the even more refined accomplishments of skipping and skimming….” Unfortunately, in a low-resolution reading environment, the accomplishment of skipping and skimming—the method we use to retrieve information—is not driven by a refined pleasure, but by real physical difficulties. Because it is so hard to read long text on a digital display, people have honed their scanning skills so they don’t have to focus on the screen quite so much. And because people scan, rather than read, web text layouts have evolved to accommodate this practice.

Text written for the web is generally much shorter than its print counterpart, and it’s more likely to be broken up by numerous headers and sub-headers that are set in bolder or larger type. Readers can cherry-pick the paragraphs that interest them, or just read the headers, circling back to the surrounding text if they need to. Most people really don’t want to read extended copy online.

It seems reasonable to conclude, then, that the wide distribution of the current generation of screens has played a pivotal role—coupled with rapid information distribution via the internet—in redefining the way we write.

The Evolution of the Species

There’s no doubt that the writing that forms the core of our conversations and relationships has changed. The long missives and artful correspondence of letter writing have given way to new forms. Short pieces of informal writing are now the norm in both the professional and personal areas of our lives: e-mail, instant messaging, blogging, and others. The rules that govern this new writing style have developed quickly, in a rapidly changing technological environment. In the process of accommodating these new conventions, we’ve learned to abandon detail in our writing, and to celebrate brevity. We’re more connected in some ways—commerce is quick and easy, and transactions are lightning fast. But we may actually be communicating and understanding less, just skimming along the surface.

The sheer quantity of disposable online writing reflects the quickly evolving landscape of our written interactions with each other. There is so much to take in, it hardly matters if only the tiniest percentage is actually worth reading. But at the same time, we are forced to sift through a lot of material in order to find what we need. In his speech on reading, Balfour also said, “The best method of guarding against the danger of reading what is useless is to read only what is interesting….” Balfour, however, never had a billion documents at his fingertips.

Another sure sign of a broad cultural change in writing can be seen in the magazines and newspaper redesigns that adhere to web composition trends. Short, punchy stories have superseded long-form pieces. The publishers expect that people who are used to obtaining news from the web will desire quick bites of information, rather than a full meal. And while the long form is far from dead, it is no longer dominant. Granted, the decline of the feature story began before the web, when flashy publications such as USA Today started feeding us our information in nuggets. But the web has firmed up the practice, making it commonplace, rather than an exception.

Understanding and Retaining Information We Read Online

Given the reading limitations of the low-resolution screen, it’s worth exploring a separate but related issue: the degree to which people are understanding and retaining what they read online. By scanning text and concentrating on only select pieces, online readers may be taking in substantially less than the full meaning that authors intend.

To make matters worse, the deep-reading skills that we’ve acquired and practiced offline—underlining, circling, highlighting, and writing notes in the margins—which create connections in our mind between the new text and what we already know, can’t be used on a web page. While tools such as PDF commenting in Adobe Acrobat are useful for indicating corrections to documents, they’re not very friendly for note taking.

The encyclopedic nature of the web and our ability to instantly access this information means that we do not need to remember everything we read, but rather only need to remember where to look it up. It is likely that, in conjunction with having difficulty reading online content, we’re paying even less attention, and committing less and less to our long-term memories.

Research on information retention and understanding is still underway, but early evidence has shown retention rates thirty percent lower for text read online than for text read in print. What can you remember from what you read online yesterday?

Redefining Our Communications, Our Writing, and Ultimately, Our Thinking

There can be little doubt that the end result of our day-to-day use of typical low-res displays for communication is the broad assignment, across a generation of computer users, of a significantly different set of cognitive skills for reading online than for reading print.

Our reading and writing habits affect and reflect our thought processes. So, are these legibility issues changing the way we think? Does it matter? Have we decided that low-fidelity is good enough? That more writing, in short bursts, with minimal editing, is better?

As we break our writing into smaller and smaller pieces, we also run the risk of learning bits of facts out of context. Often when we skim and scan, we experience the textual equivalent of the sound bite. In our quick reading, we run the risk of losing the context of the information, which is just as important as the content we’re absorbing. At a certain point, lower-resolution content is less valuable than its high-resolution counterpart.

Usability Issues Related to Legibility and Reading On-Screen

Reading long text online isn’t impossible, it’s just more difficult than it should be. So what do we do about it?

As with any set of design constraints, the requirements of low-res displays force us to make trade-offs during the creation process, the consequences of which we can’t always fully understand. Designers may trade crisp but jagged lines for the anti-aliased illusion of a curve, or close-up visual detail for a complete but less defined overview, or small difficult-to-read type for screen real estate.

Legibility is so often taken for granted because we know most people aren’t going to read every word we typeset for digital distribution. Is it because text is treated simply as another kind of content to be balanced with the other elements on the page? Or is it because the words alone are never enough—too weak to compete on their own with the other digital content?

All too often as digital designers, we are so focused on getting the information onto the screen that we lose sight of the person on the other side of that screen with whom we’re communicating. How do we ensure that messages are getting through? Our goal is often to say something quickly without losing some vital part of the meaning. Much web usability testing is task-oriented—as it should be—but we must pay more attention to legibility, reading comprehension, and long-term retention of information. Our readers aren’t lazy or stupid, it’s just that their eyes hurt.

Some Suggestions for Improving Legibility

Fonts and general legibility are given little attention in the grand scheme of web and interface design, especially when compared to aesthetic design, interaction flow, and usability. Too often, designers ask, “Can you read it?” when they should be asking, “Is it easy to read?”.

Thousands of years of typographic knowledge has culminated in the refined letter forms that appear on the printed page, yet we often ignore the lessons learned in that media when typesetting for the web. The shapes of letters are so important to our ability to read easily and quickly. Try reading a paragraph set in all capital letters, versus one set in upper and lower case, and you’ll immediately see just how critical the shapes are. We recognize words by their overall shape—the curves and bumps, ascenders and descenders—so the blocky forms created by capital letters are naturally hard to make out. The difficulties we have in recognizing letter shapes online are caused by different factors, but the end result is the same.

One key change in web typography could make a great difference in our ability to easily read text online. Body copy should be set large: Fourteen point is the traditional upper limit for print media; eighteen point should be about right for web copy. Aesthetically, the text may look a little unsophisticated at first, but you may be surprised how much more relaxing it is to read.

The fact that there are so few well-designed fonts for setting web text in English—probably a byproduct of Microsoft’s browser domination—is a little disheartening. Fortunately, we have two, Verdana and Georgia, which work admirably. Their wide bodies and large x-heights make our jobs as readers a little easier. While the question of serif versus sans serif type has produced a great deal of conflicting research, picking a font designed specifically for the on-screen environment is always a good choice. Microsoft has even designed a suite of new screen-optimized fonts for Windows Vista, when it finally arrives.

When you must set small type, use pixel fonts, also called bitmap fonts, which are screen optimized. At small sizes, anti-aliasing causes type to look blurry, and the clean—if jagged—lines of pixel fonts are the best way to make tiny letters legible. There are numerous pixel fonts to choose from. My favorite is the free Unibody, from Dutch foundry Underware, which contains upper and lower case, small caps, italic, bold, and extra bold.

Seeing the Future

Communicating using digital writing—traversing that distance between the symbols on the computer screen and real understanding in another human mind—is still one of the most important and most difficult tasks web designers face. The low-resolution display has shaped writing in ways we could not imagine when the personal computer and the web first became items for mass consumption. Until computer displays offer higher resolutions that are more comfortable to read, we can improve readability of text on the web by setting type large and choosing our fonts wisely, helping our users to more painlessly get the message through the medium.

See Jonathan Follett’s companion piece Display 2.0: A Look Forward to the High-Definition Web and Its Effect on Our Digital Experience running concurrently at UXmatters.

Related Topics: Technology, Content, Interaction Design