Visual hierarchy must match content priority

What it is

A medication reminder fills the upper half with a handsome lifestyle photo; dose and schedule sit in pale small type under it. Afterwards people can describe the kitchen in the photo and cannot say how many tablets in the morning. Whatever looks heavier is taken as the content worth remembering — visual rank is read as informational rank. Alignment is not “the page is attractive and the information is also present.” It is two orderings coinciding: the editorial ranking of content, and the ranking of weight on screen. The photo may stay if it does not outrank the dose.

Why it happens

People use “salience ≈ importance” as a heuristic, and under time pressure with no plan to read every word it is almost the default. A health home screen is exactly that kind of low-involvement browse; the heuristic stays on. The photo takes encoding resources on size and detail; the dose, the proposition that should have been encoded, gets residual attention; what enters memory is the picture, not the number. The mismatch is at encoding, not later “not caring about health.” Shrink the photo and give the dose a higher-contrast line, and the heuristic will treat the number as the thing to keep. You do not first have to teach “please look at the type.”

Studying it

Two independent rankings: content owners, without the visual, list “what this screen must send away with you”; observers who have not seen that list, after a short presentation, list “what this screen seems to emphasise.” Compute rank correlation. The independent variable is whether visual weight was rearranged to the content list; dependents are whether correlation rises, and free recall of the critical proposition. Low correlation plus low recall is failed alignment. Low correlation but the proposition still elicited may be a task schema saving the day, not visual alignment.

Where it stops holding

Decorative brand films and seasonal skins may let image outrank type if that screen is not scored on remembering an operational fact. Professional tools whose users already stare at dose will suppress the heuristic; that does not prove a patient-facing home is aligned. Several items tied for editorial first have no legal visual counterpart — content has not ranked yet, so mismatch is guaranteed.

Applying it

• Writers deliver an unstyled priority list, three items at most. Visual assigns peaks only to those three.
• A large image or oversized decorative type that is not first on the list may not take the heaviest channel on the first screen.
• Item one on the list must still stand on the text block’s own contrast with the image removed. Otherwise the image is doing “looks important” on its behalf, and a swapped image drops the rank.
• Check: seal the content list. Other people look five seconds and write “what this page wants you to take away.” If fewer than four of five match item one, lower the image or raise the type until the spoken takeaway is that item. Do not stack translucent type on the image to “keep the picture and align” — translucent type usually loses both.

Related

• Same group: F3.07.2 Brand occupying the top of the hierarchy is a common mismatch · F3.07.3 Conflicting priorities need a content tradeoff · F3.07.4 Alignment of visual hierarchy with content priority can be tested with eye tracking or first-look tests
• Nearby: F3.05.3 Flow should match the order of the task · F3.01 Composition of visual weight · F6.06.2 Illustration does not carry operational information
• Search terms: visual hierarchy · content priority · centre of interest · encoding