Hierarchy & Web Site Design

What is Hierarchy?

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 define 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, we 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 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 are compromised because the viewer becomes distracted by a conscious perception of the faulty hierarchy.

How Does Web Site 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 yields contrast to an element. The goal of emphasis is to draw a greater amount of attention to an element than it would have on its own. Here are some examples of effective use of emphasis in design:

Each of these examples has its own range from low to high emphasis:

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 range of emphasis is based in contrast. The greater the contrast one element has to the surrounding elements, the greater the emphasis.

Font Style Emphasis

Dominance & Function

Before we experiment with emphasis, we need to understand the importance dominance and function have in a hierarchical system.

Dominance is different from emphasis because it considers commonality versus notability. Typically, in most design-based hierarchical systems, the most common elements are given the lowest level of emphasis. This is due to the fact that the most common elements in a design have an inherent level of notability due to their high dominance.

We cannot help but notice an entire paragraph of text because of its dominance. Uncommon elements, because they do not have significant dominance, require the application of additional emphasis to compete with the most dominant elements of a design. Functional importance determines whether or not this competition is necessary.

Consider this example:

The body text of a web site page accounts for the largest portion of the design’s element population. Because it is so dominant in the design, body text does not need significant emphasis to draw attention to itself.

Conversely, elements such as sub-section headers account for a much smaller portion of the element population. They are, however, important enough in function to require a greater level of emphasis than what is placed on the body text. Therefore, the size, color, weight, etc. of the sub-section headers are altered to produce greater emphasis.

Moreover, while the title accounts for the smallest portion of the element population in the design, it has arguably the most important function in the design. To compensate for its lowest level of dominance, the title must be given the greatest level of emphasis.

Design Emphasis - Title

In this example, we see how dominance, functional importance and emphasis relate to one another in a hierarchical system. Considering dominance and function together aid in determining what level of emphasis to apply in order to keep the system organized.

This relationship is how the viewer naturally perceives a design. If the proper amount of emphasis is not applied to an element, these relationships still apply. Typically, insufficient emphasis will translate to a lack of importance or notability, making proper planning important when structuring a design’s hierarchy.

Design Emphasis - Functional Importance

Pairing Emphasis

More often than not, emphasis is accomplished through a pairing of different points of contrast. Using our number model we can produce a more complex, non-linear organization.

For example, if we were to group “1” and “2” together, we make it equal in value to “3.” (1+2=3) This means that “1” and “2” grouped together has more value than either “1” or “2” have on their own. Therefore, we could say: 1 < 2 < (1+2) < 4 < 5, etc.

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.”

Therefore, making yet another line of text both 16pt and orange would produce a value of (1+2), producing a combined level of “+3.” This means that two forms of slight emphasis combined could potentially be greater or equal to a single form of greater emphasis.

Pairing Design Emphasis

De-emphasis

In addition to emphasis, it is important to consider the concept of de-emphasis. The only difference between emphasis and de-emphasis is that de-emphasis utilizes contrast to draw less attention to an element than the surrounding elements. For instance, making a line of text smaller than the surrounding text de-emphasizes it.

De-emphasis is essentially based in negative levels of emphasis. In terms of pairing, de-emphasis can act as a sort of buffer against elements receiving too much emphasis. 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.

Design De-Emphasis

Constructing a Hierarchy

All of these factors combine to knit a design’s visual hierarchy together into a fully functional system that dictates a path for the viewer. If a hierarchy is successful, the viewer’s attention will be led through the site accordingly. The end result is an achievement of your pre-determined web site goals.

So, What Needs Attention?

Every design is different, so the hierarchy needs to be tailored to fit a particular 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.

Divisions – For content-intensive designs, knowing when there is a change in subject is key. Clear divisions alert the viewer about this shift.

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.

Redundancies – Any information that is reiterating what has already been supplied with greater emphasis.

Web Site Hierarchy Guidelines

There are tendencies exhibited by the human mind that are important to consider when setting up an hierarchy:

Gravity – We all 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 – It’s the way Western culture has learned to read, 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 and draw the eye. Too many elements can be distracting, so keeping distractions to a minimum is recommended.

Color Temperature – Red text, for example, is much better at drawing attention than blue text because of its superior intensity. Appropriate use of color temp 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. This will keep distractions to a minimum.

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 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.

Mapping Out Your Web Site Hierarchy

When setting up a hierarchy, it is helpful to list out the elements of a design in a hierarchical map that orders them according to their functional importance. By doing this, it becomes clearer whether or not the hierarchy is structured properly. If it is a strong hierarchy, there should be an obvious shift in the level of emphasis given to each consecutive element.

Mapping Web Site Hierarchy

In the above example, we see the benefits of mapping – the structure is clearly defined and we can easily tell if anything is out of place or breaks the pattern of shifting emphasis. This is also a good example for defining important components of a successful hierarchy – the peak and base…

The peak of a hierarchy is simply the most functionally important level of the hierarchy. It is typically low in dominance and therefore requires the highest level of emphasis. In this example, “Header 1” would be defined as the peak of the hierarchy because it has the greatest importance and the highest level of emphasis.

The base is defined as the most dominant element in a design. In this case, the most common element is “Body Text.” Since it is the most common, it requires a low level of emphasis. Most other elements form a spectrum of emphasis between the peak and base.

There are exceptions to this, such as elements that are less dominant and less functionally important than the base. These are de-emphasized elements that are typically unimportant to the effectiveness of a design.

It is important to note that a successful hierarchy typically forms a smooth transitional spectrum from peak to base. Therefore, if either the peak or base is adjusted, it could potentially have repercussions on the overall hierarchical spectrum. This is why it is good to define the peak and the base early in the design process.

Hierarchies within Hierarchies

Oftentimes, there are different levels at which hierarchies operate within a single design. For instance, the hierarchy of a web site can be divided into sections of information, in which each section has a place in the hierarchy. Within one of these sections, however, there could potentially be further subdivisions that operate on their own hierarchical level.

A section could contain headers, sub-headers, imagery, paragraphs, navigation, etc., all ordered according to a sub-hierarchy. When dealing with complex levels of information, this is a common occurrence. It is important to maintain the clarity of the hierarchy by employing the rules of the sub-hierarchy to all adjacent sections whenever possible.

As you can see hierarchy is an important piece to any web site design project. It determines flow and the success of each page of your web site. If you have any questions about hierarchy and how to use it effectively in website design, please contact us and let us know.

Dave's thorough knowledge of design, as well as his keen interest in visual communication, lends itself to just about every type of service that Wood Street provides. This includes web and print design, branding, illustration and media. His passion for a wide variety of visual mediums gives him the drive to master new challenges and match specific needs with unique and effective design solutions. Dave has served as an integral proponent for quality design at Wood Street since 2005 and continues to stay up to date with current design practices. He holds a Bachelor of Fine Arts with a concentration in Graphic Design from the University of Maryland, Baltimore County.

Related posts:

During more than 18 years as an Internet developer, site manager, and industry exec, I've worked for and with some of the best known names in the business. Wood Street is a rare group of web developers, offering a small company's focus on its customers with best-of-breed skills in design and programming. When I need a strong, trustworthy partner to take on a complex web project, whether independently or as part of our team, Wood Street is always my first... Read More