How Can a Design Guide Attention Without Making Every Section Compete for It?

At 4:12 on a Thursday, a pricing page has six first priorities.

Sales wants the demo button first. Product wants the new feature first. Security wants the compliance badge first. Finance wants the annual discount first. Brand wants the campaign line first. The customer, inconveniently, wants to know which plan fits.

The design review ends with a familiar compromise: make everything more prominent.

That compromise is not neutral. It converts an argument inside the company into competition on the screen. The business has simultaneous priorities. The visitor has sequential attention.

A useful hierarchy does not decide what is important forever. It decides what is useful now, what should become useful next, and what can remain available without demanding the same moment.

A page cannot have six firsts

Visual hierarchy is often described as a ranking. Put the most important item at the top, make it largest, then reduce emphasis as importance falls.

That account is tidy. It is also incomplete.

A person does not use a pricing page by consuming its permanent ranking from first place to last. The person arrives with a question, finds a promising cue, inspects a region, updates an understanding, and decides where to continue. The right priority therefore changes as the task changes.

The headline may need to answer, "Is this product for a business like mine?" The plan table may then need to answer, "Which option fits the expected use?" Proof may need to answer, "Can I trust this choice?" The action may finally need to answer, "What happens if I continue?"

Each answer can be important. They become competitors only when every answer behaves as if the visitor is asking for it now.

This is the difference between a rank and a sequence. A rank says one item is generally above another. A sequence says one item has the present turn, another prepares the next turn, and the rest stay legible without interrupting.

The distinction sounds small. It changes how a team evaluates every color, scale, position, label, and movement on the page.

Attention is negotiated, not commanded

Designers can influence attention. They cannot issue it an order.

Jeremy Wolfe's Guided Search 6.0 model describes a dynamic priority map. This is a changing representation of which visible locations are most likely to receive attention next. The map combines five sources of guidance: visual features, the observer's goal, selection history, reward, and the meaning and structure of the scene.

That last sentence is the reason a large button does not always win.

A bright cue may be physically distinctive. A familiar navigation item may be easier to find because people know where it usually lives. A small label may matter more because its words match the current goal. A previously useful location may receive attention again because experience has trained the search.

A 2024 consensus review makes the terminology precise: a salience map should refer to bottom-up visual distinctiveness, while a priority map includes the wider forces that guide attention (Liesefeld et al., 2024). Salience is one vote. It is not the whole election.

Task-based studies support this distinction. In an eye-tracking study of 47 people solving three analytical tasks across 30 charts, task instructions produced more consistent viewing patterns. Bottom-up salience had little influence on fixations or task efficiency for the tested work (Polatsek et al., 2018).

This does not mean visual emphasis is useless. It means emphasis should cooperate with the task. When a design makes a secondary promotion louder than the information a buyer is seeking, the design is not guiding attention. It is bidding against intent.

Capture, selection, and continuation are different jobs

The phrase "guide attention" hides three separate problems.

Capture asks what enters focused attention. Position, contrast, size, onset, and distinctiveness can help.

Selection asks whether the person can isolate the useful target from nearby alternatives. Grouping, discriminability, learned location, and the current task matter here.

Continuation asks whether the selected cue gives a credible reason to proceed. Language and expectation matter as much as visual force.

A design can succeed at one job and fail at the next two. A moving banner can capture attention, offer no relevant information, and leave the visitor with no useful path. A quiet comparison link can attract less attention at first yet produce better continuation because it names the result the visitor needs.

Research on web entry points exposes the first failure. Jeremiah Still tested a widely cited hierarchy model that leaned heavily on element size. Across controlled and conventional pages, the model predicted entry points poorly. Position, color, text treatment, and distinctiveness were better predictors of earlier engagement (Still, 2018).

Research on information foraging exposes the second. Peter Pirolli models web navigation through information scent: nearby cues are evaluated against the user's internal goal and the expected benefit of continuing (Pirolli, 2005). A cue does not guide merely because it is visible. It must smell like progress.

"Learn more" has weak scent. "Compare plan limits" has strong scent for a buyer who is choosing a plan. The second phrase can do more work with less visual volume.

Rebuild the artifact around successive decisions

Return to the pricing page with six first priorities. Do not begin by asking which department deserves the largest rectangle. Begin with the visitor's changing evidence needs.

At the top of the page, the visitor may need orientation: who the product serves and what problem it solves. At the plans, the visitor needs discrimination: how options differ in ways that affect use. Near proof, the visitor needs risk reduction: whether the company, product, and choice are credible. Near commitment, the visitor needs consequence: what the next action will do.

The page now has four local jobs, but it still does not need four simultaneous peaks.

The orientation region should own the first turn. Its final cue should prepare comparison. The comparison region should become dominant when the visitor reaches it, while the opening claim yields. Proof should sit close enough to the decision it supports. The action should grow prominent only after the preceding evidence has made it meaningful.

Page-state map

Each section owns one present-tense decision

Read one pricing page at three moments: the active region answers the current question, while a prepared region gives the next move information scent.

01Orient

Is this for a business like mine?

Prepare comparison

02Compare

Which option fits how I will use it?

Expose the remaining risk

03Resolve

Can I trust this choice and what happens next?

Name the consequence of action

CurrentPreparedReleased

This is a relay, not a podium.

In a podium model, every section competes for the top position. In a relay model, a section completes a local job and hands a prepared question to the next section. The important design unit is not an isolated block. It is the boundary between one decision and another.

Audit those boundaries directly:

• Does the end of the opening claim create a specific reason to inspect the plans?
• Does the plan comparison expose the uncertainty that proof should resolve?
• Does proof sit beside the claim it supports, or has it drifted into a generic logo wall?
• Does the final action name its consequence, or does it ask for commitment with "Get started" and a hopeful arrow?

The answers reveal why many polished pages still feel disjointed. Their sections are individually composed but mutually unaware.

Clutter is a cost, not a style

The relay model does not require every page to look sparse.

Display clutter is not a synonym for density, maximalism, or visual taste. Moacdieh and Sarter's review treats clutter as a multifaceted problem that matters when it imposes attentional or performance costs. Those costs can come from too much information, weak organization, difficult segmentation, or competition among features.

Rosenholtz, Li, and Nakano tested several ways to measure clutter in complex images. Feature congestion, subband entropy, and edge density captured different properties. Their work also found that color variability contributes to clutter. No single "cleanliness" score explained the whole problem.

The practical question is not, "Does this page have many things?" It is, "How much irrelevant work must a person do to isolate the useful thing?"

That cost appears early. Kanaan and Moacdieh asked participants to find words or images in 40 website screenshots. On high-clutter pages, attention spread across a larger area during the first three seconds of search (Kanaan & Moacdieh, 2021).

A dense transit map can be useful because its structure supports a defined search. A nearly empty landing page can be confusing because the only two cues are vague. Quiet is not clarity. Density is not guilt.

Familiar placement can outperform louder treatment

Teams often repair a weak cue by adding contrast. Sometimes the real defect is that the cue sits where nobody expects it.

Todi and colleagues built a system that reorganized graphical layouts using a person's visual history. In their evaluation, layouts based on visual statistical learning reduced visual-search time by more than 10 percent and gaze fixations by more than 20 percent (Todi et al., 2019). These figures belong to that system and study. They are not a promise for conventional websites. The useful principle is that expected location can reduce search cost without increasing visual intensity.

The UEyes dataset adds an important boundary. It contains gaze data from 62 participants across 1,980 web, desktop, mobile, and poster screenshots. Gaze biases and scan behavior differed by interface type (Jiang et al., 2023). A pattern that feels natural on a web page may not transfer to a dashboard or mobile interface.

This is why visual hierarchy needs a grammar, not a bag of tricks. Put common controls in credible places. Use grouping to reveal what belongs together. Use language to reveal what follows. Spend unusual placement only when the unusual location explains something important.

The designer's cleverness should not become another item the visitor must search through.

Motion can open one turn and steal the next

Motion is especially good at converting sequence back into competition.

Classic experiments found that an abrupt visual onset can give an item an attentional advantage (Yantis & Jonides, 1984). Later experiments separated continuous motion from motion onset. A moving item did not automatically win, but an item that had just started moving did (Abrams & Christ, 2003).

Timing therefore belongs to hierarchy.

If a hero illustration resolves, a chat bubble opens, a metric increments, and a carousel advances on separate timers, the page keeps declaring a new present. Every onset reopens the contest. The visitor cannot tell which event is part of the task and which event is merely alive.

Use motion to open a turn, explain a relationship, or confirm a state change. Then let it stop. A good entrance hands attention to the content. It does not keep asking for it back.

A pleasing first impression is not the final test

Clarity often feels good. That is useful, but it can mislead a review.

Reber, Schwarz, and Winkielman connect processing fluency with aesthetic pleasure: objects that are easier to process can produce a more positive response (Reber et al., 2004). Tuch and colleagues found that visual complexity and prototypicality affected website impressions after exposures as brief as 17 to 50 milliseconds (Tuch et al., 2012).

These findings explain why a familiar, coherent page can feel trustworthy before anyone has tested it. They do not prove that the page supports the decision.

A sparse page can be fluent and uninformative. A familiar layout can make a weak offer easy to scan. A beautiful hierarchy can guide attention smoothly toward the wrong conclusion.

The review must therefore move from preference to task evidence.

Give a participant a realistic question. Then observe:

• Orientation: Can the person explain what the screen is for without reading every line?
• Current selection: Can the person isolate the information needed for the present decision?
• Handoff: Can the person predict where to go next and what that move will provide?
• Recovery: After a wrong turn, can the person find a better route without restarting?
• Release: Does the previous section yield, or does it continue to dominate after its job is complete?

Measure the first useful action, not merely the first fixation. Record find time where it matters. Ask what the person expected before a click. Repeat the test at mobile width, with keyboard focus, at text zoom, and with reduced motion. The visual sequence and interaction sequence should tell the same story.

Some interfaces need several signals at once

The relay model has a boundary.

Monitoring, emergency, medical, industrial, and security interfaces may need several conditions to remain simultaneously visible. A critical alarm should not wait politely for the previous chart to finish its paragraph.

Even there, equal emphasis is not the answer. The interface needs classes of urgency, stable locations, clear state differences, and escalation rules. It must distinguish a persistent condition from a new event. It must also prevent every warning from becoming the visual equivalent of a fire alarm.

Research on search modes reinforces this point. Liesefeld and Muller argue that people may use priority guidance when a target is sufficiently salient and shift toward clump-wise scanning when it is not (Liesefeld & Muller, 2023). The design method must fit the kind of search.

For an editorial or commercial page, attention usually advances through a sequence of questions. For a control room, attention may cycle across a stable field and interrupt that cycle when conditions change. Both need hierarchy. They need different time structures.

The page should know what time it is

The deepest mistake in a competitive page is not excessive color or type. It is temporal confusion.

Every section acts as if its message is needed now. Every button asks for commitment now. Every animation begins now. The page becomes a collection of valid statements with no theory of when each statement becomes useful.

Fixing that problem requires a harder conversation than "make the important thing bigger." The team must decide what the visitor is trying to resolve, which evidence belongs to that moment, and what cue can carry the decision forward.

When that sequence is clear, hierarchy becomes less theatrical and more exact. Strong elements can be strong. Dense sections can be dense. Quiet regions can perform real work. The design no longer asks every section to win.

It gives each one a turn.

References

• Abrams, R. A., & Christ, S. E. (2003). Motion onset captures attention. Psychological Science, 14(5), 427-432. https://doi.org/10.1111/1467-9280.01458
• Jiang, Y., Leiva, L. A., Tavakoli, H. R., Houssel, P. R. B., Kylmala, J., & Oulasvirta, A. (2023). UEyes: Understanding visual saliency across user interface types. Proceedings of CHI 2023, Article 285. https://doi.org/10.1145/3544548.3581096
• Kanaan, M., & Moacdieh, N. M. (2021). How do we react to cluttered displays? Evidence from the first seconds of visual search in websites. Ergonomics, 64(11), 1452-1464. https://doi.org/10.1080/00140139.2021.1927200
• Liesefeld, H. R., & Muller, H. J. (2023). Target salience and search modes: A commentary on Theeuwes (2023). Journal of Cognition, 6(1), 38. https://doi.org/10.5334/joc.279
• Liesefeld, H. R., et al. (2024). Terms of debate: Consensus definitions to guide the scientific discourse on visual distraction. Attention, Perception, & Psychophysics, 86, 1445-1472. https://doi.org/10.3758/s13414-023-02820-3
• Moacdieh, N., & Sarter, N. (2015). Display clutter: A review of definitions and measurement techniques. Human Factors, 57(1), 61-100. https://doi.org/10.1177/0018720814541145
• Pirolli, P. (2005). Rational analyses of information foraging on the web. Cognitive Science, 29(3), 343-373. https://doi.org/10.1207/s15516709cog0000_20
• Polatsek, P., Waldner, M., Viola, I., Kapec, P., & Benesova, W. (2018). Exploring visual attention and saliency modeling for task-based visual analysis. Computers & Graphics, 72, 26-38. https://doi.org/10.1016/j.cag.2018.01.010
• Reber, R., Schwarz, N., & Winkielman, P. (2004). Processing fluency and aesthetic pleasure: Is beauty in the perceiver's processing experience? Personality and Social Psychology Review, 8(4), 364-382. https://doi.org/10.1207/S15327957PSPR0804_3
• Rosenholtz, R., Li, Y., & Nakano, L. (2007). Measuring visual clutter. Journal of Vision, 7(2), Article 17. https://doi.org/10.1167/7.2.17
• Still, J. D. (2018). Web page visual hierarchy: Examining Faraday's guidelines for entry points. Computers in Human Behavior, 84, 352-359. https://doi.org/10.1016/j.chb.2018.03.014
• Todi, K., Jokinen, J. P. P., Luyten, K., & Oulasvirta, A. (2019). Individualising graphical layouts with predictive visual search models. ACM Transactions on Interactive Intelligent Systems, 10(1), Article 9. https://doi.org/10.1145/3241381
• Tuch, A. N., Presslaber, E. E., Stocklin, M., Opwis, K., & Bargas-Avila, J. A. (2012). The role of visual complexity and prototypicality regarding first impression of websites. International Journal of Human-Computer Studies, 70(11), 794-811. https://doi.org/10.1016/j.ijhcs.2012.06.003
• Wolfe, J. M. (2021). Guided Search 6.0: An updated model of visual search. Psychonomic Bulletin & Review, 28(4), 1060-1092. https://doi.org/10.3758/s13423-020-01859-9
• Yantis, S., & Jonides, J. (1984). Abrupt visual onsets and selective attention: Evidence from visual search. Journal of Experimental Psychology: Human Perception and Performance, 10(5), 601-621. https://doi.org/10.1037/0096-1523.10.5.601