6 principles of visual hierarchy for designers

First there were stone tablets, papyrus scrolls and paper. Then came computer screens and electronic tablets. As the technology to display a page evolves, it remains the designer’s job to arrange the content clearly. But what’s the best way? 

It’s an increasingly important question, as responsive frameworks force designers to think about many different pages at once. Faced with dense text and short attention spans, designers developed 6 principles to guide the reader’s eyes to the most important information.

These 6 principles of visual hierarchy will help you design everything from brochures to apps, guaranteeing a positive reading experience for the end-user.

 

1. Page scanning patterns

All cultures read from the top down and most cultures read from left to right. But while that knowledge is important for page design, designers know the task is much more complex.

Recent studies have shown that people first scan a page to get a sense of whether they are interested, before committing to read it. Scanning patterns tend to take one of two shapes, “F” and “Z,” and you can take advantage of this in your design.

F-patterns apply to traditional, text-heavy pages like articles or blog posts. A reader scans down the left side of the page, looking for interesting key words in left-aligned headings or initial topic sentences, then stopping and reading (to the right) when he or she comes to something interesting. The result looks something like an F (or E, or something with even more horizontal bars; but the “F” term has stuck).

Heat map: Nielsen Norman Group

How can you utilize this? Align your important information left and make use of short, bolded headlines, bullet points and other such attention-grabbers to break up paragraph blocks.

Z-patterns apply to other sorts of pages, like ads or websites, where information is not necessarily presented in block paragraphs. A reader’s eye first scans across the top of the page, where important information is likely to be found, then shoots down to the opposite corner at a diagonal and does the same thing across the lower part of the page.

Source: tuts+

Web designers commonly construct their pages to conform explicitly to this behavior, placing the most important information in the corners and orienting other important information along the top and bottom bars and connecting diagonal. In the below design for the 2010 Build conference, important elements include the logo (upper left), “register now” button (upper right), and speakers list (across the bottom), all of which are strategically placed at the sweet spots of the Z-pattern.

Website: Build

2. Size

This one is simple enough: people read bigger things first. If your eye goes to “performance” before “cracking” in the below ad for the Young Vic theater, then you should get in touch with a perceptual psychologist immediately: you can probably make some good money undergoing testing as a rare anomaly.

Poster: Rebecca Foster

What’s interesting, is that this tendency is actually strong enough to override the top-down rule. In the above image, “cracking” overrides “time to act” because it is both bigger and to the left (so left-to-right rule lends a hand). But in the below page from Annual Report: Human Rights Campaign 2012 (designed by Column Five Media), we read the large-print “Fighting for Equality on the Campaign Trail” before the text directly above it, “Election 2012.”

Annual report: Column Five

“Election 2012″ is the highest-level order of information: it tells us the general topic that the information below falls under. But the designer decided that the article heading was more interesting for readers and so sized it to be read first.

3. Space and texture

Another way of drawing attention is to give content ample room to breathe. If there is substantial negative space left around a button, or the lines in a text block are widely tracked, these elements will be more readily visible to readers.

As you see in the image below (part of DrawtoClick‘s website), spacing can be an elegant alternative or addition to the use of size. Here, the selling point, “Notre agence vous accompagne …”, is in a very small font, but it is surrounded by an excess of white space that signals its importance. Below, the phrases “Le Compendre,” “Le Réaliser” and “Le Partager” receive extra emphasis by being boxed off from surrounding space.

Website: Draw to Click

When people talk about “texture” with respect to visual hierarchy, they are not referring to pictorial texture effects. Rather, this kind of “texture” refers to the overall arrangement or pattern of space, text and other detail on a page. This example by Bright Pink illustrates the concept nicely:

Posters: Bright Pink (via Smashing Magazine)

In the first image, the word “Sports” is higher in the hierarchy than “badminton” due to being higher, bigger and bolder. In the second image, the two words are about equivalent, thanks to a black rectangle that highlights “badminton” and sets it into its own space. In the third image, a background scribble interrupts the space of “Sports” but not “badminton,” and consequently results in a reversal where “badminton” is highest in the hierarchy. Such a progression is difficult to predict, so designers often chalk it up to a holistic sense of “texture.”

4. Typeface weight and pairing

Typeface selection is critical to establishing visual hierarchy. Among a typeface’s most important attributes are weight – the width of the strokes that compose its letters – and style, like serif and sans serif. Other modifications like italicization can play a role too.

Note how typeface affects the hierarchy order of the words in the below web design for The Tea Factory: “the perfect teas to keep you warm” is the focal point, but differences in type weight and italicization, in addition to word placement, produce a more dynamic, less linear, reading experience. “See our selection,” the call to action, is more strongly emphasized than the text above it due to sizing and spacing.

Branding: The Tea Factory

In some cases, the goal is to present a variety of information as equally urgent. Setting it all to the same size and weight would accomplish the equivalency, but would also make it monotonous. Differentiating the typefaces is one way to avoid this, as on the below Trendi magazine cover. Here, the five teasers around the periphery of the page are all equal on the hierarchy, but achieve variety by altering between two well-paired typefaces – one a mid-weight serif, the other a lightweight but tall sans serif.

Magazine cover: Trendi (via The Kasper Stromman Design Blog)

5. Color and tint

Here’s another no-brainer: bright colors stand out from muted colors or grayscale, while lighter tints appear more “distant” and thus fall lower on the hierarchy than richer, darker ones. The website for Where They At contrasts highlighter yellow and color illumination against a black-and-white grid to striking effect:

Website: Where They At

The Guggenheim website uses color to accentuate important information like location choice, the list of exhibitions currently on view, and the links to special exhibitions.

Website: Guggenheim Museum

The website for the Whitney Museum, on the other hand, establishes hierarchy within a single typeface, weight and tone (black) by using tint (which refers to the addition of white to a base tone, making it lighter). “Cory Arcangel on Pop Culture” is clearly beneath “New on Whitney Stories” on the visual hierarchy, not only because it is placed lower but because its tint is lighter, making it less striking to the eye against the white background.

Website: Whitney Museum of American Art

Color is of particular importance in mobile app design, where a small screen size limits your ability to use other strategies like size differentiation and broad spacing. On Grainger Industrial Supply‘s app, the “proceed to checkout” button is colored red, making it stand out from any page where it appears. The “Narrow Your Search Results” bar, by contrast, is grey, making it roughly equivalent on the hierarchy with other elements like the search bar and product links.

App design: Grainger (via codrops)

6. Direction

Page layouts are typically designed according to a grid of vertical and horizontal lines, both by convention and because this is the most legible format. In such a system, a new way to establish hierarchy emerges: break the grid. Text that is arranged on a curve or diagonal will automatically stand out against surrounding grid-locked text, taking center stage. This has long been an effective strategy in advertisements like the below bus stop poster by Frost Design.

Poster: General Pants Co. (via Frost*collective)

 

http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/