Eye Tracking and Web Content Scanning

Layer Cake Eye Tracking Plot From Nngroup.com Modified

Photo Credit: Layer Cake Eye Tracking Plot From Nngroup.com Modified by Frank Gomez to show the F and Z layouts in yellow and green highlighting.

Definitions used in this post:

Above the fold / the fold: The “fold” on a web page is the area visible without scrolling on a typical screen size. When this article was written, the typical screen size, excluding phones, was 1366px x 768px for many years. Now there are almost as many screens that are 1920px x 1080px (1080p HD sized screens).

F Layout: The F layout can be intentional or not. If you look at the image above you’ll see the F layout at the top of the page. This often happens naturally because writers often start with a fairly long title (first heading or “Heading 1”), then there is an introductory paragraph and the second heading which happens to be shorter forming the letter “F”.

Z Layout: The Z layout can also be intentional or not. See the image featured at the top of this post. The eyes read a heading and scan down diagonally from right to left and then go across the page on another heading or even reading a paragraph.

Bounce Rate: Is how often someone visits one page of your website and then leaves without visiting any other pages.

The Fold is Becoming Irrelevant

As a web developer I’ve always considered “the fold” in my designs. While considering what the viewer sees “above the fold” is very important in today’s world, we are dealing with devices that range from 320 pixels wide by 568 pixels tall (Yes, iPhone 5’s are still being used today) to 4 and 5k displays (thousands of pixels wide by over a thousand pixels tall). All of these devices are used for viewing web pages and they are very different. So different that the definition for “the fold” is becoming less and less useful.

The truth is, no one is adjusting content above the fold for every imaginable size of device. Typically designers who carefully review their layouts are considering 3 sizes: small, medium and large. Another big factor is aesthetics, which for most designers, overrides the desire to have content above the fold.

To Scroll or Not to Scroll?

Because of the wide variety of displays and devices, it makes sense to consider that many people will scroll if they don’t see anything clickable within the viewport. If not, they will choose something from your navigation OR they will leave your site.

The best practice is to give users a reason to scroll but in my humble opinion we are years beyond needed so much direction. No one needs a “Scroll” button to tell them there is more content below the big hero image. There are almost 3 billion smartphones in the world today. People are used to scrolling when they want to read more or view more images. It can even be argued that users on tablets and desktops are used to scrolling as many of them use touch pads and mouse wheels to navigate.

Assuming they landed on your webpage for some compelling reason, I argue that they will stay and scroll or use the navigation without an obvious button telling them to scroll.

It is important to remember that many (probably most) visitors to your website are:

  • spambots
  • salespeople
  • competitors
  • only somewhat curious “surfers”

That is why the typical bounce rate for a website is so high. The vast majority of visitors do not sincerely care about what you are offering, to read in depth. That, ..unfortunately, is the world we live in.

Bounce rates are often lower on things like news articles where users really dig into reading the content vs. searching for what to read on a page.

The Layer Cake Pattern

Any person familiar with the fold is probably familiar with the F and Z layout to create visual hierarchy on a page. The layer cake pattern is essentially what happens when users scan the pages headings. This includes the sighted and those with disabilities. Disabled users will tab through the content to choose what to read thus creating the layers of the cake.

For a detailed article on the topic visit the Nielsen Norman Group.

The image above is interesting because you can see the F and Z’s formed within the layer cake pattern. The F and Z layouts don’t have to be “forced” by the writer, they can appear organically by using good headings.

Hierarchical Headings and Sub-Headings

In fact all three, Layer cake, F and Z Layouts can and should be made without trying, from a design perspective. They should be automatically encouraged by writing well and choosing good sub-headings. Also, it is important to choose distinct typefaces and sizes so the sighted user can easily distinguish the headings and sub-headings from the normal copy.

Finally, hierarchical headings and sub-headings are essential when writing for disabled people. The hierarchy of a page makes it easy for all users to decide what to read.

Work with a web developer that uses best practices for web design.