Back to skills

skills/visual-cues-cta-psychology/SKILL.md

visual-cues-cta-psychology

- Designing CTA hierarchy.

npx skills add https://github.com/flpbalada/fb-skills --skill visual-cues-cta-psychology
GitHub

Skill Docs

When to use

  • Designing CTA hierarchy.
  • Improving landing page conversion flow.
  • Guiding attention through an interface.
  • Auditing button placement, labels, or visual emphasis.

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.

Output

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