Flow should match the order of the task

What it is

On the last checkout step the user must confirm the amount due, then pay. The page makes an animated coupon the heaviest object, sets the total in small type in a corner, and gives the pay button medium weight. The eye hits the coupon, then hunts the button; the total is often seen on the way back, which produces “I thought it was that price” after the fact. Flow and task steps are misaligned. Flow exists. It delivers the wrong processing order. Alignment means the 1-2-3 of the weight sequence is the same 1-2-3 the task must pass through.

Why it happens

Task order is an external constraint: some steps are causally first (see the total → decide to pay → press). The visual system does not care about causation; it supplies objects by weight. Under mismatch, people deeply process something irrelevant or something that should have come later; working memory is occupied, and the critical value gets residual attention, so it is missed or seen without being encoded. Coupon motion also pulls attention back in time, turning a once-through “confirm the total” into a skippable margin. Alignment is not prettier pages. It is matching the supply order of attention to the causal order, cutting structural errors of the “looked at the wrong thing first” kind.

Studying it

Write the irreversible task steps, collect visual sequences on the same materials, and count step inversions (task requires A before B; vision delivered B before A). The independent variable is which step is made the peak; dependents are inversion rate and later decision errors (wrong amount, unread terms). The control moves the peak onto the causal first item. Short completion time is not alignment — some people finish fast by skipping the step they should have seen.

Where it stops holding

Exploratory browsing has no unique task order, so alignment has no anchor. A multi-step wizard already nails order with pagination; in-page flow only needs “next” not to be the lightest object, not a strict 1-2-3 of every caption. Experts skip steps; aligning flow with task mainly protects first-timers and infrequent users. Legally mandatory terms made heaviest can satisfy compliance and still wreck the pay sequence. Split the mandate and the pay action in time or space rather than letting them share one flow.

Applying it

• For a critical path, keep a two-column sheet: task steps on the left, current weight first/second/third on the right. Where they cross, change the right column, not the causal left.
• Modules that move, flash or count down must not become the first peak ahead of decision values (amount, permission, destructive consequence).
• Values that must precede action — totals, risk — should beat the action on luminance or size. The button may sit close and large; it may not jump more than the value it confirms.
• Check: after a real task, ask immediately “what did you confirm before you pressed.” If the causal prerequisite (total, address) is missing from the retell, compare the recording to see whether that value sat after the action in the flow. Make it first or second inside three seconds and retest the retell until the critical value is stably reported before the action.

Related

• Same group: F3.05.1 Flow follows the weight sequence, not positional order · F3.05.2 Equal-weight foci fork the flow
• Nearby: F3.07.1 Visual hierarchy must match content priority · F7.01.1 Direct attention to where the change happened · E1.10 Button order
• Search terms: visual flow · task order · centre of interest · checkout