It is easy to imagine every user excitedly reading every letter you write and every pixel you make. Get over it, because real users don’t do that. They scan. Scanning means they only stop to read when something catches their eye. So today we will learn about scanning patterns:

The Z-Pattern

Let’s start with the most boring design I can imagine: an entire newspaper page of solid text. All one story. No headlines. No images. No breaks or pull quotes. Just text, in even columns, from corner-to-corner.

In a design like that users will generally scan it in a pattern something like the “Z” shown above.

F-Pattern

If we add a bigger headline (visual weight), create one column to follow (line tension), and use smaller sections (repetition)we can get people closer to the famous F-Pattern.

The colorful image above shows eye tracking results, called “heat maps”. Eye tracking records where people look; the longer they look at something, the more “hot” it looks in the heatmap.

The F-Pattern works like this:

• Start in the upper left corner, like the Z-pattern.
• 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.

By repeating that method over and over, the heatmap starts to look like an ‘E’ or an ‘F’, hence the name.

Why is this important?

You may notice that some parts of the page get lots of attention “naturally” while other parts of the page are overlooked most of the time. This is what we mean by “strong” and “weak” spots in a layout.

On desktops, a button in the top left will get more clicks than a button in the top right, which will get more clicks than a button in the bottom left, which will get more clicks than a button in the bottom right. And all of those will get more clicks than something randomly stuck in the middle …unless you do something about it.

It might also be good to know that each “block” of content and each column can have their own F-pattern. It doesn’t have to be one-F-pattern-per-page.

Visual Hierarchy

Visual Hierarchy is the arrangement of elements in a way that implies relative importance. It’s the designer’s attempt to guide the order in which the eyes perceive information presented. The way we perceive information is affected by several factors that contribute to how we rank the hierarchy of the content within the layout. White space (also know as Negative Space) plays an important role in effective visual hierarchy, and in this article we will look into it.

White Space

White space helps with readability and comprehension immensely. Have you ever looked at a menu / a website / an interface and thought, “This looks and feels great, but I’m not sure why?” The answer usually is good use of white space. A study found that good use of white space between paragraphs and in the left and right margin increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.

An example of what good visual hierarchy looks like

Let’s take a look at Helen Tran’s site and how she uses white space intentionally:

Beautiful portfolio! Now let’s take a closer look:

Notice how there are 4 clear blocks of content. Let’s break it down either further:

Helen uses a combination of line height, font size, color, and white space to separate content within each block itself. This allows for ease for users to naturally navigate the sections of these blocks of content.