Design problem
Weak visual hierarchy
The screen is tidy and unreadable: nothing leads, everything competes, and scanning fails.
How you know you have it
- People miss the primary action and use a secondary one instead.
- Headings and body text differ by two pixels and one shade of grey.
- Two buttons on the same screen are both styled as primary.
- A squint test produces an even grey field with no shape.
Do these first
- 1Rank the content into three levels and write the ranking down.
- 2Apply two levers per level, not one, and keep the type scale small.
- 3Test in greyscale, then at a squint.
- 4Reduce everything that is not level one before you enlarge level one.
Why it happens
One lever doing all the work
Size alone rarely produces hierarchy. Weight, colour, space and position together do, and cost less type size.
Ranking never decided
If the team has not agreed which element is first, second and third, the design cannot express it.
Contrast spent on decoration
Borders, shadows and tints applied evenly consume the contrast budget that emphasis needed.
What to read, and why
Hierarchy is produced by contrast across several channels at once, so this collects the typography, colour, spacing and layout entries that supply those channels.
Why it behaves this way
4The mechanism underneath the symptom. Read these when the fix needs justifying to somebody else.
Law of Prägnanz
The eye resolves complex arrangements into the simplest, most stable interpretation available.
LawEstablished research
Von Restorff Effect
The item that differs from its neighbours is the one that gets noticed and remembered.
LawEstablished research
Selective Attention
Focused attention makes people miss things in plain sight, including changes to the interface they are using.
PsychologyEstablished research
Aesthetic and Minimalist Design
Every extra element competes with the ones that matter, so content should earn its place on the screen.
HeuristicExpert heuristic
The craft decisions
11The visual and structural levers that produce or relieve this problem.
Visual Hierarchy
The order in which elements are noticed, controlled by size, weight, colour, position and space.
UI foundationCraft convention
Contrast
Difference is what makes anything perceivable, and it is measurable for text against its background.
UI foundationCraft convention
Emphasis
Making one thing stand out, which only works if most things do not.
UI foundationCraft convention
Scale
Relative size is the fastest signal of importance and the easiest one to overuse.
UI foundationCraft convention
Whitespace
Empty space is a design element that groups, emphasises and sets pace, not leftover area.
UI foundationCraft convention
Proximity
Things placed close together are read as belonging together, before anything is read.
UI foundationEstablished research
Similarity
Elements that look alike are assumed to behave alike, which makes visual language a promise.
UI foundationEstablished research
Typographic Hierarchy
Using size, weight, colour and space to make the structure of text visible before it is read.
UI foundationCraft convention
Font Weight
The most space-efficient hierarchy lever, and the one most often limited by the typeface.
UI foundationCraft convention
Type Scale
A fixed set of sizes derived from one ratio, so type decisions become selections rather than inventions.
UI foundationCraft convention
Semantic Color
Colours assigned a fixed meaning, which only works if the assignment is consistent and never the only signal.
UI foundationCraft convention
Patterns that address it
2Recognised solutions, with the conditions under which each earns its place.
Empty States
The screen before there is anything to show, which is a teaching opportunity rather than a gap.
PatternCraft convention
Comparison
Putting options side by side so differences can be seen rather than remembered.
PatternCraft convention
Components involved
3States, behaviour and the accessibility contract you will need to specify.
Button
Triggers an action. If it navigates somewhere, it should be a link instead.
ComponentCraft convention
Card
A container that groups content about one object, and the most over-applied component in modern UI.
ComponentCraft convention
Badge and Tag
A small marker of status, category or count, which must not look like something you can press.
ComponentCraft convention
Language
1Where the words carry more of the fix than the layout does.
Microcopy
The small pieces of text that do most of the work: labels, hints, empty states, errors and confirmations.
UX writingCraft convention
Accessibility requirements
3The requirements this problem raises, mapped to the decisions that produce them.
Heading Structure
Headings are the table of contents screen reader users navigate by, so levels must follow structure rather than appearance.
AccessibilityCraft convention
Contrast
Difference is what makes anything perceivable, and it is measurable for text against its background.
UI foundationCraft convention
Use of Color
Colour may reinforce meaning but must never be the only thing carrying it.
AccessibilityCraft convention
How to find out
2Methods suited to confirming the cause before you commit to a fix.
Five-Second Test
Showing a design briefly and asking what people remember, which tests hierarchy and clarity of message.
Research methodCraft convention
Eye Tracking
Measuring where people look, which is expensive, frequently over-interpreted, and occasionally irreplaceable.
Research methodEstablished research
Check your work
1Interactive review passes, with progress saved in your browser.
UX Audit Checklist
A structured pass across the whole product, organised by the same categories as the audit tool.
ChecklistExpert heuristic
Decisions other teams made
1Worked cases, including the options that were rejected.
Choosing a Density for an Analytics Dashboard
A generous, modern-looking redesign made a dashboard slower for the people who used it all day.
Case studyCraft convention
Where this usually shows up
The same material, organised around the surface you are building rather than the symptom you are fixing.