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

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

Rate this post

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 el salvador phone number data 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 the competition board’s statement is as follows: 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 Z-shaped pattern  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.

Source: UX Collective

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 Z-shaped pattern  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 burkina faso leads 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.

Scroll to Top