How to Use Visual Hierarchy To Create Clear and Easy-to-Read Web Pages

Imagine you’ve entered a cave.

Your eyes slowly adjust to your surroundings and begin to make out the shapes and forms around you

You see three doorways: they’re equal in size, and all the same distance from where you stand. How do you choose where to go first?

You’re frustrated, because you don’t have enough information to make a decision. All you can do is guess.

Now imagine you’ve entered a second cave.

In this one, there’s one large doorway before you. It says “Tours” and is wide and well-lit.

To one side, there’s a small doorway with a window in it that says “Tickets” above it. Next to it is a nondescript door that says “Employees only.”

In this cave you know exactly what to do.

You’re here for a tour, so you walk up to the ticket window, buy your ticket, and walk through the door that says “Tours.”

Your website is like a dark cave

You have a responsibility to your site visitors to show them the way and make the path clear.

Visitors who aren’t confused are easier to move toward whatever action you’d like them to take on your site, too.

Remember, every website your readers visit is a little different from the one before. And every time they come to a new site, visitors spend the first few seconds getting their bearings in their new environment.

As site owners, we should make the transition as easy as possible.

Lead them around your page with visual hierarchy

When your site has clear visual hierarchy, it answers the age-old question on every website visitor’s mind: “What’s in it for me?”

And it does this by highlighting what your site offers so that your visitor sees immediately how it will benefit them.

Your visitor’s eyes have to travel through your page in order to consume your information. To guide them effortlessly through this task, look at all your pages and set them up using the steps below.

1. Sort your information into categories

For each page on your site, divide the information you plan to present into three categories as described below.

Most important

Each page should have one “most important” piece of information. This is often the headline or image at the top.

It should lead your site visitor directly into the secondary or supporting information which will be the meat of your page.

Secondary or supporting

This information builds on the most important information.

It fleshes it out, shares the details, and includes your call to action.

Least important

This is information that needs to be on your page, but shouldn’t compete with the most important and secondary information.

It includes information like copyright notices and sidebar information. On blogs it might be author bios and comments sections.

2. Make your categories obvious through design choices

Once you’ve categorized the information on your page, the next step is to make design choices that give your information a clear visual hierarchy.

Follow these tips for each section:

Most important

Your most important information is a beacon that should attract and engage. It should be the first thing people notice on each page.

To draw your site visitors’ eyes to your most important information, choose any combination of these visual “tricks”:

• Position it at the top of the page


• Make it larger


• Apply brighter colors to it (if it’s an image, make it visually striking)


• Add more white space around it

Secondary or supporting

Here’s where your site visitor goes to get the details. This is the heart of your page, and your primary goal should be to make it easy to read and understand.

Use these tips to make it clear and easy to skim:

• Liberally apply the return key to your text to break up long paragraphs into digestible chunks


• Use subheads to serve as visual “light posts” throughout your page to guide readers through your copy


• Use blockquotes to break up copy and add visual interest


• Ditch sequential commas and instead create bulleted lists, which are easy to skim

For more on how to make your supporting information easy to skim, read 8 Incredibly Simple Ways to Get More People to Read Your Content.

Least important

What can we say about your least important information? It’s got to be there, but we want it to fade into the background visually.

If someone wants to find it, they can. But we want it to stand there like a butler at a 19th-century formal affair: ready and waiting, but in the shadows.

To accomplish this visually, your least important information should be:

• In a smaller font than your main text. Consider using a simple font that doesn’t draw a lot of attention to itself, and check to be sure it’s still readable at a small size.


• In a low-contrast color. Consider using a medium grey, or placing it on a medium-toned background so it “disappears” a little.


• Far away from your main content areas. Put physical distance between your main text and your least important content. This means separating your footer with white space, and adding some padding between your main content and sidebar.

I realize this step is tough. It’s one thing to ask people to make their copyright information smaller, but it’s another to convince them to not draw so much attention to information in their sidebar.

But one of the most common design mistakes I see is busy sidebars that draw too much attention to themselves. Consider toning them down so your site visitor will find it easier to read and consume your main information

3. Step away and come back: what do you see?

We all suffer from what I call “design blindness,” which is similar to editorial blindness.

It’s that point in the creation process where you can no longer see your work objectively, and it usually happens after you’ve put some time into creating it.

The fix for design blindness? Step away from your page.

Give it a day, or at least an overnight, before final tweaking and publishing. Come back with fresh eyes and look at it again.

Ask yourself:

• Do my eyes immediately go toward the most important item?


• Do they naturally flow down through the supporting information?


• Is the least important information there on the page, but not in competition with the other items?

If you can’t answer yes to the questions above, make adjustments. Go back to Step 2 above and tweak as needed until your visual hierarchy is clear.

If you’re really in a pinch and you have a friend nearby, do this: ask him to sit in front of your page and narrate out loud what he’s thinking as he navigates through it.

If he’s unsure what to do once he hits your page, you know you’ve still got some work to do.

Review the steps above, and keep tweaking until your page’s visual hierarchy is crystal clear.

Visual hierarchy: a powerful, subtle tool

Visual hierarchy is one of those design techniques that can make or break your website’s pages.

When your page uses its power, it’s easy to read and understand, and it guides visitors effortlessly through your information.

When it’s not used well — or not used at all — your visitors will be left feeling like your site is disorganized and difficult to navigate.

Ready to use visual hierarchy?

Join the discussion on Google+ and connect with me on Twitter.

About the Author: Pamela Wilson founded Big Brand System to help business owners combine the power of design and marketing to build recognizable brands. To learn more about using the power of design in your marketing, get her free Marketing Toolkit, which includes the 10-part Design 101 series.

The post How to Use Visual Hierarchy To Create Clear and Easy-to-Read Web Pages appeared first on Copyblogger.

Related Stories

• 5 Ways to Rankle an Old-School Journalist
• Conduct Better Podcast Interviews with this Simple 6-Step Preparation Process
• How to Turn Bland Text into Sparkling Online Content

How to Use Visual Hierarchy To Create Clear and Easy-to-Read Web Pages