Design & UX

Ever Wondered What Your Users Looked at First?

By Francis Till

Text-centric commercial websites are taking a pounding this year, with layoffs and closures affecting even the giants as advertising revenue streams slow. One result of this revenue squeeze shows in such widely read information sites as, The Economist, and the Financial Times, all of which are experimenting with new web formats to better compete for readers.

The average webmaster is not, of course, involved in the production of a major news site, but any webmaster whose site depends on text-based content can learn much from a close examination of the design changes taking place on these content behemoths, all of whom have already solved the threshold content issue (quality) and are now wrestling with usability issues to draw and keep reader bases.

Across the board, the changes these sites are making are closely related to positions long held by web useability guru Dr. Jakob Nielsen, who has been arguing for almost a decade that the rules of effective online presentation are completely unique to the medium. Dr. Nielsen has devoted his work to showing us just how that uniqueness plays out in practice and his work has been augmented now by an online news reading study from Stanford University and the Poynter Institute, the Stanford-Poynter Project.

The Message is the Message

As designers, we tend to forget, especially when in the grip of a new presentation tool, that, as Nielsen said of web content in 1997: "the medium is not the message; the message is the message… " (alertbox). In application, this means that for readers, the medium should be transparent, and the single biggest obstacle to achieving that goal online is a website that intrudes upon text, or just doesn’t present text the way users take it up.

Increasingly, text heavy site pages at premium news sites are constructed in ways that might have come from a Nielsen playbook, and while some (like Digital NYT) still try to replicate the look of a print vehicle, most are moving away from long-cherished print layout and presentation standards toward styles that recognise the character of the Web interface.

The Scale of the Problem

The Internet started out as a text-centric medium, full of plain vanilla ASCII documents that just rolled out on the (often green) screen, but a quick look at the Yale Web Style Guide <> is enough to convince anyone that text presentation has long been a content issue of independent importance.

Current statistics suggest that about 32 million websites(domainstats) are sharing 400 million surfers (NUA ) globally, and while there are a well-documented 1.3 billion web pages (documents) within reach of search engines, there are at least 500 billion that are not, according to the folks at LexiBot.

This means that the old ASCII webstream has turned into a polyglot river of Amazonian dimensions upon which website design is evolving as a multi-nodal industry often afloat like a hapless, jury-rigged raft, contending with competing legacies from the ASCII veterans as well as print designers who have switched media, and both groups often at complete odds with designers who have been nurtured on interactive broadband. So, what makes one architecture more effective than another?

Where you stand is what you see …

Obviously, there is no single canon that can encompass the entire enterprise, but the Stanford-Poynter and Nielsen work on how readers – and eyes — interface with computer screens provides some important principles about how websites can most effectively present text content.

If you’re a fan of Dr. Nielsen’s, and many web designers are, much of this may be old news. For years, Jakob Nielsen has been telling us that text on the Web is absolutely not text on paper, and that it has its own rules of organisation, layout and style – rules that often directly contradict those that reign in print.

According to Nielsen, 79 percent of readers online will simply scan a page, picking up bits and pieces as they go, rather than "read". In part this is because it is difficult to read text on low-resolution screens, but it is also something that may be inherent in the hyperspace nature of the medium.

How can you make your points, then? Nielsen says you can, but only if your text content:

  • is broken up by headings
  • is shaped into lots of punchy, single idea paragraphs
  • puts key phrases in bold face
  • bullets key points
  • avoids jargon and rhetoric
  • is straightforward, and
  • is short.

In May 2000, almost everything Dr. Nielsen has been telling us was verified by the Poynter Institute study of eye-tracking movements among online readers, but with a few controversial additions.

The Poynter-Stanford study …

Marion Lewenstein, Professor of Communication, Emerita, at Stanford University, was the principal investigator in the Poynter-Stanford eye-tracking study, which ran for four years and involved 67 subjects – about the same size as the study group in Nielsen’s pioneering work. After being hooked up in a contraption that looks suited for space travel, the subjects went online to look at news sites, arguably the most text intensive of all information heavy websites.

The eye movements of the study group were tracked for point and duration of focus, and the measurements were extremely fine.

Text first, then graphics …

Perhaps the single most important finding of the study surprised even the people running it: the eye goes first to text. Of the first three eye-fixations on a page, only 22% were on graphics; 78% were on text.

In their own words: "more often than not, briefs or captions got the first eye fixations when the first page came up. Then the eyes came back to photos or graphics, sometimes after readers had clicked away to a full article before returning to the first page." The study was done on high-speed university connections using good computers, so the lag between text and image visibility was much less than it is on most dial-up connections, but even after pages were fully loaded:

Of all graphics, aside from banner ads and photos, available to a subject throughout a session, only 22 percent were looked at. Banner ads, which were broken out separately from other graphics, did somewhat better: 45 percent were looked at. And photos did best: 64 percent were looked at. These figures stack up against briefs and articles text, which were looked at 82 and 92 percent of the time, respectively.

In what may be good news for branding through visuals, however, the study did note that images may be peripherally visible even when they are not points of direct fixation

The study also found that the eye goes naturally to the center of the screen, unlike our learned approach to paper.

Interlaced browsing is the norm …

Just as startling was the finding that subjects did not visit pages or even websites sequentially. Rather, they would open a page, scan it briefly, open additional pages, and then engage in back and forth reading behavior – interlacing information sources throughout their browsing sessions, and almost never reading all of anything.

Nielsen says he noticed this behavior as early as 1994, but it didn’t make it into the useability literature in a big way because his studies didn’t involve a sufficiently rich hyperspace. The online newspapers used in the Stanford-Poynter study provide a rich hyperspace, but users may seek out alternatives on their own, particularly to explore something they find in their initial browsing session. Also, as the ordinary computer gains power, this kind of resource-gobbling session won’t produce the inhibiting negatives that would have been the norm for Nielsen’s respondents.

The importance of this cannot be overstated: your site is being viewed in a context you cannot control, and must be able to thrive in real-time association with the competition. The Web is the actual user experience, not the site.

Scrolling is not a problem …

Finally, in spite of the widely held belief that forcing users to scroll is almost as bad as forcing them to wait, the study found that it just didn’t matter if the content was important. In fact, reading behavior was more likely to take place below the first screen than above – meaning that being forced to scroll, once reading started, presented no barrier to continuing on. This does not mean, of course, that scrolling will take place if there is no reason, but it does mean that proper organisation of information can bring readers down below the first screen in a meaningful way. And each screen has an equal chance of introducing new content.

The upshot …

What these studies mean for text-centric websites runs counter to almost everything in the popular stream of web design thought, but much of what is taking place on major news sites seems to be taking it in. Interlaced browsing, for example, is being recognized by the increased use of "new window" calls for hyperlinks, there is movement away from using images to punctuate content, and many sites are placing key features below the first screen

Also, there is an increasing appreciation of the Nielsen credo that, the attempt to impart credibility by using advanced presentation technology may actually work against the goal of having it read. Sites like the Economist and the Financial Times are paring back on interactive technology and complex menu structures because they tend to increase user problems.


It’s not just news sites that are taking these lessons to heart, but for them, the lessons are survival critical and what they learn in this struggle to enhance useability can guide all of us in other forms of information-centric design. So have a look at the Economist … and then have a look at Pizza Hut, Quaker Oats, and the astonishing effort by the Zimbabwe Posts and Telecommunications Corporation.

No Reader comments

Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.