writf-pattern-heatmap

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

How To Sketch

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

Many layout methods are often recommended to use how people scan or read through a design. The Gutenberg map, z-model layout, and f-mode layout are the most common.

Each offers suggestions on where to put important information, but I think these forms are often misunderstood and followed without thinking about the things they actually describe.

I like to go over what and why of each shape, and then give something else that gives the designer extra control over where your viewer’s eye moves in your design.

Design Layouts

The Gutenberg Diagram

The Gutenberg map describes a common pattern in which the eyes move when viewing evenly distributed, homogeneous information. Read that last part again.

The pattern applies to text-heavy content. Think pages in a novel or newspaper. This method does not describe every possible design.

The Gutenberg map divides the system into four categories.

  • Primary optical area located in the top/left
  • Strong fallow area located in the top/right
  • Weak fallow area located in the bottom/left
  • Terminal area located in the bottom/right

The pattern suggests that the eye clears up and down the side in a series of horizontal movements called orientation axes. Each sweep starts a little further away from the left edge and moves slightly closer to the right edge. The overall movement should travel from the primary area of ​​the eye to the terminal area, and this path is referred to as reading gravity.

Naturally, this will change to left-to-right reading languages ​​and right-to-left reading languages.

Gutenberg diagram, strong and weak barren areas come out of this reading gravity path and receive less attention if not visually emphasized in some way.

The key elements must be placed in the reading gravity path. For example, placing a logo or title, an image or some important content on the top left / right, and call-to-action or contact information on the bottom right.

Designers who follow Gutenberg are said to be in tune with the natural reading appeal.

These designs improve reading rhythms by being consistent with normal reading rhythms and improving reading comprehension, but there is no empirical evidence to support the claim.

Gutenberg describes large texts with a small typographical sequence. Once you have created a visual sequence the map no longer applies. Keep this in mind along with the other forms described

Z-Pattern Layout

Z-Pattern Layout
Z-Pattern Layout

The z-model layout follows the shape of the letter z, as you might expect. Readers start at the top / left, move horizontally up / right, and then move diagonally down / right before ending with another horizontal movement at the bottom / right.

The Z-mode is sometimes called the inverse-s-mode, which refers to the curved path as opposed to the rough angular path. Otherwise, they are basically the same thing.

The main difference of the Gutenberg map is that the z-mode suggests that visitors pass through two barren areas. Otherwise, they still start and end in the same places, still going through the middle.

Like Gutenberg, a designer puts the most important information in the path of form.

The z-method is good for simple designs with some key elements to look out for. Any storytelling feature of the design will follow the path of z.

ZIG-ZAG PATTERN

ZIG-ZAG PATTERN
ZIG-ZAG PATTERN

We can extend this shape a bit by looking at it as a series of z-movements instead of a large z-movement.

Common sense dictates that this be more realistic, as the reader will continue to the right and then slightly down again to the left and then another horizontal movement back to the right. This is where we naturally read large-scale texts.

This series of z-movements is sometimes referred to as the zig-zag pattern. If we continue to add more zigzags and jacks, it eventually ends with a series of horizontal right and left movements because the diagonal part of z becomes shallower and shallower.

GOLDEN TRIANGLE PATTERN

The Z-method also leads to what is known as the golden triangle method. If you take the first horizontal and first diagonal movement and then close the shape ending with the right triangle, its right angle will be the top / left corner.

This triangular area at the top of the page is the most visible area, and the pattern suggests that you place your most important information inside it.

F-Pattern Layout

The F-mode is represented on the web, and as you might expect it follows the shape of the F letter.

I think Jacob Nielsen first suggested this method after the eye surveillance studies his company performed. What is often lost in the F-format is that these original studies were done on text heavier designs and search results.

Like other shapes, the eye starts at the top / left, moves horizontally up / right, and then comes to the left edge before forming another horizontal swab on the right. This second sweep does not extend from the first sweep.

The extra sweeps move less and less to the right and after the second big swipe most of the eye sticks out as it moves down near the left edge.

The f-pattern suggests that:

  • Important information should be placed across the top of the design where it will generally be read.
  • Lesser information should be placed along the left edge of the design often in bullet points where little horizontal eye movement is required to take everything in.
  • People don’t read online. They can.

Unfortunately, this method seems to be used for everything online instead of text-heavy content. If you look below at Nielsen’s original thermal maps, you will see that F is within the main content and does not extend to the entire design.

When using f-pattern thinking scanners and spatial content, these scanners are often interested in f. Put important information at the top, and also information designed to drag someone down the page.

However, if someone who scans your page finds it interesting, they will read it, so you can put information in places outside f for people you read.

 

writf-pattern-heatmap
Thoughts About All 3 Patterns

I have already mentioned this a few times, but it is important to understand where these patterns naturally go when there is no hierarchy in the design. They describe natural forms for evenly distributed and text-heavy content.

Unfortunately, formats are often used for existing designs in existing visual sequences and for more designs than text.

The shapes are much more similar than their names imply. One-third of the viewer starts at the top/left and moves to the right. In Z and F formats they move a little further to the right, but all still move to the right.

Both the Z-mode and Gutenberg end at the same place and move through the middle. F-method can explain the reason for not reaching the result.

  • Having content that doesn’t fully interest and engage the reader. Sadly true of most online content.
  • Writing with an inverted pyramid style, which expects to lose readers as they move down the page.
  • People scanning to determine if they want to read more.

Contradictions Any viewer will find that your content is absorbed and want to read more and exit the F-format that reaches the terminal area.

One last point is that as these patterns are more discussed, it leads to more designs that emphasize design. If you believe your readers will follow one of these patterns, you will create designs that enhance that format. This leads to a chicken and egg display.

The pattern of Focal Points

The reason I come back to the text-heavy matter is that once you start giving different visual weights to your design elements and starting to create hierarchies and flow, the shapes above no longer apply, there is only one way you can fully understand, i.e. something you can fully control.

This is not a method because it is solid design principles, but I will give it a name because we are talking about patterns here.

The shape of the focal points indicates that people will first see the dominating element (the largest visual weight element or area) on the side.

From there it follows paths from the dominant organ in the eye design to other focal points. This sequence depends on the relative weights of these focal points and any visual cues that indicate where to look next.

When talking about focal points, balance, and flow I often add Kantinsky’s compound 8 (seen above). While this is not art and design, it is a great example of all 3 principles. Your eye will be pulled to the top left and start moving from one point to the next.

The lines in the sketch help guide your eye to different focal points. I suspect your eye will follow the force of gravity through an F or Z or design. The painting should make it clear that creating hierarchy and flow transcends any form we are talking about here.

Summary

While Gutenberg claims that formats such as the map, Z-pattern, and F-pattern layout have a natural path that takes the eye through a design, the truth is that they only refer to designs that dominate large volumes of text, not hierarchies.

If it describes your design, you can suggest where to place any important information in these 3 formats. You may want to consider these patterns for people scanning your design and space elements and to draw people into their paths.

Once you start adding elements of different visual weights, the path that the eye takes through your design is the path you create. You can choose to reinforce the Gutenberg, F, or Z forms if you wish, but you are not defined by them.

In the absence of other visual cues, it is logical that people would start at the top/left and move across to the bottom of the page. This is what we have been taught to read. However, the key phrase is “no other visual references.” When those tips are present they will always control the path of the eye.

Instead of trying to force your design into one of the described patterns, determine what information the viewer wants to see, guiding their eyes according to your eye information through a series of focal points and design flow. This is the only method you should actually use.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *