“To guide the eye, make your main points easy to digest and make the details harder to digest.”

What is important, at a glance.

You’ve all seen some variation of this design: huge headline, smaller headline, and a short paragraph blurb. It’s used over and over again, because it’s a predictable way to guide the reader’s eyes in those crucial first few seconds.

This is a very obvious use of visual hierarchy, and is nothing more than common sense. Bigger, high-contrast text will attract your attention first, followed by the next largest, and so on. But…

Where do your eyes go first in these (contrived) examples…?

Bigger and bolder seems more important, but our attention is directed to the smaller subheading first. Black text is supposed to be more important than light gray, but we look at “You are awesome” first (and only). Why?

Are there simple rules for hierarchy?

Typically we are told that we have an array of tools to make content stand out: size, font, weight, color, contrast, whitespace, texture, etc. All else being equal, we expect to see the bigger and bolder text before the lighter and smaller one.

But all things are never equal, and the interplay between all these variables makes it nearly impossible to create simple rules. Is the large but low contrast text more important or less important than the smaller but bright red text? What if the larger was in all-caps? What about placement? What if we knew the viewer’s name, and stuck it on the site somewhere… won’t that attract the eye, regardless of the font it’s in?

Every one of these “variables” depends on all the others. We can only use these variables (size, color, contrast, etc) as brushes in our palette. Visual hierarchy falls in the realm of art, and there are no simple rules.

And that’s that?

Well, if every time I came accross “too many variables” I threw my hands up in the air, called it “an art”, and walked away, I would’t be a very good physicist. We need to find an underlying pattern, a simplified model, or an abstraction, that can shed some light on the problem.

There is a simple rule for hierarchy: readability.

All the tools we mentioned for creating hierarchy (color, size, spacing, etc) are focused on style. Their main impact is on legibility: how easy it is to turn symbols into letters and words.

In order to perceive symbols, they must be visible (duh!). In order to perceive words, the symbols must also be legible. But in order to perceive meaning, the symbols must be visible, legible, and readable.

The single variable that determines where we focus our attention, is readability.

Readability is about style & content.

Readability is more than the ability to turn symbols into words, it’s the ability to turn symbols into meaning. Readability includes not just font and contrast and whitespace, but also word length, sentence simplicity, and the overall difficulty of an idea.

We can guide attention extremely easily, if we focus on how readable and understandable our main points are. In guiding the eye, simple sentences and simple words are as important as clean typography and balanced whitespace.

Conflict: being imperfect on purpose.

Here we run into an inner conflict that a designer faces. We are obsessed with beautiful typography, and making everything as clean and readable as possible. If readability is the key, why not find the ideal font/contrast/size/linespacing and make everything like that?

In other words, if we could make every element of our page “digestible”, why do we need a hierarchy in the first place? The conflict comes from this fact: if there is an ideal visual representation of information, we must deliberately stray from that ideal, in the interest of maintaining a hierarchy.

Gradient of readability.

Now that we have a single variable to work with, we can begin to direct that attention with more precision. The brain works on relative scales. So if your whole page says “I am equally important” chances are your brain will try to compare its importance to something else (their email, or the page they just left).

We must hook the reader with a single focal point of easy to digest content, and then gradually decrease the readability from there on out. If we overlay a “readability surface” on a given page, what we are trying to do is provide a single peak, and then a gentle slope for the reader’s eyes to “roll down”. This gentle slope is what I call the “gradient of readability”.

If the entire content is meant to be read in a single sitting, then we need just one hill. Otherwise, we need other smaller hills for the eye to roll down on.

Summary

To guide attention start with a large, easy to see, easy to read, and easy to understand statement or image. Then add progressively more complexity to the idea and to the presentation. Concentrate always on the style AND the content of your page elements, as often it’s the content that’s more important in guiding the eye.