How To Create A Visual Hierarchy

Within the visual channel of an eLearning course, you communicate through the elements on the screen—the graphics, text and video. But you can also transmit a secondary message through a visual hierarchy of these elements, which communicates their relative importance.

Visual hierarchy guides the eye of the viewer through a progression, starting with the element of the highest rank and continuing to those with lesser rank. Although it varies, a standard visual hierarchy consists of three levels of importance—primary, secondary, and equivalent. In the graphic below, there are at least three levels of hierarchy on the screen.

Visual Hierarchy in Office Ergonomics course by Prometheus (from Articulate Showcase)

Thinking Through the Design

Without a hierarchy, a cluttered screen can be overwhelming and a viewer doesn’t know where to look first. On the other hand, a screen with no hierarchy has no emphasis. Attending to the visual hierarchy gives you another way to communicate information.

Visual hierarchy is all around us in architecture, newspapers and advertisements. Once you tune in to the concept, you’ll see how designers of all types purposefully arrange, group and emphasize visual elements to communicate their significance.

Assuming you’ve done the obvious, and thought about which elements are most important on a screen or slide, the next step is to determine the best way to denote the hierarchy. Some ways you can do this are through imagery, position, color, size, typography and animation (or the sense of movement).

In practice, most designers combine several approaches as a natural outcome of good design practices and for greater impact. Read on for more info on different ways you can establish a visual hierarchy and to see examples from web sites and eLearning courses.

Imagery

People are typically attracted to the images and graphics on the screen first, and then the text. But it depends on the design and treatment of the whole page. You can usually assume that a good-sized image in a prominent location will be at the top of the visual hierarchy. (Note: For a non-example, notice the graphic above. The large type and vivid title bar overpower the black and white graphics, which don’t pop as much as colored ones do.)

In the home page for Rockport Publishers below, it’s fitting that rotating images would be at the top of the visual hierarchy. They publish books on graphic-related topics. (Completely coincidentally, Rockport is my publisher.)

Position

Positioning is one of the most common ways to depict visual hierarchy. We’re familiar with this idea through the importance of articles “above the fold” in newspapers and websites. The elements at the top attract more attention than those at the bottom.

The Spanish online news site below uses the standard newspaper positioning to show importance. The masthead and hot stories are at at the top of the screen. The different departments are also listed across the top. As you study visual hierarchy, it helps to view examples in a language you don’t know well, so you can concentrate more on the visual aspect than the meaning of the words.

Color

Color is often used with contrast to establish a hierarchy. Because brighter colors attract more attention, elements high in the hierarchy should be vivid; elements of less importance should be darker.

In the example below, the AIGA (a premiere design association) appropriately uses bright colors and shapes at the top of the visual hierarchy.

Size

We are also attracted to the largest object on the screen, making size a compelling way to depict hierarchy. This is a familiar tactic, such as when we use a larger type size for the title of a page or slide. But there are other ways to use size. For example, if the graphic is most important, it can be larger than the title or if a video is most important, it can encompass most of the screen (bandwidth permitting).

In a slide from the Cardiac Life Support course by 42 Design Square, the prominence of the heart informs the viewer that this image is the central point of this screen.

Typography

You can establish a visual hierarchy through typography, which is particularly suitable for organizing lots of information, such as an online reference. When using type to depict hierarchy, think in terms of its style, size, weight and color.

In this example, there are several levels of visual hierarchy established through typography.

Animation or Motion

Movement is a highly attracting element and an animated object on the screen is often the most significant. Movement doesn’t need to be animated, however. It can also be expressed through line and shape, as a sweeping visual force.

In the TV Internet Training course by OnCommand, notice the curved title bar that undulates across the screen. It carries the eye to the title text. This is a good example of how movement establishes a hierarchy as a design element.

On Command Corporation; Training Manager: Keely DeKoskie; Instructional Design and copywriting: Mark Burkey; User Interface Design and brand development: Michael Moore

If you haven’t been thinking about the visual hierarchy of screen designs, this is your chance to try it out. You’ll be able to start communicating even more in each course. Establishing a hierarchy should make it easier for learners to process information, because they’ll know where to focus.

Got something to add? Share your thoughts in the Comments below.

Related Articles:
The Power Of Visual Grouping
Considerations For Screen Design