Hierarchy connects content priority to action priority. Prominence should help an informed decision, not hide alternatives or consequences.
By the end: refactor a workshop card so its identity, useful facts, and next action have distinct roles.
Separate identity, facts, and action
A workshop card has several jobs: identify the session, show the date and place, expose availability, and offer an action. Making every line bold does not distinguish those jobs. Start by deciding what someone needs first and what they must check before acting.
Use a clear title, readable supporting facts, and an explicit action such as "Reserve a place." Avoid oversized generic headings such as "Information" when the session name supplies more useful orientation. Secondary content can be less prominent without becoming low contrast or tiny.
Read the card as a decision
A workshop card asks a visitor to connect a name, some facts, and a possible action. Start with a concrete decision: reserve one place in Clay basics if Saturday at 14:00 in West studio works for you. The title tells you which session this is. Time and location test suitability. Availability tells you whether reserving is currently offered in this model. Reserve a place expresses the action. If every element competes equally, the visitor must work out those roles without much visual help.
Hierarchy means differences in prominence that express those roles. It does not mean that the biggest item is the only important one. A session title may be prominent because it establishes identity, while availability remains readable near the action because it constrains the decision. Muting a label such as When can reduce repeated emphasis without hiding Saturday, 14:00. Making the time itself unreadable would remove information the visitor needs. The difference between subordinate presentation and unavailable information matters more than achieving a quiet screenshot.
Identity and decision facts have different jobs
Static workshop-card excerpt
Weekend workshop
Clay basics
Make a small piece with a tutor.
When Saturday, 14:00
Where West studio
Available 3 places in this demo
Action wording: Reserve a place
Secondary action wording: View details
No local reservation made.
Read the static excerpt by role
Clay basics identifies the workshop.
Saturday, 14:00 and West studio establish suitability.
3 places supplies the local availability condition.
Reserve a place names the action; View details names supplementary disclosure.
The card keeps the same facts while giving them different jobs. Prominence should help connect identity and conditions to the action, rather than make the action noticeable at the expense of its conditions. This excerpt uses enlarged teaching text, not a pixel-identical live card.
The card's small 'Weekend workshop' line gives a category, while Clay basics identifies the particular session. Enlarging the category instead of the name would spend prominence on information that distinguishes fewer choices. Likewise, a heading such as 'Details' supplies less identity than the workshop name. You can diagnose this without knowing typography terminology. Ask which text lets you tell this card from another, then ask which facts determine whether its action is appropriate. Those questions establish priorities before choosing sizes or colors.
Read the static specimen as if you were scanning for a place to reserve. First identify the workshop, then locate the time and room, then find the action wording. Notice that the facts do not become less necessary just because they are visually secondary to the name. A visitor might reject the session because of the time. A design that encourages rapid reservation while concealing that fact would promote the wrong task outcome, even if the main action attracted attention more reliably.
Now distinguish the decision from optional explanation. Materials included and bringing an apron may help preparation, but the working card initially keeps that extra text behind View details. The control states what additional content it reveals. It does not navigate to another website or submit a booking. This is a practical use of revealing detail on request: the initial card retains the identity, suitability facts, and action, while supplementary information can appear without replacing the card or losing its current reservation state.
Supplementary copy does not replace the workshop facts
Always present in the working card
Clay basics
Saturday, 14:00
West studio
3 places in this demo before a local hold
Revealed by View details
Materials included. Bring an apron. This is a fictional session.
Action wording after disclosure: Hide details
Opening details adds preparation information while the identifying and decision facts remain visible. The action is disclosure within the card, not navigation or a second reservation.
A card on an organizer's dashboard might prioritize a different decision, such as finding a waitlisted booking that needs attention. Its primary action need not be Reserve a place. Reusing the workshop card's colors everywhere would not make that staff task clear. Consistency helps when the same treatment expresses the same kind of role. It becomes misleading when a familiar filled action receives unrelated meanings without clear wording. Establish the local task first, then decide which action deserves stronger treatment within that context.
Try the interface
Your task: Compare all-emphasized and task-first treatments. Use the action buttons; styling changes must not change what the actions mean.
Refactor the working workshop card
Studio Desk demonstration. Actions affect this page only, not a real booking, account, or payment.
Reference card treatment
Weekend workshop
Clay basics
Make a small piece with a tutor.
When Saturday, 14:00
Where West studio
Available 3 places in this demo
No local reservation made.
Selected card treatment
Weekend workshop
Clay basics
Make a small piece with a tutor.
When Saturday, 14:00
Where West studio
Available 3 places in this demo
No local reservation made.
Only the selected treatment changes. The reference holds this lesson's starting treatment; unrelated style settings match across both sides. Design controls preserve local card feedback; Reset comparison restores both cards and the design controls. These alternatives are not assigned a quality score.
Separate treatment from the card's state
Use the working comparison to separate visual treatment from behavior. The reference starts with two filled actions. Task-first hierarchy keeps Reserve a place filled and makes View details an ordinary outlined action. Both still work. The selected card also changes the presentation of fact labels through its ranked treatment. The comparison therefore tests a combination of role cues, not a single isolated color change. A preference for that combination cannot establish which individual cue caused the preference.
Activate Reserve a place in the selected card. Its label becomes Release demo place, the available count changes from three to two, and the status says one demo place was reserved with no payment taken. These changes describe one local held place. The card does not ask for a guest, send a request, or issue a real reservation. The changed action label matters because the next activation now reverses the local hold rather than reserving an additional place for a second person.
The action label reverses when one local place is held
Initial card
3 places in this demo. Reserve a place. No local reservation made.
After Reserve a place
2 places in this demo. Release demo place. One demo place reserved. No payment taken.
After Release demo place
3 places in this demo. Reserve a place. No local reservation made.
The working card toggles one local hold. It does not accumulate more places on repeated activation, and the count is not shared inventory. Label, count, and status together describe the current state and the next action.
Open View details while that place is held. Materials included and the apron instruction appear, and the label becomes Hide details. The available count should remain two. Closing details should not release the hold. These are separate pieces of state: whether one local place is held and whether supplementary text is visible. A single 'active' style would be insufficient to describe both. The visitor needs to know what is selected or changed, not merely that some part of the card has become visually brighter.
Switch to Competing actions while leaving the hold and details open. The visual treatment changes but those local states remain. Next select Title only: actions still compete. The title grows to 34 CSS pixels while both actions remain filled. This is a counterexample to repairing action priority by enlarging a heading alone. It may make session identity more prominent, but it does not distinguish the relative roles of reserving and revealing detail. Compare the action row rather than judging only the overall amount of contrast.
The reference and selected cards are independent. Reserve in the reference and release in the selected card, then compare their counts and status lines. Each card reports its own local state; neither owns shared inventory. This independence lets you compare different treatments without one panel's action silently changing the other. It also limits the realism of the experiment. In a real service, two views of the same workshop could need a shared accepted state and updated availability, which these isolated cards deliberately do not implement.
A reachable comparison with different local states
Card
Local hold
Available display
Details
Reference after reserving and opening details
One place
2 places
Visible
Selected after reserving then releasing
None
3 places
Unchanged by release
Either card after changing a design preset
Preserved
Preserved
Preserved
Both cards after Reset comparison
None
3 places
Hidden
The first two rows can coexist because each card owns its hold and disclosure state. Presets alter presentation without clearing those states; reset deliberately clears both. This is useful experimental independence, not shared booking inventory.
Finish with Reset comparison. It restores the design choice and clears both cards' holds and expanded details. That differs from a design preset, which preserves card feedback. You can therefore change presentation while inspecting the same behavioral state, or reset when you need a clean start. Use both deliberately: hold a place, inspect all three treatments, then reset and verify that availability is three again. No state here survives as a real booking, and the display does not establish anything about payment, delivery, or persistence.
Use emphasis selectively
The reference gives competing actions similar emphasis. The revised treatment distinguishes the intended next step while retaining an ordinary secondary action. Size, weight, placement, and filled versus outlined treatment can all contribute. Use the smallest set of differences that makes the roles clear.
A primary action is local to a task, not a rule that an entire dashboard can contain only one filled button. A table may have repeated row actions. A destructive action should not gain prominence simply to make it match the accent color. Preserve visible consequences and choice.
Use emphasis without hiding the conditions
Prominence is relative to what surrounds an element. Two filled buttons can each have strong contrast against the card while offering little distinction between their roles. Giving one an outline preserves a visible action but makes the filled action comparatively stronger. This does not prove where every visitor will look first. It supplies a reasoned visual difference that can support the task. The mechanism depends on the actual surroundings, text, and states rather than on declaring that a particular color is universally the primary one.
The action accent is the card's local blue value, #9abef3. The page also uses named theme roles. A variable called --green is blue in Graphite, so its name does not promise green appearance. Names in styling code can outlast earlier palettes. The useful questions are which role a value supplies and what foreground appears on it. The dark --on-accent label supports the filled action treatment; the token name alone establishes neither meaning nor adequate readability.
Competing actions and task-first roles
Static treatment example: competing
Both action labels receive a filled accent treatment in the working reference.
Action wording: Reserve a place Action wording: View details
Static treatment example: task-first
Primary action wording: Reserve a place
Secondary action wording: View details
The working secondary action is outlined, not removed.
These text specimens illustrate the local #9abef3 action fill without pretending to be operable controls. The live comparison also changes fact-label treatment. Any response to the combined treatment cannot be attributed solely to the fill.
Keep dimensions separate from claims about understanding. The working card title is 24 CSS pixels in the normal treatments and 34 in Title only. Its action controls have a 44 CSS pixel minimum height in the lesson CSS. These are authored layout values, not measurements of how quickly someone recognizes a workshop or successfully uses touch. A taller target can address one physical constraint while a vague label still causes the wrong action. Likewise, a numerical contrast result cannot establish that essential availability information is easy to find.
Some style changes interact with rules inherited from the page. The hierarchy example does not exist on a blank canvas with an independent type system. Its card, title, paragraphs, buttons, and surrounding panel all receive existing CSS rules. Within the task-first treatment, fact labels become muted and less heavy, while their values remain readable. When judging a proposed change, inspect the resulting combination. Looking only at a single declared size or accent value can miss the rule that actually determines its weight, spacing, or background.
Consider a proposed copy change outside the model: adding 'Cancellation conditions apply' near Reserve a place. If that condition matters to the visitor's choice, it needs readable treatment and access to the actual terms. Reducing it to nearly invisible text to make Reserve stand out would remove decision support. The current workshop card has no cancellation terms or payment step, so do not infer those promises from it. The broader lesson is to distinguish optional detail from a condition whose absence could make the choice uninformed.
A proposed condition must remain available to the decision
Current working-card copy
3 places in this demo
Action wording: Reserve a place
No cancellation terms or payment step are implemented here.
Proposed copy addition, not a model feature
Cancellation conditions apply.
If added to a real service, this sentence would need readable placement and access to the actual conditions before commitment.
The right-hand specimen explicitly proposes different copy. It does not invent a cancellation policy for this card. Stronger action emphasis cannot substitute for making consequential conditions available before a real commitment.
Try the title-only preset again and compare it with task-first hierarchy while holding a place. Look for Release demo place in each treatment and read the available count before acting. A large heading does not answer whether you currently hold a place. That information comes from the label, count, and status working together. A revised hierarchy must survive this changed state, not merely look convincing when Reserve is visible. If emphasis makes the reverse action hard to distinguish from the initial action, the apparent visual improvement has introduced behavioral uncertainty.
Check behavior along with appearance
Click both actions in the model. Their feedback should say what happened, rather than merely changing the button color. The local demo updates a confirmation message, not a real account or payment. The comparison remains a hypothesis about prominence, not a measured attention model.
A screen can look calm while misleading people about what an action does. Do not use hierarchy to obscure cancellation terms, preselect unwanted extras, or make refusal hard to find. Informed completion is the objective.
Check which decision the emphasis supports
A useful exploration asks a question the interface can actually answer. Start with no local hold and compare whether you can identify the workshop, locate availability, and predict what each action will do. Then reserve one place and repeat those checks in the held state. Do not describe the task as 'click the blue button,' because that supplies a visual answer rather than testing whether the label and surrounding facts communicate the intended operation. The outcome is an understood local action, not an activated control.
Check the secondary action with the same care. Ask what View details will reveal, open it, and compare the expectation with the materials and apron text. It should not look like the only path to essential session identity, since that identity already appears on the card. After opening it, find Hide details and close the content without releasing the held place. This tests whether lower prominence still leaves the action discoverable and understandable. Secondary treatment does not excuse an action from being usable by keyboard or touch.
Disclosure and holding a place remain independent
Reserve one local place
Availability becomes 2; the next reservation action is Release demo place.
View details
Materials and apron text appears. Availability remains 2.
Hide details
Supplementary text disappears. The held place remains.
Change hierarchy preset
The hold and disclosure state remain as they were; presentation changes.
A disclosure state answers whether extra text is visible. A hold state answers whether the local place is reserved. Treating both as one undifferentiated active state would conceal which action is available next.
Use an ordinary counterexample to avoid turning hierarchy into a rigid rule. A list may repeat Reserve on several workshop cards because each action belongs to a different session. That does not mean one arbitrary card must receive all the emphasis and the others become unavailable. The relevant comparison is among actions within the current decision and among repeated objects the person must distinguish. On a destructive settings page, the most serious action might deliberately avoid the routine primary treatment until its consequences are clear.
If another person tries the comparison, distinguish observed behavior from an inferred cause. They might find Reserve sooner with task-first hierarchy, but that treatment changes action styling and fact-label treatment together. You cannot attribute their behavior solely to the blue fill or fact-label weight. If you need to isolate one cause, a further comparison must hold the other cues constant. The current lab intentionally offers complete treatments and a title-only counterexample, not independent switches for every visual property or an automated attention measurement.
Transfer the reasoning to a settings card with 'Save changes' and 'View explanation.' Saving is the task action; explanation supplies support. The interface should retain the explanation as a usable alternative while keeping the current values and consequences visible. If saving has already happened, the resulting status should say what was accepted rather than leaving an unexplained color change. This transfer uses the same relationship among identity, facts, action, and evidence, but it does not imply that Studio Desk's reserve toggle implements a real asynchronous save operation.
Transfer the roles without transferring the fake booking behavior
Conceptual settings excerpt, not an interactive editor
Receipt address
Current fictional value: mina@example.invalid
Task action wording: Save changes
Supporting action wording: View explanation
A real editor must separately describe draft values, accepted values, and save outcomes.
The primary versus supporting distinction transfers to a settings task. The reserve card’s local toggle does not transfer as a save implementation: a real editor still needs an explicit acceptance and failure contract.
You can establish that the selected treatment distinguishes the actions, that both work locally, that a hold changes the count and reverse label, and that presets preserve those states. You can identify risks such as missing conditions or ambiguous action wording in another interface. You cannot establish improved completion rates, accessible behavior for every assistive technology, or real booking safety from a static specimen and a local toggle. Those claims need evidence from the corresponding tasks, technologies, and service behavior.
Exercises
Find the wrong emphasis
A card makes "Share" the strongest action while the task is to reserve an available place. What would you change first?
Hint
Preserve the alternative but change its relative role.
Worked answer
Competing actions
Share
Reserve
Task-first roles
Reserve a place
Share remains secondary.
3 places available.
Worked comparison only. These drawings are explanatory content, not active form controls or service promises.
Role
Treatment
Session identity
Specific heading
Availability
Readable fact near the decision
Reserve
Primary action
Share
Secondary action
Prominence follows the task.
Give the reservation action a clear label and primary treatment, keep Share secondary, and place availability near the reservation decision. Check that the button actually starts a reservation rather than immediately charging or submitting an unexpected action.
Keep an essential condition visible
A designer reduces a refund condition to faint text so the main button stands out. Is that a sound hierarchy?
Hint
Importance and contrast are separate decisions.
Worked answer
Goal
Better method
Clarify the next action
Distinct button treatment
Retain the condition
Readable text near the action
Evaluate
Comprehension and informed completion
Quiet does not mean concealed.
No. Keep the condition readable and near the decision. Use spacing, weight, and action styling to establish hierarchy instead of making essential information difficult to perceive. A stronger conversion rate would not by itself justify concealing a consequential condition.
Sources and further reading
Selected guidance and technical definitions were reviewed, not a complete usability literature or accessibility audit. The interfaces are original teaching examples. They do not establish measured improvements in task performance. These optional links are not runtime dependencies.