How people read on a screen

Reading on a screen is scanning: a visitor hunts with their eyes for an answer instead of reading top to bottom. On a solid block of text the gaze draws an F.

A person doesn’t read, they search

Imagine you open a coffee shop’s website to find out whether it’s open on Sunday. You won’t read the shop’s history from the first line. Your eyes will race over the page looking for “hours” or “Sunday”. Found it, closed it. Almost every visitor to any site does this: they came with a task, not to read.

Research backs this up. Nielsen Norman Group (NN/g), consultants on the usability of interfaces, watched people read pages on the web in 1997. Most scanned the page, and few read it word by word. In 2008 the same group estimated how much of a page a visitor reads in an average visit. It was a minority of the words: at most about 28% on an average page, and more likely about 20%, and the longer the page, the smaller the share. Numbers from studies like these depend on the sites and the tasks, so remember not the figure but the picture: text on the web is scanned, not read.

From this follows the main rule of the lesson. A page is less like an essay and more like a shop sign with a directory beneath it. The sign shows what’s here and what it’s for. The directory lets you find what you need. Detailed text is necessary, but it stands behind the sign, not in its place.

Check yourself: why is a page written to be scanned rather than read from top to bottom?

Because the visitor has come with a question and is hunting for the answer. If they don’t find it within a few seconds, they leave. They start reading straight through once they’re sure they’ve found what they came for.

How the gaze moves: the F, the layer cake and the spots

In 2006 NN/g recorded the eye movements of 232 people reading pages and folded the recordings into “heatmaps”: the longer the gaze lingered, the warmer the color. Most often the map looked like the letter F:

1. the gaze runs along the top line from left to right;
2. it drops a little and covers a second, shorter line;
3. then it slides slowly down the left edge.

The conclusions at the time were these. The first two paragraphs matter more than the rest. The starts of lines, headings and paragraphs get noticed more often than their ends. So the point belongs at the very start.

Now for the place where this is easy to get wrong. The F is not a goal but a symptom. NN/g later explained that the pattern appears when text runs as one solid block with no markup: the eye has nothing to catch on and slides down the left edge. If the page has informative subheadings, the gaze jumps from one to the next, and another pattern appears, which NN/g called the “layer-cake pattern”: the person runs over the headings like layers and stops where they find what they need. There’s also the “spotted pattern”: when you’re looking for a particular word, number or link, the eye skips from one eye-catching spot to another. These are good pictures. Of them all, the F is the worst.

One more honest caveat. NN/g’s studies were done mostly on English-language pages, read by eyes moving left to right. Languages written right to left, such as Arabic and Hebrew, mirror the layout, and scripts without spaces between words, such as Chinese or Thai, read differently again. The advice about headings and the starts of lines is usually carried over to other languages unchanged, but that’s an assumption, not a measurement.

Experiment with the diagram. It doesn’t measure a real gaze: it’s a teaching model in which the order of “what is noticed first” comes from the research, and the seconds are approximate. But the difference between two versions of the same page is visible at once.

Wall of text Page built for scanning

The visitor looks for, seconds: 5

Welcome to our workshop’s website!

We are delighted to welcome you and invite you to explore

our services. Our company has been in business

for many years and strives to provide

high-quality service at affordable prices

to every customer. We use only the best

parts and a personal approach to everyone. Give

us a call and we will be happy to help.

Words noticed: 15 of 62. From what was seen, these questions can be answered:

• · What do they do here?
• · Who and where?
• · What does it cost?
• · What do I do?

Check yourself: what is the F-shaped pattern, and how should you treat it?

It’s how the gaze moves over a solid text with no markup. It’s a sign that the text was badly prepared for scanning, not a layout to design for.

Techniques for a page that can be scanned

None of the techniques below is magic. Together they do what research calls “scannability”: the eye finds what it needs, and the brain doesn’t spend effort picking the page apart.

1. The first screen answers four questions. The first screen is what you can see without scrolling. The visitor should understand what this is, who it’s for, how much or how, and what to do. In the brief these questions correspond to the fields “who and what”, “for whom” and “main action”. If the first screen holds only the words “Welcome!”, it has been wasted.

2. A subheading names what’s inside. “Services and prices” beats “What we can offer you”. “How an appointment works” beats “Our approach”. The test is simple: read only the headings, one after another. If you can retell the page from them, they’re good. Witty headings are lovely in a magazine, but on a services page it’s better to be clear.

3. One paragraph, one idea. A short paragraph, usually two to four lines, is easier to take in at a glance and easier to skip if you don’t need it. Put the main idea in the first sentence: someone who reads only that still gets it. And remember the phone: five lines on a computer take ten on a narrow screen.

4. A list where the items are equal. Services, steps, documents, conditions: anything you can count goes in a list. If order matters (instructions), the list is numbered. If you’re telling a story you don’t need a list: it should flow.

5. The point at the start of the line. The eye catches on the first words. “Price: from $40” works better than “If you’re interested in finding out how much it costs, then…”. This is called putting the main thing first. Numbers and the names of actions stand out most at the start.

6. Emphasize sparingly. Bold one or two key words in a paragraph, never whole sentences. A link needs text that names the action or the place: “Book a consultation”, “Licenses and credentials”. A link that says “here” or “click” tells nothing to the eye or to the screen reader that blind people use.

And one more point, about line length. Lines that are too long are hard to read: the eye loses track of which line to go to next. Typographers advise keeping to about 45 to 75 characters a line. You saw how to limit it on a page in the lesson on typography (the max-width property in ch units). What matters here is something else: a narrow column reads better than a wide one.

Check yourself: which four questions should the first screen answer?

What is this, who is it for, how much or how, and what do I do? In the brief the answers live in the fields “who and what”, “for whom” and “main action”.

The five-second check

How do you know whether the first screen worked? There’s a simple test, and anyone can do it. Open the page and look at it for exactly five seconds. Close it. On a sheet of paper write what you managed to understand: what it is, who it’s for, what to do. Then compare your note with the brief.

It’s best if someone who knows nothing about your project looks at the page: a friend, a neighbor, a colleague. You already know what you meant to say, and your brain will fill in the meaning the page leaves out. A stranger’s eyes are more honest. If they didn’t find what you think is the main thing, it isn’t on the first screen, however much you wrote below. Usability people run a version of this under the name “five-second test”.

Don’t think that scanning replaces reading. It only opens the door. Someone choosing an expert for a serious matter will read even a long text, but first they make sure within seconds that the page is about the right thing. That’s why the details aren’t thrown out. They go lower down or onto pages of their own, and the first screen keeps the sign.

Check yourself: what is the five-second check for?

It shows what a visitor who knows nothing yet about the project really understands. What they didn’t write down isn’t on the first screen.

Practice

In the preview is your project’s page written the way pages were written in the worst years: one solid paragraph with “Welcome!” and the words “click here”. Take it apart.

1. Build the first screen in a header element with the id first-screen: an h1 heading, a phrase about who you are, a phrase about who the project is for, and a link with the main action.
2. Put the rest in a main element. For each section from the brief make an h2 heading and one or two short paragraphs, each p on its own line of the file.
3. Write the services or products as a ul list.
4. Look at the page for exactly five seconds, close it, and fill in the note at the bottom: what you understood and what you couldn’t find.

The texts inside the paragraphs can be anything for now. What matters is that the shape is right. You’ve taken the page apart and you know what the eye looks for first. The next step is to fill the pieces with words that carry meaning. That’s the next lesson, on the plain, informative style.