Z-shaped pattern for reading: what it is and how does it work?

When it comes to webpage design, a Z-shaped pattern for reading plays an integral part in a website’s performance — that’s what experts in content marketing assessments may tell you. It impacts the amount of time someone spends on the page.

That´s why it is important to understand that different layout shapes serve different purposes.

Take as an example the F-shape, the most common one. It has this name because it describes a pattern in which the user first looks at the top left on a page, moving horizontally until the top right, and then repeats this movement but without going as far as the previous sweep, following roughly the shape of the letter F.

The pattern was first suggested after a study made by the Nielsen Norman Group with text-heavy content. It is important to stress the last part because the F-shaped design isn’t suited for all kinds of content.

So what other kinds of design layouts exist? Let’s take a look at the Z-shaped pattern for reading. More appropriate for pages that are not so dense in terms of information, it has been considered an excellent option for landing pages.

If you’re interested in learning more about the Z-shaped pattern, keep on reading the article and you’ll find out:

• What exactly is the Z-shaped pattern for reading?
• What are the differences from other patterns?
• When is the Z-shaped pattern for reading more useful?
• How to fit your content in the Z-shaped pattern for reading?

What is the Z-shaped pattern for reading?

As the name suggests, the Z-pattern layout resembles the letter Z. This means that the content is carefully designed so that the user first looks at the top left of the page, then to the top right in a horizontal line. Then, the eyes move straight to the bottom left, in a diagonal line, and end up at the bottom right of the screen again, following another straight line.

This does not mean that the whole content has to be shaped like one big Z. Even though this might work for landing pages, content that uses storytelling can follow the shape of subsequent, smaller Zs, creating what is called a Zig-Zag pattern.

What are the differences from other patterns?

Each design provides advice on where to place information, depending on the content you want to create and your marketing strategy. Before investing in interactive content it is important to know at least the basics about each of them.

The Z-shaped pattern assumes that viewers will pass straight through the middle of a page, placing their attention on the corners instead. This means that the content creator should design the webpage considering that the viewer will follow this order: (1) top left; (2) top right; (3) bottom left; (4) bottom right.

This does not mean, of course, that the place cut by the diagonal line should stay empty, just that the layout should be designed so that this order makes sense according to the content creator’s goals.

Differently from the Z-shape, the F-shape assumes that the user goes a little less further to the right with every line of a text. For this reason, this design should be used to make sure that the viewer focuses on the most important parts of text-heavy content.

Another useful layout pattern is the Gutenberg diagram, also fit for denser content that is homogeneous and evenly distributed. It places special importance on the top-left and bottom-right areas, assuming that the eyes travel from one to the other in what is called the reading gravity path. It is used for text-heavy content, such as newspapers or pages on a novel.

Differently from those, the Z-shaped pattern for reading highlights a few elements and is best suited for pages with less text, as we’ll see in the following section.

When is the Z-shaped pattern for reading more useful?

The Z-shaped is useful for pages with a simple design and a few key elements that need to be seen.

Landing pages are a great example of the kind of content that profits from this design. If it takes advantage of the Z-shaped pattern, the page can create a visual narrative that guides the user from the logo until the CTA button.

Speaking of narratives, this pattern is also perfect for guiding the user through a story, especially through the Zig-Zag structure. A good example of this case would be a sales pitch that tells a story and ends up in a call to action.

How to fit your content in the Z-shaped pattern for reading?

If you have a landing page or you want to use the storytelling method, the Z-shaped pattern is a good choice. As we mentioned, it suggests that the visitor will start by looking at the top left of the screen. In this case, what do you want them to see first?

To obtain the most benefits from the Z-shape, the content creator should place the main components at the top horizontal lines because that is where the user will look first. The following elements should then be organized according to the order we described before.

Let’s imagine you’re designing a landing page. One possibility is to put your logo in the first area. This way, the visitor becomes aware of your brand and understands that what comes next will be associated with it.

On point #2 is where important links are usually placed, letting the user know where important information can be found. It is highly recommendable to include a shortcut for the call to action or a link for contact there.

The center of the page is a good place for an image, as it separates the top section of the design from the bottom. Area #3 could include some sort of product preview and be followed by elements that lead the viewer’s attention to point #4, where a call to action should be.

Of course, there can be variations of this scheme. Storytelling content that uses the Zig-Zag pattern, for example, leaves more room for creativity. The most important thing to remember is that the Z-shaped pattern for reading should contain minimal text, highlight a few key elements, and create a clear path down the page.

The beauty of taking advantage of the most appropriate design is establishing a visual hierarchy that will ultimately end with the user completing the intended action.

Understanding what kinds of content strategies are the most effective for your goal is an important part of interactive marketing. Using the right design for your content can boost engagement and retention, not to mention it has the potential of generating more leads. It is worth giving deeper thought to it and getting to know the possibilities.

Now that you know more about how to use the Z-shaped pattern for reading to improve the design of your content, find out what are the most important metrics to measure content performance!