# Visual Cues Cta Psychology

> Guide attention toward the next valuable action with CTA hierarchy, visual cues, and gaze patterns. Use when improving button placement, copy, contrast, page scanning, attention flow, or conversion areas; avoid for broad trust, proof selection, or behavior-change diagnosis.

- Skill: `flpbalada/visual-cues-cta-psychology` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add flpbalada/visual-cues-cta-psychology`
- Raw SKILL.md: https://api.skillmd.com/api/skills/flpbalada/visual-cues-cta-psychology/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: flpbalada (https://skillmd.com/u/flpbalada)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/flpbalada/visual-cues-cta-psychology

---


# Visual Cues and CTA Psychology

## Goal

Make the next valuable action easy to notice, understand, and take.

## Rules

- One primary CTA per decision area.
- Put CTA where user has enough context to act.
- Use contrast for priority, not decoration.
- Match CTA copy to user intent.
- Keep secondary actions visually quieter.
- Do not use visual cues to push unclear or risky actions.

## Attention Cues

- Position: above fold, end of section, or after proof.
- Contrast: color, size, weight, whitespace.
- Direction: gaze, arrows, layout flow.
- Repetition: repeated CTA after major persuasion points.
- Proximity: place reassurance near high-risk CTA.

## Reading Patterns

- F-pattern: text-heavy pages need clear left-edge anchors.
- Z-pattern: simple landing pages can guide from headline to proof to CTA.
- Layered scanning: headings, visuals, and CTAs should tell the story quickly.

## CTA Copy

- Use action plus outcome.
- Prefer specific verbs.
- Avoid vague labels like `Submit` when intent matters.
- Reduce perceived risk with context: trial, demo, preview, save.

## Flow

1. Identify primary user action.
2. Identify hesitation before action.
3. Check visual hierarchy.
4. Place proof or reassurance near CTA.
5. Rewrite CTA copy for action and outcome.
6. Reduce competing actions.
7. Define conversion metric.

## Progressive Disclosure

| Topic | File | When to Use |
|-------|------|-------------|
| Eye patterns & gaze | [context/gaze-patterns.md](context/gaze-patterns.md) | F-pattern, Z-pattern, thumb zones |
| Visual cue types | [context/visual-cue-types.md](context/visual-cue-types.md) | Arrows, gaze direction, encapsulation |
| CTA design | [context/cta-design.md](context/cta-design.md) | Button color, copy, placement |

## Resources

- [Don't Make Me Think - Steve Krug](https://sensible.com/)
- [Eye-Tracking Research - Nielsen Norman Group](https://www.nngroup.com/topic/eyetracking/)
- [Gestalt Principles in UI Design](https://lawsofux.com/)

## Output

```md
## CTA Review
- Primary action:
- Current cue:
- Friction:
- Recommended placement:
- Recommended copy:
- Supporting proof:
- Metric:
```