Hierarchy is simply defined as any system of persons or things ranked one above another. It is a system that helps us define order and organization. Once the hierarchy of any system is defined, it not only explains how that system functions but also aids in predicting how any change in the system will affect the system as a whole.

Hierarchy – An Invisible System

In any given day very few of us are conscious of a hierarchy’s existence until we take the time to identify it. We see a structural system such as a building merely as a building that somehow works together as a whole to support both itself and its contents. We have faith in this fact and accept that the structure works. Hierarchy is meant to be invisible, working so perfectly within a system that we do not need to understand it in order to operate within its guidelines. In fact, we are often more conscious of a hierarchical system’s order when it is not working perfectly. If a hierarchical system fails, our natural desire for order automatically prods us to analyze its structure searching for the reason for this failure.

How Does This Apply to Web Site Design?

As with a building, a good web site design is supported by a good hierarchical system. Typically, the viewer of a well-designed web site is not aware of this hierarchy on a conscious level, but rather naturally allows his or her eye to be led along as the structure of the design dictates. If a hierarchy is successful, it should support the web site’s goals – education, awareness, conversion, etc. If the hierarchy is unsuccessful, these goals will be compromised because the viewer becomes distracted by less important visual “frills” or stimuli.

How Does Web Hierarchy Work?

Basically, hierarchy can be understood in terms of numbers. For example, the number “2″ is greater than “1″ but less than “3″. To define the hierarchy of this system, we simply map it out: 1 < 2 < 3 < 4 < 5, etc. The greater the value of the number, the higher the number lies in the hierarchy.

Emphasis

In design, these numeric values would be translated to levels of emphasis. Emphasis is simply a shift in design that applies contrast to an element. The goal of emphasis is to draw a greater amount of attention to an element than to its surroundings. For example:

  • A line of text sized at 20pt has greater emphasis than a line of 16pt text when both are paired with a paragraph of 12pt text.
  • A line of vibrant orange text has greater emphasis than a line of gray text when both are paired with a paragraph of black text.

The greater the contrast, the greater the emphasis.

Pairing Emphasis

Very often, more complex forms of emphasis are accomplished through a pairing of different points of contrast. For example, if we were to take a line of text and increase color contrast and font size, we create a higher level of emphasis than either one of these adjustments on their own (if color = +1 emphasis and size = +1 emphasis, then color + size = +2 emphasis).

How Do We Use This Concept in Web Site Design?

Suppose we started with a base of 12pt black text. If we made a line of text 16pt, we just added emphasis to that line. Let’s give it a hypothetical emphasis level of “+1.” Now suppose we take a different line of text and change the color to orange. We’ll give that an emphasis level of +2 emphasis. (in this instance, we are assuming that the color change creates more contrast than size change.) Therefore, making yet another line of text both 16pt and orange would produce an emphasis value of 1+2, producing a combined level of +3 emphasis. By applying combined forms of emphasis, a wide spectrum of hierarchical levels can be created.

De-emphasis

In addition to emphasis, it is important to consider the concept of de-emphasis. When applied, de-emphasis will utilize contrast to draw less attention to an element than the surrounding elements. For instance, making a line of text smaller or dulling its color compared to the surrounding text typically removes emphasis. You can think of de-emphasis as a negative value of emphasis. In terms of pairing, de-emphasis can act as a sort of buffer against elements rising too high on the hierarchical spectrum. For instance, if a line of text is at an emphasis level of “+5″ and needs to be at an emphasis level of +3, adding some level of de-emphasis equal to “-2″ is required.

Constructing a Hierarchy

Once an hierarchical system has been constructed, it is time to apply it in design to create a visual path for the viewer’s eye. If a hierarchy is successful, the viewer will “read” a design the way it was intended and be directed to all of the most important information. Accomplishing this can often be crucial to meeting your web site’s goals.

So, What Needs Attention?

Every design is different, so the use of an hierarchical structure needs to be tailored to fit the goals of each design. There are, however, some universal elements found in most web site designs that obviously require emphasis:

  • Headings – Anything used to label a body of content. Headers are meant to be easy to find and to inform you of where you are and where you are going.
  • Primary Information – Important information that the viewer is expected to see, even if he or she doesn’t take the time to view the entire design.
  • Branding – If the viewer knows what the design is associated with, it will immediately inform and bring context to the purpose of the design.
  • Navigation – The more obvious the navigation elements are, the more functional the design. Of course, navigation does not serve any extensive communicative purpose with regards to individual pages, so while navigation should be obvious, it should not be overpowering.
  • Content Divisions – For content-intensive designs, knowing when there is a change in subject is key. Clear divisions subconsciously alert the viewer about a shift in subject matter.

What Needs to Hide?

Some things need to be de-emphasized because they are not as important as the majority of the design. With the proper level of de-emphasis, these elements can sit quietly in a design without distracting the viewer. Some of these elements include:

  • Captions – Information that gives additional context to a more important design element.
  • Notes – Additional information such as credits that are necessary to supply but not necessary for the viewer to find.
  • Content semantics – Supplied details about content such as the date, author, category, etc.
  • Redundancies – Any information used to reiterate what has already been supplied with greater emphasis.

Additional Guidelines

There principals naturally ingrained in our minds that are important to consider when setting up an hierarchy:

  • Gravity – Most of us tend to view things from top to bottom, even if a design suggests otherwise. While this tendency can be overcome, it is most comfortable for our eyes to follow a downward path.
  • Left to Right – Since most languages are written to be read from left to right, so we are most comfortable viewing information from left to right. Weighting the left side is more advisable because we are more comfortable pulling away from attention-grabbing elements when moving from left to right.
  • The Peripheral – Even when our focus is trained in a particular area, our peripheral vision has the potential to detect other areas of emphasis at the same time. Too many emphasized elements without an obvious flow can be distracting, so keep distractions to a minimum.
  • Color Temperature – Red text, for example, is much better at drawing attention than blue text because of its superior intensity. Appropriate use of color temperature is important.
  • Simplicity – It is important to keep a cap on the number of ways emphasis is employed in a design and to be consistent about how they are used.
  • Emphasis Buffers – The hierarchy must remain intact, even when a change is made to one or more elements in the design. Adding or subtracting emphasis from an element could cause an erroneous shift in its perceived functional importance. An emphasis buffer combats this by simply allowing breathing room for an element to gain or lose emphasis. This is accomplished by spreading elements of the hierarchy out by several significant levels of emphasis during the hierarchy construction process.