Think Smart Designs Blog: Best Information About Visual Hierarchy: How Well Does Your Design Communicate?

The goal of visual design is to communicate. How you organize and prioritize your elements conveys valuable information about their relative importance. Visual hierarchy aids comprehension, reinforces your message, and guides your visitor through your story.

photo credit: dougbelshaw

What is Visual Hierarchy?

A hierarchy is an organization of items into different levels of relative importance. Visual hierarchy is naturally enough creating this organization and prioritization visually.
Through basic design principles you emphasize one element over another so more important content looks more important. You design related elements to provide visual cues that those elements are on the same level in the hierarchy. You organize everything on the page to create a sense of order.
Visual hierarchies create centers of interest on your page, communicate additional meaning through convention and repetition, highlight actions you want your visitors to take, and establish patterns of movement and flow.
Ultimately the visual hierarchy you establish tells a story about your page and site.

photo credit: M i x y

Why is Visual Hierarchy Important?

Very simply, because it more effectively communicates information. We are visual beings and can quickly pick up on visual cues to better understand our environment.
Web pages and websites have a lot of information to communicate. When we land on a new page we immediately have some questions we need answered.

Is what I’m looking for on this page?
Where is it?
How do I complete my task?

By creating visual hierarchies, designers enable pages to be scanned and make information easier to understand.
We make it easier for visitors to find what they’re looking for. We create clear paths to completing tasks and highlight actions the visitor wants to take and that we want the visitor to take. We communicate messages that reinforce or add to the copy.
One of the first things you learned with html was probably the heading tag. Headings are hierarchy and make some words more important than the rest of your type. Tags for blockquotes and lists, strong, and em, also add a visual hierarchy to your typography.
Compare the two images below, one with no hierarchy and one with a clear hierarchy.

The image on the left has no hierarchy and as a result anyone visiting the page will need to do a lot of work to determine if this page is what they want. Assuming it is, the visitor has no choice, but to read every word on the page to find the bits of information they’re interested in or need to complete their task.
The image on the right on the other hand makes the page easy to scan. It’s easily scanable and won’t require much effort for the visitor to determine if she’s on the right page. Assuming she is, the page leads her quickly to the information she wants or needs.
Which of the two designs is more inviting? Which will more likely be read? Which will more effectively communicate?
I mentioned above that visual hierarchies create centers of interest. Every web page should have a goal. That goal might be as simple as having the content read or it may be to entice a visitor to enter your sales funnel. Every page should have some primary element you want your visitors to notice.
Visual hierarchy makes clear the primary, secondary, and supporting elements on the page.

photo credit: erix!

How Does Visual Hierarchy Express Meaning?

Think of the basic design principles contrast, repetition, alignment, and proximity. Each allows us to add relative meaning to information.
Contrast shows relative importance. Without being told you know the larger text is more important than the smaller text. An h1 heading is bigger than an h2 heading is bigger than an h3 heading. Bigger grabs our attention first and so comes across as more important.
Repetition attaches meaning to new elements. Think blue underlined links. You’ve seen them before and the next time you see them you bring with you information about them. Repetition instantly communicates that elements are at the same level in the hierarchy.
Alignment creates order. It allows you to quickly connect elements across the page and helps define start and end points. Think grids.
A single element that breaks the established alignment calls attention to itself and it’s importance. Think of a pull quote. Visually it gives you clues it’s an important concept taken from within the text.
Proximity groups elements within a hierarchy and creates new sub hierarchies. Your home page has three offers for different products or services. Each might have a heading, a descriptive paragraph, an image, and a link to more information. The specific design elements would be on a different hierarchical level, but each offer (by containing the same 4 elements) connects the offers as being at the same hierarchical level.

photo credit: aussiegall

What Aspects of Design Control Visual Hierarchy?

You create a hierarchy in design, by adjusting the visual weights of your element. More visual weight is seen as more important. Less visual weight is seen as less important.
I mentioned some of the things that affect visual weight in a previous post on balance in web design. In that post we looked at controlling visual weight to balance our entire composition. Here we’re looking to create a hierarchy.
The mechanisms for controlling visual weight are the same in both cases.

Size – As you would expect larger elements carry more weight
Color – It’s not fully understood why, but some colors are perceived as weighing more than others. Red seems to be heaviest while yellow seems to be lightest.
Density – Packing more elements into a given space, gives more weight to that space
Value – A darker object will have more weight than a ligher object
Whitespace – Positive space weighs more than negative space or whitespace

Additionally we might look to shape, prominence, and images to adjust visual weights.
Your own judgement can lead you here. Look at any two elements and think about which carries more weight. Ask yourself why, what is it about one element that makes it heavier than another.

photo credit: Banalities

Summary

Hierarchies help give order. They prioritize items and aid in communication. Visual hierarchies organize, prioritize, and communicate visually by modifying the visual weights different elements carry.
It’s important to remember that before actually designing a hierarchy we take the time to think about our content and what should be seen as more important on a page. Just because you can make a piece of text stand out doesn’t mean you should.
Your hierarchy should begin with thoughtful consideration of the content and goals of the page. Only after you’ve decided intellectually the hierarchy of your page should you attempt to visually design that hierarchy.
In a presentation on Communicating with Visual Hierarchy (pdf), Luke Wroblewski, offered this summary:

Visual Communication is part
Visual Organization and part personality.
Visual Hierarchy is a deliberate prioritization of
Visual Weight enabled by the manipulation of
Visual Relationships to create
Meaning for users
- communicate messages
- illuminate actions
- organize information

Remember, design is not aesthetics alone. Your web page is trying to communicate something. You can improve how well it does that by adjusting the visual weights of your elements to create a visual hierarchy.