Theory
Everything shouted, so nothing was heard
A redesigned FestConnect screen tried to make EVERYTHING stand out: the event name huge, the rules bold, the sponsor logo bright, the register button big, all competing at once.
The result? Users' eyes bounced around, overwhelmed, and: ironically: took LONGER to find the register button than on the plain version.
When everything is emphasised, NOTHING is. The cure is visual hierarchy: deliberately deciding what users should see first, second, third, and styling accordingly. It is how a screen guides the eye without a single instruction.
Theory
Visual hierarchy, formally
Visual hierarchy is arranging and styling elements so users perceive their order of importance, guiding attention to what matters MOST, FIRST.
It works because the eye is automatically drawn to certain properties. By controlling them, you control the viewing ORDER:
- a big, bold, high-contrast, well-spaced element is seen first
- a small, light, low-contrast, cramped element is seen last
Every screen should have a clear FIRST thing (the primary focus, usually the main action), then secondary, then tertiary. You are the conductor deciding what the eye reads in what order.
At a glance
Tools for building hierarchy
| Tool | How it draws the eye | FestConnect use |
|---|---|---|
| Size | Bigger = more important, seen first | The Register button is the largest control |
| Colour / contrast | A contrasting accent pulls attention | Terracotta Register button on a calm background |
| Weight | Bold stands out from regular | Event name bold, fine print regular |
| Whitespace | Isolation emphasises; space frames importance | Register button given room around it |
| Position | Top/left read first (in LTR reading) | Key action placed where the eye lands |
Theory
The reading pattern, and the one-focus rule
The eye does not scan randomly. In left-to-right cultures, people tend to read screens in an F-pattern (text-heavy pages) or Z-pattern (simpler layouts): top-left first, sweeping across and down. Placing the most important element where the eye naturally LANDS reinforces the hierarchy.
And the golden rule: one clear primary focus per screen. Decide the single most important thing (register), make it dominant, and let everything else recede in comparison. Trying to make 5 things primary destroys hierarchy: importance is RELATIVE, so something must be quiet for something else to shout.
Quiz
A FestConnect screen makes the event name, the rules, the sponsor logo AND the register button all large and bold. What is the likely effect on visual hierarchy?
- Excellent hierarchy: everything is clearly important
- Hierarchy collapses: when everything is emphasised, nothing stands out, so users struggle to find the primary action
- The screen will load faster
- Colour becomes unnecessary
- Users will read it in perfect order
Show the answer
Hierarchy collapses: when everything is emphasised, nothing stands out, so users struggle to find the primary action
Hierarchy is RELATIVE: an element stands out only by contrast with quieter elements, so emphasising everything flattens the hierarchy and nothing leads the eye: exactly the overwhelmed-users problem from the hook, where the register button became HARDER to find. Option A states the misconception directly (you cannot make everything primary). Options C and D are irrelevant (load speed, colour necessity). Option E is the opposite of what happens: with no hierarchy, reading order becomes chaotic. The rule: to make something important, you must let other things be LESS important. Restraint creates focus.
Think first
Make the register button win
On FestConnect's registration screen, name at least 3 specific techniques you would use to ensure the Register button is what the eye finds FIRST. Then tap.
Show the answer
(1) Size: make it the largest interactive element on the screen. (2) Colour/contrast: give it the one bold accent colour (terracotta) against an otherwise calm palette, so it is the only 'loud' thing. (3) Whitespace: surround it with generous empty space, isolating it so it visually pops. (4) Position: place it where the eye lands or naturally ends its scan (e.g. bottom of the flow, prominent). (5) Weight/label: a bold, clear 'Register' label. The combined effect: the button dominates every other element, so a nervous first-year's eye goes straight to it. Hierarchy is these tools stacked with intent toward ONE focus.
Watch out
Hierarchy slips
Emphasising everything: the flatten-everything trap; importance is relative, so let some elements be quiet.
No clear primary focus: decide the ONE main thing per screen and make it dominant.
Fighting the reading pattern: hiding the key action where the eye rarely goes; place it where attention lands.
Hierarchy by colour alone: combine size, weight, contrast AND space; do not lean on a single cue (also aids accessibility).
Theory
From attention to understanding
Visual hierarchy guides WHERE the eye goes. The next lesson adds tools that help users UNDERSTAND faster: ICONOGRAPHY and IMAGERY: icons and pictures that communicate at a glance, when chosen and used well (and confuse when not). Then Unit 4 closes with the force that ties every screen together into one recognisable product: branding and consistency.
Summary
Key takeaways
- Visual hierarchy styles elements by importance so users see what matters most, first.
- It works by controlling the properties the eye is drawn to, setting the viewing order.
- Tools: size, colour/contrast, weight, whitespace/isolation, position.
- The eye scans in patterns (F-pattern, Z-pattern in LTR cultures); place key elements where it lands.
- One clear primary focus per screen; importance is relative, so something must be quiet for another to stand out.
- The primary action (Register) should be the most visually dominant element.
- Memory hook: if everything shouts, nothing is heard: choose what leads the eye.