Hierarchy, layout, and copy

Objectives

By the end of the lesson, you can form a visual and content hierarchy based on the user's task. You understand that size, position, white space, contrast, grouping, and microcopy together direct attention, and that "the bigger the button the better" is not the only tool of hierarchy.

Why is designing attention important?

On a screen the user does not read, but scans. Within seconds they decide where to look, what to understand, and where to step next. If the designer does not direct the eye, it wanders at random, and the user clicks the loudest element, not the most important one. Hierarchy is the tool with which the designer decides in advance what should be the first, second, and third thing the user notices.

Designing attention

Visual hierarchy is the arrangement of attention and information priority with visual means. Its tools:

Tool	How does it work?
Size	A larger element attracts the eye first
Weight and color	A thicker, darker, or more strongly colored element is emphasized
Contrast	An element differing from its surroundings stands out (for contrast see chapter 3)
Position	Elements in the top left corner and at the top of the page are seen first (in left-to-right languages)
White space	The space around an element highlights and separates it
Proximity	What is close seems to belong together
Repetition	The same style signals the same role

A visual decision, however, should have a content reason. When selecting an appointment, for example, the current choice, the critical condition, and the way to continue should be emphasized, not necessarily the decorative image.

Layout and grouping

Gestalt principles in brief

The Gestalt principles of psychology describe how we perceive shapes as groups. Three of them are especially useful in designing interfaces:

• Proximity: we see elements close to each other as belonging together. A field's label should be near the field; a condition tied to a price should not appear in a distant footnote.
• Similarity: we read similarly formatted elements as having the same role. This is why links and buttons need a consistent look.
• Closure / enclosure: a shared frame or background marks a group. But do not break the screen into too many boxes; too many frames create noise.

Leave enough space between groups so that the structure is visible. It is worth organizing spacing into a system: multiples (8, 16, 24, 32) of a base unit (for example 8 points) give a consistent rhythm, and also simplify decisions.

Reading pattern

Users mostly read content by scanning: the important heading, then the bold keywords, then the familiar elements. The "F-pattern" describes that text pages are often scanned in horizontal bars, moving down along the left side. This is not a law but a warning: key information placed in the bottom right corner can easily be overlooked.

Responsive layout

The layout has to preserve its logic when the screen size changes. On mobile we do not just squeeze the desktop view: we decide in what order the user gets the information, what remains visible and what can be opened when needed. We discuss the details in the next lesson.

Microcopy

Microcopy is short, task-supporting interface text: the text of buttons, labels, help, error messages, empty states. Short labels are part of the task, and often they decide whether the user is sure of their step.

Rules:

• The button should name the consequence. "Continue" is good only if the context is unambiguous. "Check booking" or "Submit registration" names the consequence on its own.
• Use the user's language, not the system's. The label should not reflect the internal state of the system if the user arrived with another goal.
• The explanation should be at the place of the decision, not hidden in a separate help. For a critical action the text can reduce the risk: next to "Finalize", show what becomes final.
• The tone should be consistent and respectful, especially for errors.

Example comparison:

Weak	Better	Why?
"Send"	"Submit registration"	The button names the consequence
"An error occurred."	"Saving failed. Your changes were kept, try again."	Says what happened and what to do
"No data."	"You have no saved events yet. Browse today's programs."	Gives the situation and the next step

Worked example: the registration form of Mai program

On a form, next to the primary "Send" button there is an equally large "Cancel" button, three links, and an advertisement-like information panel. The participant is not sure which step finishes the process. The fix is not necessarily more color:

• the main action gets a clear label ("Submit registration") and a separated place;
• the interruption ("Cancel") is less emphasized but reachable (for example a text link);
• the supplementary information goes near the field or into a secondary layer;
• the cancellation condition stands above the submit button, right before the decision.

Common misconceptions

Claim	Clarification
"Hierarchy is only visual style."	The order and wording of the content create hierarchy just as much.
"Shorter text is always better."	A text that is too short and vague increases uncertainty.
"The bigger, the better."	A large element is useful only if it is important in content; if everything is large, nothing is emphasized.
"White space is waste."	White space groups, highlights, and gives rest.

In brief

• The tools of hierarchy: size, weight, contrast, position, white space, proximity, repetition; use them with a content reason.
• Proximity and similarity make things belong together; the base spacing unit gives rhythm.
• Microcopy is part of the task: the button names the consequence, the explanation is at the place of the decision.

Review questions

1. What must the user notice first on the main screen?
2. Which elements seem unjustifiably equally important today?
3. Is the label of your main button understandable on its own?
4. Which information did you place too far from the decision it belongs to?