In Part 1 of this series, we took a brief look at how human vision works, and we began examining how readers read blocks of text and visually scan pages and screens.

To better understand how people look at visual information, researchers have conducted eye-tracking studies using specialized cameras and software that can track what a user is looking at on a screen. The software can then play back the scanpath – the series of fixations and saccades – to show what areas of the screen the participant has looked at and how long they have spent gazing at each fixation point. While the scanpaths of individual users can vary quite a bit, if you ask a number of users to look at the same webpage or screen, you can create “heatmaps” that show where users spend the most time looking.

Probably the most detailed, or at least best-documented, eye-tracking studies have been done by Jakob Nielsen and Kara Pernice in their book Eyetracking Web Usability. They discovered some interesting findings:

• For most websites, rather than following the Z-shaped scanning pattern, most users follow a roughly F-shaped pattern. They read across the top, and then go down the page and read lines of text left to right. But users are, in general, more likely to read complete paragraphs or lines of text near the top of the screen, whereas they tend to lose interest and just briefly scan the text near the bottom of the page. And then, upon reaching the bottom of the screen, users often apparently make an additional quick scan down the left-hand edge of the page (especially if there is a sidebar with links). So if you make a heatmap of the parts of the screen that get noticed and read, it makes a roughly triangular shape, indicating that most attention is given to the upper-left corner and little attention is given to the lower-right corner (see some of these heatmap images at Jakob Nielsen’s site).

• Graphics and especially photographic images can attract attention, but only when they are a relevant and integral part of the content. People seems to be able to quickly judge whether images are just decorative stock photos, and such superficial photos get very little attention.

• Users tend to ignore elements that are repeated on multiple pages – once they’ve seen the logo or navigation bar at the top of the page, they don’t look there again unless they need to. Most significantly, a majority of users pretty much completely ignore banner ads; when there was a banner ad at the top of the webpage, most users started their F-shaped scans below the ads, where the content begins.

• One amusing finding was that, when looking at images of people, the female users in the study tended to look only at the person’s face, whereas the male users looked at the face but also glanced down to check out “private anatomy” (cleavage and crotches).

Something that I haven’t seen discussed in eye-tracking studies is the degree of focus of the viewer’s eyes. I personally sometimes scan pages by defocussing my eyes, which makes the page look a little blurry, but enables you to perceive the whole layout at once, somewhat like viewing the page from ten feet away. I don’t believe that eye-tracking equipment can detect the degree of focus, only the direction of gaze.

In the next post, we’ll look at some ways to influence the paths that readers’ eyes follow when they see a page or screen.

[ad#AdSense_Banner]

We’re going to start our exploration of visual design techniques by talking about composition, or how you lay out and balance the components of a page or screen. But before we get into composition techniques and principles, let’s first learn about how people visually scan pages and screens.

Visual designers have long been interested in figuring out how to guide readers’ eyes across the printed page or computer screen. Artists creating posters use emphasis and positioning to draw your attention to a headline; cartoonists carefully draw cartoons so that you notice the characters and read the speech bubbles in a certain order; otherwise, the jokes might not make any sense.

By laying out elements on the page in certain ways, you can affect the order in which people will notice the elements and how long they will spend looking at them. Or, perhaps more relevant for software designers: If you know that people will tend to scan a page in a certain way, you can design your page to accommodate those usage patterns, by putting relevant information in the places where people are likely to look.

So, let’s begin by examining how readers read text on a page.

If a reader is reading a book, like a novel, where every page consists of rows of text (we’ll assume there are no illustrations), then the reader will start by looking at the first word in the top-left corner of the page, scan across the line from left to right to read the words, and then skip to the beginning of the next line. The reader will again scan left to right to read the line, skip to the next line, and continue in this pattern until the bottom of the page is reached. (And, yes, in languages like Arabic and Hebrew, readers will read right-to-left instead.)

However, when the eye scans across a line of the text, it’s not actually a smooth movement as you might expect. Rather than moving smoothly in a line, the eyes instead jump rapidly between spots on the page, called fixation points. These jumps are called saccades. The brain doesn’t receive any visual information during saccades, but it’s able to stitch together the images received at the fixation points, and the brain perceives it as “seeing in a line”.

The area that you can see clearly at each fixation point – i.e., the area that you can focus on – is called your foveal vision, and that area is surprisingly small: it’s only about two degrees of your visual field, or about twice the width of your thumb if you stick your thumb out at arm’s length. Try holding your arm out straight and put your thumb on a paragraph of text on your screen right now. Look at your thumb, and without looking away, try to see how many words on the screen you can clearly distinguish around your thumb. Your area of focus is pretty limited, isn’t it?  You’re still able to perceive the rest of the screen in your peripheral vision, but you can’t see those other parts of the screen clearly; you can only resolve text in the narrow area that you’re focusing on.

Now that we know a bit more about how human vision works, let’s go back to how readers perceive pages and screens. For page layouts that are more complex and heterogeneous than solid blocks of text, it’s more difficult to say exactly how readers’ eyes will move across the page, and of course, it will differ for each reader, but we can try to make some generalizations.

Traditionally, visual designers have said that when readers look at a complex document like a newspaper, they generally first get an overall impression by scanning the page in a Z-shaped pattern. They start in the upper-left corner, read the title of the newspaper across the top, and then, beginning at the upper-right corner, they gradually skim over the page in a roughly diagonal line until they reach the lower-left corner. Then they skim across to the right, ending in the lower-right corner. Then readers will go back and focus on whatever interests them.

Naturally, this is a vast generalization (and I’m not sure if there are any studies to support this, or whether this is just conventional “received wisdom”). It’s probably true for newspapers without much in the way of color photos or attention-getting headlines… like the staid German daily Frankfurter Allgemeine Zeitung:

But if there is something flashy or exciting on the page – a large color photo, or a bold, interesting headline – the reader will probably look at that first, or perhaps the reader may indeed begin a Z-shaped scan, but interrupt it to look at the interesting bits. Do your eyes follow a Z-shaped scan when you see this Bild tabloid?

Again, general page-scanning patterns are generalizations, and there will be countless exceptions. For example, someone looking for some specific detail will probably search through the page in a different pattern than someone who is just browsing.

We’ll continue this discussion in the next post, where we’ll look at what eye-tracking studies can tell us about how people look at a page or screen.

[ad#AdSense_Banner]