Letter-perfect Layouts:

The ABCs of F- and Z-Shaped Reading

No one creates web content with hopes that it will be ignored. But we as digitally focused writers and designers also know that people scan web pages instead of fully reading them. So how do you guarantee users won’t breeze through the text you worked so hard to research, compose, and deliver?

To ensure individuals view and process information on your post-click landing page, it’s essential to establish and follow an organized visual hierarchy. This increases the chances that readers find your webpage usable and worthwhile.

There are two pattern layouts into which most web content fits: the F-pattern and the Z-pattern. But do you know how to use each layout — and under which circumstances the patterns should be applied? Understanding the implications of the F-shaped and Z-shaped patterns are critical for your business to control visual access and comprehension of your web page content.

An F in Speed Scanning

An eye tracking study by the Nielsen Norman Group determined that the dominant reading pattern for web content is F-shaped. This means that the human eye tends to read content first in two fast, horizontal movements, and then in a vertical movement across the left side of content. Typically, the first horizontal movement spans a larger area than the second horizontal movement farther down the page. Additionally, the time spent scanning the left of the webpage varies in speed and thoroughness between users; but the overall F-shape is fairly consistent.

Familiarity with this dominant reading pattern has important implications for businesses and web designers, because an F-shaped template ensures that the most important content on a webpage is immediately visible to users if placed appropriately. Additionally, the F-shaped design makes websites feel more “intuitive” because customers get exactly what they want.

Taking Advantage of the F-Pattern Habit

If you know your users are likely to use an F-pattern scan for text-heavy pages, why fight it? There are ways to take advantage of what you know about users’ behavior in order to lay out your web pages to maximum advantage.

  • Include the most important info on the first two paragraphs of the page.
  • Use subheadings that stand out graphically from the body text.
  • Begin headings with the words carrying the most important info about the following section.
  • Visually group blocks of related content; use a background color or border.
  • Bold important words and phrases.
  • Use special formatting for links, as well as specific cueing verbiage.
  • Call out items in a list or process with bullets or numbers.
  • Edit brutally; cut any unnecessary content.

Add Zest with Z

The other most popular webpage layout follows a Z-shaped pattern. When a page features smaller amounts of text, users default to Z reading since most Western readers will scan a web page the same way they would scan a book: top to bottom, left to right. The Z-shaped format begins in the top left corner and scans to the top right, followed by scanning in a diagonal, leftward sweeping movement, and then continues with a second horizontal motion that reaches the bottom right corner.

Make the Z Pattern Work for You

With a less text-heavy page, the Z-pattern is a great option. Before you start designing and loading content, think about the following considerations:

  • When a visitor lands on your page, what do you want them to notice?
  • In what order do you want them to see the information?
  • What do you want them to do?

If you know the answers to those three questions, then it’s simple to lay out a page that does what you want it to do. Important elements of the page should be placed along the Z-pattern layout. This ensures that users notice the important elements, in the right order, and then do what you want them to (a call to action or click through). Taking advantage of a Z-pattern hinges on placing important information where the user’s eye would naturally fall, then increasing its visual prominence. Prioritizing the information you’re communicating is essential to the success of this layout.

Success Stories

Interacting with a F-pattern layout will feel easy and natural — a “user-friendly” experience. CNN’s webpage is a good example of an intrinsically text-heavy enterprise made friendly in website form. The most important articles are listed across the top for scanning, and then the next most important news pieces listed down the lefthand side of the page. CNN’s logo appears on the top left of the page, fostering brand awareness in readers while they peruse the site. The site makes great use of grouping information via bullets, lists, and use of borders, thus allowing it to be more digestible.

Evernote’s landing page is a well-executed Z-shaped layout. It’s minimalist and doesn’t feature tons of text; it features the important elements clearly. Information includes what Evernote does for a user, what the interface looks like, and multiple buttons to sign up for a free account (or log in). Evernote’s logo is prominent and the page is styled in their signature green.

Which One Fits the Bill?

Choosing an F-shaped or Z-shaped layout depends on how much information you want to present and what you want your user to do with it. Lots of info and want to call out the top points? It’s a clear F. Just a few points of important information and a strong CTA? Z’s your best bet.

Cobalt-60 is the name of our blog, an online digest dedicated to the art and science of communications. (It’s also an isotope of the element cobalt.)

Oct 17, 2020
10 Corporate Communications Best Practices for Science-based Companies

Ten corporate communications best practices every science-based company can use to increase engageme...

Oct 17, 2020
Nine Internal Communications Best Practices

These internal communications best practices can either build or reinforce a communications culture....

Sep 2, 2020
The Biology of Consistency

You often hear marketing experts talk about the value of brand consistency, but they don’t often d...

Aug 27, 2020
Marketing to a Generation Raised in Isolation

Here are Cobalt’s eight predictions about post-COVID marketing....