Directional Cues
Directional cues are visual signals, such as arrows, lines, gestures, or a person's gaze, that subtly point a visitor's attention toward a specific element like a call-to-action or form.
Key takeaways
- Gaze following is near-reflexive and shifts attention before deliberate reading begins.
- Cue strength ranks motion first, then human gaze, arrows, then implied lines.
- A cue must terminate on something that rewards the look it earned.
- Cues redistribute attention within a view; they cannot manufacture interest.
- Motion cues must honour a viewer's stated reduced-motion preference.
In depth
Gaze following is close to reflexive. When a face in an image looks in a direction, an observer's attention shifts along the same vector within a fraction of a second, ahead of any deliberate reading. Arrows and leading lines exploit a related habit of completing implied trajectories, and motion exploits peripheral vision, which is tuned to register change rather than detail. That ordering explains a lot of practical behaviour: a small animation beside a button outperforms a static arrow pointing at it, and also becomes irritating considerably faster.
A cue is only as useful as the thing it terminates on. Attention redirected onto an unlabelled field, or onto a button whose wording does not match the promise that earned the click, is attention transferred and then lost. Strength varies by type, roughly motion first, human gaze next, explicit arrows after that, implied lines weakest, and the same ordering predicts how badly conflicts hurt. Two competing animations cancel far more destructively than two competing diagonals. Cues also only redistribute attention within a view; none of them manufacture interest.
Cues are placed after hierarchy is settled rather than instead of it, and they work across short distances. The useful positions are the few points where the eye genuinely has to travel. In a scorecard funnel that means the gap from headline to start control, the gap from the final answer option to the advance control on a long question, and on the result screen the gap from the score to the single next step. Arrows added anywhere else stop functioning as instruction and start reading as decoration.
Cues cannot repair an unclear page. If a visitor has not worked out what is on offer, an arrow only tells them where to look at something they do not yet understand. They also carry obligations. A motion cue must respect a stated preference for reduced motion, and an arrow that carries the only instruction on the page conveys nothing to someone using a screen reader. Positional assumptions invert in right-to-left layouts, and a gaze that pointed at a button on desktop can point at empty margin once columns stack.
Example in practice
How to measure it
A controlled test is the honest method, because the effect of a single cue is small and easily swamped by anything else that changed. Measure the share of interactions landing on the target element rather than overall conversion alone, since the mechanism is redistribution. Watch what lost share at the same time. A cue that moved clicks from a secondary link you wanted clicked has not improved the page, only rearranged it.
Where traffic is too thin to test, use a first-click study on a static screenshot: show the page briefly and ask where the participant would click first. Repeat with the cue removed. The difference in first-click location is the cue's effect isolated from everything else. Follow up with attention maps on live traffic to confirm the pattern holds when the page is scrolling and interactive.
Common mistakes
The frequent misuse is deploying cues to rescue a weak hierarchy. When the button is small, low in contrast and surrounded by competing elements, adding an arrow makes a busy page busier while the underlying problem survives untouched. Fix the ranking first. A cue applied to an element that is already dominant works as a nudge across a gap; the same cue applied to a hidden element is a dressing over an injury nobody treated.
The second is letting cues survive a responsive breakpoint unchanged. A hero photograph whose subject looks toward the call to action on a wide screen points into empty margin once the columns stack, and a diagonal that led the eye downward now crosses nothing in particular. Open every breakpoint and check where each cue actually terminates. Mirror it, move it or delete it, because a cue aimed at nothing is worse than no cue at all.
Frequently asked questions
What is the difference between explicit and implicit cues?
Explicit cues are obvious pointers like arrows or pointing hands, while implicit cues are subtle signals such as a person's gaze or a leading line. Both guide attention, but implicit cues feel more natural and less salesy.
Do gaze cues really change behavior?
Yes. People instinctively follow where a face is looking, so pointing a subject's eyes toward your CTA can shift attention to it. Many A/B tests show measurable lifts from gaze-directed hero images.
Do arrows really work on landing pages?
They work when the target is already visible and the arrow closes a short gap, and they do nothing when the target is buried. An arrow is an instruction about where to look, not an argument for looking. If the element it points at is small, low contrast or crowded, fix those first and then decide whether an arrow is still needed.
Which direction should a person in a hero image look?
Toward the primary action, or toward the headline that leads to it. A subject facing straight at the camera holds attention on the face, which is useful for building trust but stops the eye travelling onward. Facing the button borrows that attention and passes it along. Check the effect at every breakpoint, since stacking often moves the button out of the gaze line.
Are animated cues better than static ones?
Stronger, not automatically better. Peripheral vision detects change, so motion wins attention faster than any static pointer, but it also holds attention involuntarily and becomes irritating within seconds. Use it once per screen at most, keep it subtle, stop it after a cycle or two, and disable it entirely for visitors who have requested reduced motion at the system level.
How many directional cues should a page have?
One per genuine gap the eye has to cross, which on most landing pages means one or two. Beyond that they compete with each other and with the hierarchy itself, and the visitor learns to filter them out as decoration. If a page seems to need four, the more likely diagnosis is that the layout is not guiding anyone and the cues are compensating.
Do directional cues work on mobile?
Less often, because the viewport shows so little at once that there is rarely a long gap to bridge. Vertical order and spacing do most of the guiding instead. The cues that still earn their place on a phone are the ones signalling that content continues below the fold, since the visitor otherwise has no way to know whether scrolling is worthwhile.
Do directional cues cause accessibility problems?
They can. Motion should be suppressed when a visitor has asked their system for reduced motion, and any instruction carried only by an arrow or a gaze is unavailable to someone using a screen reader. Keep the instruction in the button text itself, so the visual cue accelerates a message that already exists rather than being the only place the message appears.