01 / THEORY
An interface cannot make everything equally important.
When every element competes for attention, people have to spend more effort working out what to look at, what to compare and what to do next.
Visual hierarchy turns a page into a sequence people can understand.
02 / BEHAVIOUR
Before deciding to buy, someone needs to answer a few questions quickly:
- What is it?
- Is it what I am looking for?
- How much does it cost?
- Can I trust it?
- What should I do now?
The interface should help answer those questions in the right order.
03 / UX
On a product page, we can establish a basic hierarchy:
- Product.
- Value proposition.
- Price.
- Availability.
- Evidence that supports trust.
- Primary action.
- Secondary information.
This does not mean every product needs exactly the same structure.
It means the information architecture should follow the logic of the customer’s decision.
04 / UI
Hierarchy is built through contrast, scale, position, space and repetition.
For example:
- type size;
- weight;
- position;
- negative space;
- colour;
- grouping;
- alignment.
The goal is not decoration.
The goal is to guide attention.
05 / ECOMMERCE
Common ecommerce hierarchy problems include:
- a banner competing with the product;
- too many calls to action;
- discounts appearing more important than the product;
- critical information placed too far down the page;
- secondary elements taking up more space than the main decision.
The result can be an experience that is difficult to interpret.
06 / IMPLEMENTATION
Visual hierarchy also needs to be reflected in the code.
A clear semantic structure helps maintain the relationship between content, design and behaviour.
In an ecommerce implementation, we can work with:
- reusable components;
- design tokens;
- states;
- responsive layouts;
- progressive content;
- components designed specifically for mobile.
07 / MEASUREMENT
A hierarchy hypothesis needs to be testable.
We can observe:
- interaction with the call to action;
- scrolling;
- interaction with secondary information;
- variant selection;
- abandonment;
- conversion.
The question is not:
Does it look good?
The question is:
Does it help the user understand what to do?