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, excluding phones 1366px x 768px was almost equal to 1920px x 1080px in popularity. Those two screen sizes are miles apart when it comes to design.

F Layout: The F layout can be intentional or not. If you look at the featured image you’ll see the F layout at the top of the page. It tends to happen 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.


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 out there) 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 miles apart. The truth is, no one is adjusting content for every imaginable size of device. Typically designers who carefully review their layouts are considering 3 sizes: small, medium and large. Sometimes aesthetics 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. Either that, or 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 that. 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 use use touch pads and mouse wheels to navigate.

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

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

  • spambots
  • salespeople
  • competitors
  • only somewhat curious

That is why the typical bounce rate 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 visually impaired. Visually impaired 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.

What is interesting when looking at the image included above is that 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 for 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.