Visual Hierarchy, Gutenberg Diagram, F & Z Pattern

Photo by Desola Lanre-Ologun on Unsplash

Visual hierarchy

Visual Hierarchy = Information Prioritization

How we make sense of what we see?

Firstly, let’s understand what is visual communication

  • We recognize similarities and differences.
  • We look for patterns.
  • We create relationships between the things we see.

According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, UXPin team and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

F and Z patterns

1.First, what’s Gutenberg diagram?

The Gutenberg Diagram is applied to users with a genuine interest on the page content.

2. F-pattern

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

Heatmaps from user’s eye-tracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations.

Why F-Pattern Works

3. Z-pattern

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.

The source:

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.

The big landscape

Brand or Logo Recognition

  • Information gathering — What is the immediate benefit of this product or service?
  • Action — Allow for the visitor to take immediate action related to the product being shown.

3. Headlines — 5–6 words

Another point to remember: it’s good when the headline is visually supported by other elements on the page or screen.

Photography Workshops

4. Body copy

Copy length

Short copy is often effective for mobile interfaces and landing pages: their users are usually keen to see concise and highly informative copy content. Long copy is good for web resources that provide users with complex information on specific topics as well as a presentation of the products which aren’t well-known for users and need additional informative support.

CTA elements with copy

Travel Agency Website

5. Points to consider

  • Make headlines short, but keep them highly informative.
  • Subheaders relate to separate section, so they guide users through the content in the interface.
  • Use brief concise copy for mobile interfaces and landing pages.
  • Consider using a long copy for web resources aimed at providing informative content.
  • Use verbs in the imperative form to encourage people to actions.
  • Use contrast colors for call-to-action elements, so that they could draw the user’s attention more effectively. However, don’t forget to test the readability of the text on the CTA elements: it has a crucial impact on usability and conversion rates.
  • A caption should preferably describe or add the data that isn’t obvious from the image.
  • Give a strong preference to present tenses in captions.
  • Always ground your solutions on preliminary user research and don’t neglect testing different options.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store

UI/UX Designer who loves traveling, writing, photography and amusing things. Feel free to contact me or check out my web: 🤡