F-Pattern and Z-Pattern Reading Behavior In digital products, there are common layouts that help users read text on a page.

Two of the most popular are the F-pattern and Z- pattern, which get their names from the shapes of their letters. An F-pattern causes users to scan for information on the page in the shape of a letter F, reading the top first, then a little bit of the next section, then finally looking down the left side of the page for information. The Z-pattern does something similar, except in the shape of the letter Z.

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with a big amount of content. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials, etc. How could designers employ this knowledge? First of all, placing the information of key importance or core interest on the most scanned spots and trying to use short catching headlines and bold headers to draw users’ attention.

General behavior pattern:

Start in the upper left corner.
Read/scan the first (head)line of the text.
Scan down the left side of the column until you find something interesting.
Read the interesting thing more carefully.
Continue scanning down.

Why F-Pattern Works

F-Pattern works as it allows readers to scan naturally! This layout is natural & feels it comfortable as we do prefer the reading top to bottom & left to right. There is a myriad website in the realm of web application development that is using this pattern. Most of the advertisements rely heavily on F-layout as it drives user-engagement in a more natural & comfortable manner.

The Z layout is a design understanding that attempts to get ahead of the user, abstracting any distraction and presenting encouraging action as quickly as possible. Z-pattern is applied to pages which are not so heavily concentrated on the copy.

However, Z-pattern does not need any final words. It tackles the 4 of the big principles of an effective design for branding, call-to-action, structure, and hierarchy.

This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area. In this case, designers place core information in the spots of the highest attention, such as top corners, and put the other points requiring attention along the top and bottom lines.