Information hierarchy in UI design

What hierarchy means on a screen

Hierarchy on a screen answers a question the user never says out loud: what should I look at first? Every element makes a claim on attention, and the claim is settled by size, weight, color, position and space. When two elements make the same claim, the user pays for it in reading time, and they pay it on every screen of the product.

The practical version of hierarchy is a ranking rather than a style. Sort the elements of one screen into first, second and last, and write that ranking down before you change a property. Most screens carry more elements than deserve attention, and a written ranking turns the extras into a decision to cut or demote.

• First: the one element that answers the screen's question
• Second: the supporting content needed to judge it
• Last: everything else, which should recede rather than vanish
• Rank inside a group before ranking the groups against each other

Note: Hierarchy is relative, and that is where screens usually go wrong. A Heading that is the loudest thing inside a content column can be quiet next to a screen title, and a Label that is invisible in a card can be the loudest thing in a table cell.

Decide the reading order

Reading order is the path the eye takes, and in a left-to-right interface it usually runs down a column and then across a row. That default is worth following rather than fighting. A screen whose eye path zigzags is usually a screen whose blocks are in the wrong sequence, and rearranging the blocks is cheaper than adding a guide line to explain them.

You can check the order by reading the blocks aloud in the sequence they appear and asking whether the resulting sentence makes sense. A heading that arrives after the paragraph it introduces is a reading order problem, not a typography problem, and no weight or color setting will fix the order.

• Top to bottom, then left to right, unless you have a reason
• A title arrives before the text it introduces
• A shared left edge is what makes a group legible
• Six alignment positions sit in the toolbar, and distribute works across three or more selected blocks

Note: Alignment groups without drawing anything, which is why the alignment row matters more to a hierarchy than it first appears to. Distribute horizontally and distribute vertically appear once three or more components are selected.

Make level one unmissable

The first level of a screen should be findable in about a second, and the reliable way to guarantee that is to make it differ in two ways at once. A Heading that is larger than its neighbours and also the only bold thing, in the only accent color, cannot be missed.

Canvasola has the parts for that. The Heading kind sets a title, the Text kind sets body copy and the Label kind sets a small caption, and the Aa field in the inspector changes the size of any of them from 8 up to 96 pixels. The typography section adds weight as Regular, Semi or Bold, alignment as left, center or right.

• Differ in two ways at once: size, weight, color or surrounding space
• Heading for the first level, Text for the second, Label for the third
• One accent color per screen, and it belongs to the first level
• Space is a hierarchy signal too, and it costs nothing

Note: The light and dark theme token sets separate ink, body and muted text, so two levels of text can differ in color without you inventing a new value.

Group what belongs together

Proximity is the cheapest signal available and it does more work than any border. Elements sitting close together form a group, and elements sitting far apart read as separate, which is why a screen with even spacing everywhere reads as a flat list of equals no matter what the type is doing.

Grouping in the editor is a structural decision rather than a cosmetic one. Select two or more siblings and press Ctrl/Cmd+G to turn them into a single group, then Ctrl/Cmd+Shift+G to release them when the structure changes. A grouped block moves as one, and a group with auto-layout can hold a repeating row at a consistent gap.

• The gap inside a group is smaller than the gap between groups
• Sharing a left edge makes the membership obvious
• Ctrl/Cmd+G moves a block as one thing, and Ctrl/Cmd+Shift+G releases it

Note: The layers panel beside the editor shows the structure as an indented tree with hide, show and collapse controls, so you can inspect the grouping without hunting for it on the frame.

Remove the second headline

Many screens carry two elements that both claim to be the heading: the screen title, and a heading inside the content that repeats it. Keeping both is the most common cause of a flat hierarchy, and the fix is to demote one of them by a clear step rather than to shrink the pair until neither is legible.

Decide which of the two carries the meaning. A title that names the screen belongs in the header area, where it stays visible while the content moves underneath it. A heading inside the content introduces a section of that content, so it should be visibly smaller than the title, and it should disappear entirely when the section holds only one item.

• A screen title and a content heading are not both level one
• Demote the second one by a whole step, or cut it
• A section heading that introduces a single item is noise
• A large number is first level inside its card, not on the screen

Note: Cutting the duplicate heading is usually the cheapest change that improves a screen, and it never adds a line of work for the person building it later.

Test the hierarchy by squinting

The squint test takes about ten seconds. Zoom out until the words are unreadable and look at the screen as a set of gray shapes. You should see one dark shape where the level one element is, a mid tone for supporting content, and a light field for the rest. If all of it reads at the same weight, the hierarchy is not earning its place.

A second version of the test uses the editor instead of your eyes. Hide everything except the level one element in the layers panel, and check that the screen still makes sense with that one thing present. If the screen falls apart, the levels were never distinct to begin with.

• Squint until the text blurs, then look for one dark shape
• Hide all but level one and check the frame still reads
• Show the frame for three seconds and ask what stuck
• Run the same check in the dark theme, where muted text loses contrast first

Note: The squint test works on plain grayscale, which is why a structural pass can be reviewed before any styling exists.

Match hierarchy to a flow

A flow needs consistent levels from one screen to the next. When the action is the loudest thing on the first screen and only the second loudest on the next, the user relearns the screen every time they arrive. Set the roles once at the flow level: what is always a title, what is always an action, and what is always supporting content. The mockup tutorial shows the whole sequence being built.

Write the rule down and check every frame against it, then use the tools that enforce order rather than memory. Align across the six positions, and distribute three or more selected blocks so a row of cards reads as one row. The component guide covers keeping blocks identical, and the typography guide covers the sizes that carry the levels.

• Decide the role of each level once for the whole flow
• Check every frame against the same two or three rules
• Align across the six positions, then distribute three or more blocks
• Use the same component for the same job on every screen

Note: The theme toggle in the toolbar switches between the light and dark token sets, and it also changes the HTML export, so the file you hand over matches the appearance you reviewed.

A checklist you can reuse

• Each screen has a written ranking of first, second and last
• The level one element differs in at least two ways
• Only one of the title and a content heading is the headline
• The gap inside a group is smaller than the gap between groups
• Text blocks share a left edge rather than being centered
• The squint test shows one dark shape and a light field
• Hiding level one leaves a screen that still reads

Common mistakes to avoid

• Two headings at the same level. A screen title and a content heading that match leave two starting points. Demote the second or remove it.
• Even spacing everywhere. When every gap is identical, nothing groups and the screen reads as a list of equals. Tighten the gaps inside a group and widen them between groups.
• Hierarchy by color alone. One colored element can be found, but color alone fails in the dark theme and in print. Add size, weight or space to the signal.
• Ranking the whole screen at once. A big number inside a card is not competing with the page title, it leads its own group. Judge elements inside their container first.
• Reviewing at full zoom. At reading size everything looks balanced, because the eye reads it in detail. Step back until the words blur and the shapes decide.

Frequently asked questions

How do I test the hierarchy of a screen in Canvasola?

Use the layers panel to hide everything except one level at a time, and zoom out until the text is unreadable. A screen with working hierarchy shows one dark shape where the first level sits, a mid tone for supporting content and a light field for the rest. The panel offers hide, show and lock, so the test is a few clicks.

What is the difference between hierarchy and reading order?

Reading order is the path the eye takes, usually top to bottom then left to right. Hierarchy is which elements matter most once the eye arrives. A screen can have a clean reading order and no hierarchy at all, when every block is the same size and weight, and it can have a clear hierarchy with a tangled order.

Do I need a different hierarchy for mobile and web?

No, the levels should be the same and only the arrangement changes. A mobile frame at 390 by 844 gives the first level a narrow column, while a web frame at 1280 by 800 gives it a full row. The <a href="/blog/mobile-app-layout-design">mobile layout guide</a> covers the phone version.

Can the app tell me whether my hierarchy works?

No, and that is worth being clear about. Canvasola gives you the building blocks, the theme token sets and the layers panel, but nothing grades a design. The squint test and the hide-and-check pass are the review tools, and they work only when someone else looks at the frame, which is why showing a screen early is worth the meeting.

This guide is part of the design foundations collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.