Most screens have a single thing the person is there to do: pay, continue, save, send. Yet many interfaces give that action the same weight as five others around it. The person then has to read everything to work out what matters, and some will pick the wrong button.

Hierarchy is the tool that fixes this. It is the order in which the eye moves across a screen, set by size, weight, colour, position and space. A clear hierarchy answers the question every person silently asks: what am I supposed to do here?

Decide the main action first

Before any layout, write down what the screen is for in one sentence. That sentence names the primary action. Everything else on the screen is either information that supports it or a secondary route away from it.

If the team cannot agree on the one thing, the screen is probably doing two jobs. It may need to become two screens.

Give it the most weight

The primary action should be the most visible element: a filled button, a clear position, enough space around it. Secondary actions can be outlined or written as links. Destructive ones, like delete or cancel, should be clearly different and never placed where the main action usually sits.

Colour should do the same job everywhere. If the filled brand colour marks the main action on one screen, it should not be used for a decorative banner on the next. People learn the pattern quickly, as long as it is kept.

Put it where the thumb is

On phones, the lower part of the screen is easiest to reach with one hand. A main button pinned near the bottom is often easier to use than one at the top of a long page. Keep it clear of the system bars and on-screen keyboard.

Remove before you rearrange

When a screen feels cluttered, the first move is to take things away, not to shuffle them. Ask whether each element needs to be there at this moment. Much of it can move to a later step, a details view or a menu, and the screen becomes easier to scan.

A quick test helps. Show the screen to someone for five seconds, hide it, and ask what they would do next. If they cannot say, or name the wrong thing, the hierarchy needs more work before any detail is polished.

Back to the journal