Flow + Visual Hierarchy

Flow is a term that describes the order and way in which a viewer’s eye explores the layout of a design or page.

It’s not something that most people consider when they design their concept layouts, but understanding flow will help to create a comfortable viewing experience when people interact with your work.

Or not! If the goal for a piece is to create a sense of tension or discomfort, then it’s best to understand what feels comfortable and natural, so that you can flip these conventions of comfort to creatively control our experience.

Either way, understanding flow helps us to anticipate how any given viewer interacts with our work, so that we can make informed decisions about the placement of elements and information.

Reading Direction + Process

When presented with elements on a page that are visually similar, especially text, how do we know where to look?

With no other visual cues as to order or importance, the subconscious instinct of the viewer is to follow a familiar order of operations: reading direction.

In most Western languages and cultures, we read from left-to-right, and from top-to-bottom; in that priority order.

Please note that the examples given in this article will be in line with Western reading conventions, but do keep in mind that there are many cultures in the world that read from right-to-left, and even some that prioritize reading from top-to-bottom before going left-to-right.

With few exceptions, when a viewer sees a design that includes text, they’re likely to interact with it in a left-right, top-down manner.

Note that this is conditional, as we’ll discuss below, but most notably on the condition that the elements we’re exploring are relatively homogeneous in size, brightness, color, and distribution.

Even when we take away the text element, we still have a tendency to ‘read’ a page or image from left-to-right and top-to-bottom.

The order in which readers follow the panels of a comic book page illustrates this tendency well.

Most people don’t need to be taught the order in which they are supposed to read the comic book panels. They just know, because it’s an extension of our natural left-right, top-down reading method.

Even when there are panels of various sizes, most readers still have the instinct of which order to read the panels.

The Gutenberg Diagram

While our brains tend to do the left-right, top-down sweep, they are also prone to averaging out this motion to a general vector that moves to the right and down the image.

Practically speaking, what this means is that the four corners of a design aren’t equal in relative importance. The viewer is likely to spend more time exploring some corners than others.

This concept is broken down in the Gutenberg Diagram, which gives names to each of the corners as well.

1. Primary Optical Area (top-left)

As you might guess, the top-left corner is the ‘strongest’ corner, as far as most viewers will look in the top-left corner before any of the others. This is where we first start to take in the information offered, and make judgments about what we’re seeing and reading.

According to the Gutenberg Diagram, the top-left corner is the ‘Primary Optical Area’.

2. Terminal Area (bottom-right)

The bottom-right corner is considered the next most important visual corner, and is dubbed the ‘Terminal Area’ in the Gutenberg Diagram.

Viewers typically focus more on the bottom-right corner because it’s somewhat of a last stop - hence, terminal - when viewing an image or document.

3. Strong Fallow Area (top-right)

Next is the top-right corner, due to our natural tendency to go from left-to-right before moving down the page.

Remember that the Gutenberg Diagram isn’t concerned with the order in which a viewer is likely to view these corners, but rather which corners they’re most likely to spend time and focus on. Order-wise, the viewer is likely to go to the top-right after the top-left.

This corner helps to reinforce or invert any judgments we made about the image or document in the top-left, and strongly influences how much time is spent in the bottom-left.

According to the Gutenberg Diagram, the top-right is the ‘Strong Fallow Area’. (Fallow usually means a piece of land that isn’t sown, so as to restore its nutritional value to crops. Perhaps this is meant to imply that the land in the top-right is better left unsown.)

4. Weak Fallow Area (bottom-left)

Finally, the bottom-left of the image or page is what is known as the ‘Weak Fallow Area’ in the Gutenberg Diagram.

When all of the elements are equal, this is the portion of the image or page in which the viewer is said to spend the least amount of time and/or focus.

Ordering Information

When you have a poster with similar elements, especially text elements, that are somewhat evenly distributed, the Gutenberg Diagram helps you to anticipate which corners the viewer will focus on, so that you can make informed decisions about which information should go where.

The most important information should almost certainly be the subject of the design.

Depending on the context, the most important information might be a Who (musical artist or speaker) or a What (workshop, title, or event).

Considering this is the primary subject, this information might be larger, brighter, and/or a different color so as to be the very first thing that the viewer sees.

In this case, we don’t have to take the Gutenberg Diagram into consideration (yet). So we don’t need to put the subject in the top-left. In fact, we probably shouldn’t. We’ll discuss this more below.

The rest of the information on the design - the details - should be informed or influenced by the Gutenberg Diagram, however. These details are likely some combination of who, what, when, where, and how.

Their positioning in the design (priority) could be informed by which aspects are the biggest draw for the viewer, or which information is the most important for the viewer to know.

Once you have this in mind, then take what you know of the ‘weight’ of the four corners, and the tendency of the viewer’s eye, to inform you of where information could or should go.

Visual Hierarchy

The problem with this left-to-right, top-to-bottom assumption? Most designs feature focal points that grab the attention from afar and will inherently be the first design elements that the viewer interacts with.

How do we reconcile these ideas? Well, let’s think of the viewing experience as a multi-stage process.

Focal Point

When a viewer first spots your design, their eye will almost certainly be drawn to the highest contrast, largest, and/or brightest part of your design. This is the design’s focal point.

Read more about how we can create and control visual focal points in the contrast article.

The focal point should almost certainly be positioned near the center of the design - horizontally and/or vertically - or following the rule-of-thirds.

From there, we can think of it as a cascade of attention-grabbing elements. After your design’s focal point, where is the viewer’s eye most likely to go?

Generally speaking, the next stop on the viewer’s visual journey will be to an element that shares a value or visual trait with the focal point. This could be to an element that’s the same color, high brightness, or large size.

Exactly which of these their eye is likely to go to is fairly subjective, but in general people will first look at other elements of the same color.

Color

Color is strongly associative, and when you’re looking at any given color, you’re likely to be driven to another element of that same color, assuming you can see another within your peripheral vision.

For example, if the focal point of a design features a saturated orange color, you are more likely to next explore another orange element in the design than you are to look at an element of another color.

Brightness

Then, generally speaking, the viewer’s eye will go to other elements with high brightness or luminance values.

Brightness attracts the eye, so without another element of the same color to go to, the viewer’s eye is most likely to be driven to the brightest element that they haven’t already explored.

Size

Finally, the viewer will inspect elements that are of a larger size.

By this point, they’ve almost certainly explored all of the elements that are of similar color to the focal point, and the elements that are of higher brightness values. When viewing what’s left, size is the next best indicator of importance.

Subjectivity + Chaos

As previously mentioned, this order is subjective; not only to the individual, but also to the design.

And no matter what, you can’t ever fully count out chaos and happenstance. Sometimes our eyes wander without much rhyme or reason.

Inversion

What’s interesting about this visual hierarchy is that it practically inverts the order of how we would normally determine the focal point of a design.

In most cases, (high) contrast is the best indicator for what should be the subject of a design, followed closely by size, luminance, and finally color.

Reading Direction, Re-visited

How does the reading direction factor into this?

Well, even though we don’t think about it, our minds subconsciously want to start in the top-left and work their way down to the bottom-right of any page, design, or image.

So, when there are several elements in a design that are similar visually, our minds tell us to explore those in the top-left first, then make our way right, and then down the page, making that same sort of typewriter sweep across the page at various intervals.

Basically, whenever there are multiple elements that are similar in color, brightness, size, etc, we tend to approach them using the Gutenberg Diagram described above.

Other Flow Influences

Leading Lines + Directional Vectors

One powerful way in which you can control the direction and order of the viewer’s eye is to use leading lines and directional vectors.

Basically, shape elements and images that show or imply movement in any given direction can guide your viewer’s eye to a specific point or in a certain direction.

With this in mind, we could conceivably create a design in which a viewer experiences an image in a counterclockwise manner, rather than following the Gutenberg Diagram.

Repetition + Rhythm

Another powerful tool for guiding the viewer’s eye is that of repetition and rhythm.

If you have several elements that are aligned or justified in a way that strongly implies a sequence, then the viewer will feel compelled to consume the elements in succession rather than simply following the other aforementioned tendencies.

Master the Flow

Most of us follow these conventions and guidelines without knowing it. These concepts are so ubiquitous that the most basic designs from the most beginning designers abide by them while being none the wiser.

So why bother to analyze and understand these concepts?

As mentioned at the start, understanding these concepts allows us to see the boundaries of the conventions that our viewer’s instincts are based on. We can see the box, so that we can know how (and when) to step outside of it.

If we understand what our viewer’s eye is likely to do, and what it WANTS to do, then we can reach into our tool bag to subvert their expectations, and perhaps create something that’s more memorable for it.