How People Read on the Web

A man looks at his computer screen with concentration.

Eye-tracking studies tell us a lot about how people read on the web.

August 2012
A legacy dissemination resource from NICHCY

 

Understanding how people read on the web and search for information can directly influence how we design our webpages and websites. One of the most influential researchers into web reading behavior has been Jakob Nielsen, who sums up his findings like this:

How Users Read on the Web
They don’t. (1)

The truth is, people are going to skim and scan all the lovely content you’ve written, looking for something (a keyword, a header perhaps?) that catches their attention or matches the reason they’re visiting your website in the first place.

But we’re getting ahead of ourselves. First, the research.

Back to top

Eye-Tracking Studies of Reading

We’ve learned a lot about how people read on the web by tracking people’s eye movements and fixation points while they look at web content. Interestingly, eye-tracking studies have been conducted since the 1800’s as part of learning more about how we read.  From those early studies, researchers learned that:

Reading is not a smooth process of moving our gaze from left to right as we follow the words across the page.

We sweep our eyes over the text and often stop briefly (called fixations), then move forward to new text or go back over the text we’ve already scanned. (2)

The chances that a reader will fixate on an individual word depends on how long the word is (we tend to skip over short words) and whether the word is a content word (85%) or a function word (35%). (3)

Back to top

Eye-Tracking Studies of Reading on the Web

Eye-tracking studies have also greatly informed what we know about how people read on the Internet. Because the Internet has become such a rich source of information, web visitors can and do make lightning-fast decisions about whether a webpage is worth reading. They sweep their eyes across the page in a pattern that’s roughly shaped like an F, starting in the upper left corner. They take two horizontal swipes across the page, then swipe vertically down the left. These three heatmaps of web users’ eye movements capture this dominant reading pattern.

Heat map of readers' eye movements form a rough pattern that looks like the letter F.

     The F-shaped pattern for reading web content.

 

See the F? (It’s especially apparent in the center picture.)  These pictures come from Jakob Nielsen’s research, as posted on his website. (4)

Nielsen’s been studying the reading behaviors of web users since 1995, and his findings are as fascinating as they are useful for web designers and web content writers. His website is also a testament to those findings, because its design is driven by them.

So, in addition to identifying the F-shaped pattern that readers on the web use, what else has Nielsen found? What conclusions does he draw about how we should then design and present our content so users can quickly find what they’re looking for? Read on, and see.

Back to top

Users Look Most Above the Fold

  • Web users spend 80% of their time looking at information above the page fold (meaning, the part of the webpage that’s visible when users first land there). Although users do scroll, they allocate only 20% of their attention below the fold. (5)
  • Users spend 69% of their time looking at the left half of the webpage and 30% viewing the right half. (6)
Implications  for Content Writers
  • Put the most important content first, in the opening sentences and paragraphs. Don’t start with that nice, smooth blah-blah intro.
  • Get to the point. Immediately.
  • Users are much more likely to scroll past the fold if the first content they see captures their attention or matches their need.
  • Don’t center text (since readers strongly prefer the left side of the page and won’t even see text that’s centered).
  • Keep headers (and links) flush to the left margin, so that visitors can readily see them, especially during their downward swipe of the page (the stem of the “F” pattern).

Example
Each content page of Nielsen’s site starts with a summary of no more than 2 or 3 sentences placed on a light yellow background, so that visitors get the essential message of that page immediately.

Back to top

Users Scan and Skim Web Content

  • Web users at most have the time to read little more than 20% of the words on a webpage during an average visit. (7)
  • “Scanning text is an extremely common behavior for higher-literacy users.” (8)
  • Lower-literacy users “plow text” rather than scan it.  (9)

Implications  for Content Writers

  • Make webpage text easy for users to scan.
  • Use bolded headings and subheadings that make sense and include keywords of the content.
  • Use bulleted lists when you can to break up content. Bullets are also easy to scan.
  • Read the suggestions offered in Helping Readers Skim and Scan.

Example
This page is purposefully written to be easy to scan and skim through.

Back to top

Credibility Matters

Credibility of the website is important to visitors. They want to know that the information offered is accurate and objective. They ignore any page that sounds or looks like an ad.  Exaggerations, boasts, and market-ese hype also turn visitors off—and cause them to leave. As Nielsen says, “Web users are busy; they want to get the straight facts.” (10)

Implications for Content Writers

  • Write in plain language that’s stripped of big claims or promises you can’t keep.
  • Use objective, non-biased language. Avoid “loaded” words that spark strong emotions or indicate your particular viewpoint or opinion.
  • Offer an “About Us” section that says who you are, what you do, and what services or products you offer to visitors to your site. Include a tagline on your home page that summarizes, in one sentence or phrase, what you do.

Example | Here’s a sampling of taglines from around the TA&D network…

Center Tagline
CADRE Encouraging the use of mediation and other collaborative strategies to resolve disagreements about special education and early intervention programs
IDEA Partnership Dedicated to improving outcomes for students and youth with disabilities through shared work and learning
NICHCY Helping you help children with disabilities
PEPNet Advancing educational opportunities for people who are deaf or hard of hearing
Reading Rockets Teaching kids to read and helping those who struggle
NCIPP Your source for induction and mentoring in special education

Wouldn’t you agree that these taglines make it instantly clear what the mission of the project is? Visitors get an instant “read” on who and what we are and what we’re up to, with taglines like these.

Back to top

PDF Files Can Cause Problems

Oh, say it isn’t so! PDFs seem like such a nice thing to offer!

Apparently PDFs can cause users many problems, such as:

  • Users have to have software that will open a PDF file (and many people don’t)
  • Users don’t want to download and install yet another software, just so they can read the PDF
  • PDFs often make the BACK button inoperable—and the BACK button is like a lifeline to web users
  • PDFs are hard to read online, especially when the content is presented in columns (making up-and-down scrolling necessary to flow along with the text).

PDFs are best used when visitors download them for later reference or print them out and read them like traditional print materials. (11)

Implications for Content Writers | Don’t offer your content in PDF only. Don’t surprise visitors by content that suddenly opens up in PDF. Offer content via webpages in HTML, which are quicker to load, keep the BACK button functioning, and don’t interrupt the visitor midstream with requests to download a file or messages about missing software (in this case, visitors who don’t have Adobe Reader).

Examples | Reading Rockets has an excellent website that doesn’t appear to use PDFs (at least we haven’t stumbled upon any). The pages load quickly and the content is easy to read online.

We have long provided PDFs online, so we’re a bit chagrined to read this finding about PDFs. Fortunately, most of our webpages are also available as straight HTML text online, with the option in the file of opening or downloading a PDF version of the content. We continue to offer PDF as an option to our visitors, because the contents are laid out, look nice (we think), and are suitable for easy sharing with others at conferences and meetings.

Back to top

Images Need to Deliver Content Messages or They’re Ignored

Eye-tracking studies have also shown how web visitors react to graphics such as photos or diagrams.

  • They pay close attention to images that deliver content messages, such as photos of a product or of a real person (as opposed to a stock photo of a model).  
  • They completely ignore “feel-good,” “fluff,” and non-information-carrying photos and graphics. (12)

Implications for Content Writers | While pleasing pictures can definitely spruce up our websites, they also take up valuable real-estate on the page. Use images to carry content or illustrate the points you’re making. Make sure you include <alt> tags describing the image well, so that visitors with screen readers can also benefit from the graphic.

Examples | The photo above of the F-shaped scanning pattern that web readers use is an example of a content-carrying image. Note that it has a caption. And we’ve certainly included an <alt> tag description for our visitors with screen readers.

Back to top

Visitors Like Standard Web Features

Web users rely on consistent and predictable placement of standard website features, such as the search box in the upper right hand corner. They also look for such features as “About Us” or “Contact Us,” which let them know who you are.  When they visit a link on your site, they want to see that the link then changes color (letting them know they’ve visited it). Other conventions that most visitors are used to, understand, and want to see:

  • your company’s logo in the upper left corner
  • no splash pages
  • a breadcrumb trail that shows them where they are in the site (and which allows them to get “home” with a click)
  • a site map

If these conventions are violated, hard to find, or hard to use, visitors are likely to leave the website and go elsewhere. (13)   As Jakob Nielsen says, these conventions ” increase users’ sense of mastery over the website, increase their ability to get things done, and increase their overall satisfaction with the experience.” (14)

Implications for Web Developers | Do follow the standard conventions of the current web. This helps visitors know where they are, how to move forward or back, and how to find certain kinds of information.

Examples | Look at your own website. Is there a search box where people can enter a term and run a search of your content? Is it located in the upper right-hand corner? How about the other elements mentioned above —- is there an About Us page? A page that tells folks how to contact you? Do your links change color for users once they visit that link?

Back to top

For More Detailed Info about How We Read on the Web

These findings only scratch the surface of Nielsen’s research. We highly recommend a lengthy visit to his website—with multiple returns for more information.

Of course, Jakob Nielsen isn’t the only one vigorously investigating web design and user behavior. There’s a fabulous amount of information on the web (naturally) and in print about this subject. Other sources of information include:

 Eye Tracking Update | Find the latest news from the eye-tracking world. Also find a range of products you can use to conduct your own eye-tracking studies.  http://eyetrackingupdate.com/

The Best of Eyetrack III: What We Saw When We Looked Through Their Eyes
http://www.math.unipd.it/~massimo/corsi/tecweb2/Eyetrack-III.pdf

Eyetrack III: What News Websites Look Like Through Readers’ Eyes
http://www.poynter.org/uncategorized/24963/eyetrack-iii-what-news-websites-look-like-through-readers-eyes/

Back to top

Want to read another section of Writing for the Web?

Want to read another of the “chunks” in our Writing for the Web discussion? Use the links below to jump there quickly.

Back to top

References

1 |  Nielsen, J. (1997, October 1). How users read on the web. Available online at: http://www.useit.com/alertbox/9710a.html

2 | Reichle, E.D., Rayner, K., & Pollatsek, A. (2004, March). The E-Z reader model of eye-movement control in reading: Comparisons to other models. Behavioral and Brain Sciences, 26(4), 445 – 476. DOI:10.1017/S0140525X03000104

3 | Richardson, D.C., & Spivey, M.J. (2004). Eye tracking: Research areas and applications. In G. Wnek & G. Bowlin (Eds.), Encyclopedia of biomaterials and biomedical engineering (pp. 573–582). New York: Marcel Dekker.  Available online at:  http://www.eyethink.org/resources/lab_papers/Richardson2004_Eye_tracking_C.pdf

4 | Nielsen, J. (2006, April 17).  F-shaped pattern for reading web content. Available online at: http://www.useit.com/alertbox/reading_pattern.html

5 |  Nielsen, J. (2010, March 22). Scrolling and attention. Online at: http://www.useit.com/alertbox/scrolling-attention.html

6 |  Nielsen, J. (2010, April 6). Horizontal attention leans left. Online at: http://www.useit.com/alertbox/horizontal-attention.html

7 | Nielsen, J. (2008, May 6). How little do users read? Online at: http://www.useit.com/alertbox/percent-text-read.html

8 | Ibid.

9 | Nielsen, J. (2005, March 15). Low-literacy users: Writing for a broad consumer audience. Online at:  http://www.useit.com/alertbox/20050314.html

10 |  Nielsen, J. (1997, October 1). How users read on the web. Available online at: http://www.useit.com/alertbox/9710a.html

11 | Nielsen, J. (2011, March 14). Can hated design elements be made to work. Online at: http://www.useit.com/alertbox/hated-design.html

12 | Nielsen, J. (2010, November 1). Photos as web content. Online at: http://www.useit.com/alertbox/photo-content.html

13 | Nielsen, J. (2011). Top 10 mistakes in web design. Online at: http://www.useit.com/alertbox/9605.html

14 | Nielsen, J.  (2004, September 13). The need for web design standards. Online at: http://www.useit.com/alertbox/20040913.html

Back to top