How to get visual hierarchy right
The advice here is unglamorous, which is probably why it gets skipped. The short answer to visual hierarchy is that it is mostly a sequence of small decisions, not one big one.
Consistency is the quiet half of design work: it rarely gets complimented, and its absence is noticed immediately. Doing this properly once is usually cheaper than doing it approximately three times.
Why it matters
Every screen should have one obvious first thing to look at. It is worth being explicit about, because assumptions differ quietly. Check it against what you would want a competitor's site to get wrong.
The steps
- Establish what you have today before changing anything
- Size, weight, and colour do the work that arrows and boxes cannot
- If everything is emphasised, nothing is
- Write down the decision so the next person does not re-litigate it
If everything is emphasised, nothing is. None of that requires a large budget, only a decision and someone to own it. Write the reasoning down alongside the decision, because the reasoning is what changes first.
Making it stick
What this looks like day to day
The measurable part of design is whether people can find what they came for and act on it without hesitating. Three things worth confirming about visual hierarchy before you move on:
- Someone can say what the current setup is without going to look
- Size, weight, and colour do the work that arrows and boxes cannot — and you know whether that is true here
- There is a way to tell whether the last change to this helped
Pick the one that would hurt most if it failed, and start there.