Creating visual hierarchy without confusing visitors

Visual hierarchy means arranging a page so the most important thing is the first thing people notice, the second most important is next, and everything else stays quietly in the background. You create it with four plain tools: size, contrast, spacing, and position. You avoid confusing visitors by using only a few clear levels and being consistent about them.

You don't need any design or coding background to do this. Here's how it works, and how to check your own pages.

What is visual hierarchy, in plain terms?

Think of a street sign. The word STOP is huge and red, and the small print underneath is, well, small. You know what matters before you've read anything. A web page works the same way, except it has more going on: a headline, some text, pictures, buttons, a menu.

When everything looks equally important, visitors have to work out what to do on their own, and most won't bother. They leave. When one thing clearly stands out, they follow it.

A good rule is to aim for three levels:

1. Level one: the one thing you want people to see first (usually your main headline or your main button).
2. Level two: supporting information, like subheadings, short descriptions, and key images.
3. Level three: everything else, like footer links, small notes, and captions.

If you can't say which level a piece of your page belongs to, it probably doesn't need to be there.

Which tools control what people notice first?

Four things do almost all the work.

Size

Bigger things get noticed first. Your main headline should be clearly larger than your subheadings, and subheadings larger than body text. If two things are almost the same size, the eye doesn't know which to pick, and that's where confusion starts. Make the gap obvious.

Contrast

Contrast is how much something differs from what's around it. A dark button on a light background pops. A pale grey button on a white background disappears. Pick one color for your main button and don't use that color for anything else. That way, people learn quickly that it means "click here."

Spacing

Empty space isn't wasted space. Room around an item makes it feel more important, and it groups related things together. Put a heading close to the paragraph it introduces and leave a bigger gap before the next section. Visitors will read the page in chunks without noticing why.

Position

People tend to start at the top and scan down, and in left-to-right languages they look at the left side first. Put your most important message and your main action near the top, not buried halfway down. If someone has to scroll to find out what you offer, many won't.

What makes a page confusing instead of clear?

Most confusing pages share the same few problems:

• Too many things shouting. Five bright buttons, three bold banners, and a flashing offer. If everything is emphasized, nothing is.
• Too many styles. Four different fonts or a dozen colors make a page feel messy. Stick to one or two fonts and a small set of colors.
• Inconsistency. If headings are big and blue on one page and small and black on the next, visitors have to relearn your site every click. Treat each level the same way everywhere.
• Competing actions. "Buy now," "Sign up," "Read more," and "Contact us" all given equal weight. Pick one main action per page and make the others quieter.
• Decoration over meaning. A big image that looks nice but pushes your headline off the screen is working against you.

The fix is nearly always to remove or tone down something, not to add something new.

How can you check your own page?

Try the squint test. Open your page, lean back, and squint until the text blurs. What still stands out? That's your hierarchy as a stranger experiences it. If the thing that stands out is a decorative image or a menu rather than your headline or main button, adjust the size, contrast, or position until the right thing wins.

Then ask a friend to look at the page for five seconds and tell you what the site is for and what they'd click. If they hesitate or guess wrong, simplify.

If you'd like a second opinion, the free website grader lets you score an existing site and see where it could be clearer.

Getting it right from the start

If you're building a new site, hierarchy is easier to get right at the beginning than to fix later. With SimplePath, you build a website by describing it, so you can say plainly what the one main thing on each page should be, and shape the page around that. You can see what you can create on the products page, whether that's a simple site, a store, a blog, or a member area.

Have a question about your own layout? Get in touch and we'll point you in the right direction.