UX Glossary · V
Visual hierarchy
The arrangement of elements so the eye reaches them in order of importance.
Visual hierarchy is the ordering of visual weight so a reader encounters things in the intended sequence. It is the difference between a page that can be scanned and one that has to be read.
What creates it
Size is the strongest signal, then weight, then contrast, then colour, then position, then enclosure. Space contributes by grouping, and grouping is itself a form of ordering.
The important property is difference. Three type sizes that are close together produce no hierarchy at all, because nothing stands out from anything else. A scale with clear steps does most of the structural work in a layout before any other decision is made.
The most common failure
Everything emphasised. Bold headings, coloured subheadings, a highlighted callout, three buttons of equal weight. Each element was emphasised for a good local reason, and the cumulative effect is a page with no first thing to look at.
Emphasis is relative and finite. Something can only be prominent if something else is not.
Testing it cheaply
Squint at the screen, or blur it heavily. What remains legible is what the hierarchy actually says, and it is frequently not what was intended. If the primary action disappears and a decorative image dominates, the hierarchy is inverted.
In practice
One primary action per view. If a page has two things competing to be most important, the page has not decided what it is for.