Understanding Visual Hierarchy in Web Design

Visual hierarchy is one of the most important principles behind effective web design. This article will examine why developing a visual hierarchy is crucial on the web, the theory behind it, and how you can use some very basic exercises in your own designs to put these principles into practice.

Design = Communication

At it’s core, design is all about visual communication: To be an effective designer, you have to be able to clearly communicate your ideas to viewers or else lose their attention. People are fickle though; if you give them a massive block of information, chances are that 99 out of 100 people won’t bother to read it. Why? Because most people are inherently visual thinkers, not data processors.

To figure out why this is true, it’s important to understand a little bit about the way that we see things. People aren’t what you would call “equal opportunity see-ers”. Rather than taking in visual information and processing it evenly, people organize what they see in terms of “visual relationships”. Let us consider the following image of two ordinary circles:

Chances are, you don’t see “two circles”; Instead, you saw “one black circle and one smaller red circle”.

The reason is pretty simple: When presented with something as simple as two circles, a person won’t just see two ordinary circles, they will find a way to differentiate between the two. One circle might be bigger, or smaller, or colored, or any other variety of differences. These differences allow us to distinguish between objects and give them unique meanings.

Let’s now look at a more complex image:

The added complexity actually re-enforces our desire to “classify” the objects in terms of relationships. Similarities and differences become the frame that we view the shapes through. Differences in scale suggest that one object is closer to us than another or that one is more dominant than the other; Variations in color might suggest that one object holds a unique personality that sets it apart from the other object. A lot of information can be delivered in just a single image by using some very rudimentary tools.

…Understanding that people will see our designs in terms of relationships is crucial to becoming a more effective designer.

Let’s take this example back to web design; Because web design is all about communicating visual information, understanding that people will see our designs in terms of relationships is crucial to becoming a more effective designer. While it might seem like it’s enough to just dish out information, as web designers, our task is to break down that raw information into delicious little chunks of visually relevant information that are easy on the eyes, and more importantly, effective at communicating the message behind a webpage.

The Dawn of Hierarchy

There are a hundred explanations for why people see in terms of relationships; If you were to trace it back anthropologically, you might conclude that a hunter-gatherer mentality forced humans at one point to recognize that seeing relationships is a survival skill.

See, even prehistoric man had a healthy respect for visual contrast.

Perhaps a more practical explanation is that it’s simply the way that our brains categorize information: grouping similar visual elements and organizing it into meaningful patterns is as inherent to our human nature as eating or drinking. Either way, the fact is that even in it’s most basic form, information that is organized with a hierarchy in mind will always be more effective at communicating than unorganized information.

Consider the following image of two text blocks:

In the example above, we see the most rudimentary form of a visual hierarchy system applied to text. The information in each of the two examples isn’t any different, but how it’s been broken up dramatically changes the way that reader’s will see it and take it in. When we talk about visual hierarchy in terms of typography, this is what we mean. The proximity, scale, and similarity of the text formatting allows a reader to organize the lower example into titles and paragrahs. The hierarchy gives the titles more meaning than the other information, and makes it easier to scan.

Alright, so this is all pretty basic stuff, right? Let’s take a dive into some deeper examples of how you can apply this very basic principle to some very sophisticated designs:

The Hierarchists Toolbox

Understanding that visual hierarchy is important is all fine and well, but how does a designer actually create it? The “tools” that we’ll look at are as simple as a carpenter’s toolset – hammer, nail, saw, etc – It’s what you do with them is what counts!

Size

Objects that are bigger demand more attention. Using size as a hierarchal tool is an effective way of guiding a viewer’s eye to a particular portion of the page. Because size is one of the most powerful forms of organization, it’s important to correlate size with importance in a design. The biggest elements should be the most important in most cases; the smallest elements should be the least important.

The use of BIG, bold type adds a level of order to this otherwise chaotic design. The eye should naturally move from big elements down to the smaller elements.

Color

Color is an interesting tool because it can function as both an organizational tool as well as a personality tool. Bold, contrasting colors on a particular element of a website will demand attention (such as with buttons or error messages or hyperlinks). When used as a personality tool, color can extend beyond into more sophisticated types of hierarchy; Using lush, comforting colors can bring an emotional appeal to a page. Color can affect everything from a websites brand (ie: CocaCola Red) to symbolism (ie: cool, subdued colors). Advanced applications of color can even be used to “classify” information within a hierarchy, as in the following example:

The Spectra Viewer site uses colors to represent different news categories, so it’s easy to find a particular type of information based on the color key.

Contrast

Contrast shows relative important. Dramatic shifts in text-size or color will impart a message that something is different and requires attention. Changing from a light background color to a dark background color can quickly separate the core content of a page from the footer.

The contrast between the light, airy header section and dark, earthy footer creates a distinct hierarchy of information.

Alignment

Alignment creates order between elements. It can be as simple as the difference between a “content column” and a “sidebar column”, but alignment can also take on more complex hierarchical roles. Consider, for instance, the power of information placed in the top-right of a web page. Because users general expect information in that part of the screen to be associated with profiles, accounts, shopping carts, etc., it gives everything places in that area a sense of the “official”. Alignment can also provoke interest if used in unique ways, such as in the following examples:

The Stuff Template uses a unique horizontal alignment system to separate brand and navigation from blog post content.

The Flex Template uses a grid inspired layout to develop visually interest as well as a taxonomy driven visual hierarchy.

Repetition

Repetition assigns relative meaning to elements; If all “paragraph” text is grey, when a user sees a new block of grey text, he can assume it’s another basic paragraph; when that same user encounters a blue link or a black title, he can safely assume it is different and unique from the grey text.

The Virgin site creates repetitive elements like paragraph text, then breaks the repetition when it wants to draw attention (like the red quote text).

Proximity

Proximity separates elements from each other and creates sub-hierarchies. Within a page there might be widgets that are separated from each other by space; within those widgets there is a new hierarchy of title, subtitle, and content. Proximity is also the quickest way to associate similar content. In the following example, it’s easy to find certain types of content simply based on their proximity with each other.

The Tuts+ sites actually do this really well (not to toot our own horn!). The left “content” column is clearly separated in proximity from the sidebar widget space. Furthermore, meta-data within a particular blog post is placed in close proximity of that post and further from other posts, reinforcing a sense of “belonging”.

Density and Whitespace

Densely packing elements into a space makes it feel “heavy” and cluttered; When elements are spaced out too much, they may lose the relationships to one another. When a page is designed “just right”, the eye will easily recognize when elements are related and when they aren’t.

By spacing elements out and keeping plenty of whitespace on the page, this design makes it easier for people to roam around and find the small, densely packed boxes of content.

Style and Texture

Perhaps the most open-ended tool in the Hierarchists Toolbox, style can be used to impart a form of hierarchy that both embraces and transcends the other tools. For instance: a flat gray background will “feel” different than an asphalt textured background.This style or personality given by the designer will naturally play a role in how different visual relationships are made.

It’s worth mentioning that style is also one of the most dangerous tools that a designer can use. Just like a carpenter cutting his finger off on a band-saw, a designer can easily mislead people by overemphasizing certain elements through style. Imagine a heavily textured, heavily designed site element that demands so much attention that it distracts instead of informing. This same idea extends to typefaces, buttons, tabs, and other elements. Be considerate of the impact on an overall design when you choose to add extra style and polish to an element.

Jeff Finley’s site does a great job of combining a lot of the tools that we discussed here, but his use of originally styled elements over the standard UI fodder are what gives the entire design sense of intentional hierarchy. Jeff manages to add just enough style to make his site feel personal without it going overboard.

Failed Hierarchy

Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.

As I just suggested in the last section, it’s important to note that hierarchy can be used for both good and evil. Think of all the annoying Flash advertisements, popup windows, glitter banners, etc. that the web has been plagued with over the years! While these ads succeed in grabbing attention, they ultimately fail the site owner and the viewer by breaking the visual hierarchy within a site. Similarly, if a designer builds a visual hierarchy such that certain key pieces of information are nearly impossible to find, the designer will have failed at his task. Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.

Why Hierarchy is Especially Relevant to Web Designers

“Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.”—Jeffery Veen, The Art and Science of Web Design

Jeffrey Veen wrote those words in 2001, but they still hold a heckuva lot of power today where “information overload” seems to be commonplace. As people, we’ve always had a keen sense for visual organization. However, as a society we’ve been being barraged with a vertiable tsunami of visual information over the last couple decades; as a result, people nowadays are hyper-sensitive to visual hierarchy. This is especially the case on the web where studies have proven that regular web surfers have learned to “scan” content innately; automatically seeking information that is relevant to their interests and discarding/disregarding information that doesn’t.

Because of this, becoming a master of visual hierarchy isn’t optional, it’s mandatory. As the typical web-surfing platforms expand from the traditional monitor to phones, tablets, even televisions, it’s becoming ever more important that we use strong, clear visual systems to communicate with web surfers.

An Exercise to Test Visual Hierarchy

To conclude, I’d like to end with a very simple exercise. As the example, we’ll use a website that you frequent, or a project that you’ve worked on recently; The exercise goes like this:

1. List the key information points that visitors are likely seeking.
2. Assign values (1-10) according to their importance to the average visitor.
3. Now, look at the actual design again.
4. Assign values (1-10) according to the actual visual importance as you see it in the live design.
5. Consider: Does the expected importance match up with the actual designed importance?

In most cases, the answer will include shades of “no”. There are lots of reasons for this – client demands, inexperienced designers, design-by-committee – or a hundred other reasons that you’ve probably read. Heck, in some cases, the designer may want to mislead the viewer (consider a “free” site that’s trying to guide users to paid content). Whatever the reason, understanding visual hierarchy and trying to interpret it is a way to improve the way that you see web design in a whole new light. Hopefully it’ll help inform your own work as well!