Hierarchy. Strong, consistent visual hierarchy is key to a quality design.

Q : What is visual hierarchy?
A : Important elements have the most emphasis. Least important elements have the least emphasis. So, a user's eye should move around the page from your most important content to your least important content.

Q : Ok...I still don't understand. How do you measure the emphasis of a single design element?
A : There are a couple of design principles that we can use to create more or less emphasis.

Contrast
more contrast = more emphasis
less contrast = less emphasis


Size
larger = more emphasis
smaller = less emphasis


Positioning
more space = more emphasis
less space = er, clutter. There should always be some space.


Color
darker or brighter = more emphasis
lighter or duller = less emphasis


Q : How do you decide the order? What should people look at first on my website?
A : Of course it varies from site to site, but here's a hierarchy that works for most:

1. Logo / Navigation / Feature


2. Section Headings / Small Features


3. Accompanying Text

Q : I'm a visual person. Can you just show me an example? What does a design with strong visual hierarchy look like?
A : Here ya go. I added numbers to indicate where my eye went.

Clear Hierarchy

Both examples use contrast, size, positioning, and color effectively. The visual hierarchy guides your eye to the feature first and the sub-features second. Perfect!

Confusing Hierarchy

I didn't know where to look first with these examples. I numbered them, but doubt that the goal of the design was to look at the spinning globes first. I'm talking to you Freemap.com!

Q : Tell me again - why is this important?
A : Having a clear visual hierarchy helps your users scan the page and quickly take in the content. Visual confusion leads to user confusion and frustration.

Q : But how do you measure the weight of an element?
A : I like to do a squint test. Put the design on the screen/wall, squint your eyes so it's a little blurry. What do you look at first? Second? By squinting, you are not thinking about the content itself, but about what item has the most weight on the page.

Another useful tool is Feng-GUI.

The Feng-GUI heat map service is an automatic alternative to eye-tracking. Unlike eye-tracking or click-based heatmaps, Feng-GUI creates heatmaps based on an algorithm that predicts what a real human would be most likely to look at.

Check out Forum One's hierarchy.


Thanks to Brian at The High Contrast