visual-cues-cta-psychology

Design call-to-action elements using visual attention and gaze psychology principles.

Updated Apr 29, 2026
One-click install
npx skills add https://github.com/dev-khoi/AURA-conHack-2026 --skill visual-cues-cta-psychology-dev-khoi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-cues-cta-psychology
Source: https://github.com/dev-khoi/AURA-conHack-2026/tree/main/.opencode/skills/visual-cues-cta-psychology
Command: npx skills add https://github.com/dev-khoi/AURA-conHack-2026 --skill visual-cues-cta-psychology-dev-khoi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designers and marketers often place CTAs where users never look, use colors that send the wrong psychological signal, or write button copy that fails to convert. This Skill provides research-backed guidance on eye movement patterns, visual cue types, and CTA design so conversion elements align with how human attention actually works. ## Core Features & Use Cases - Reading Pattern Guidance: Apply F-pattern, Z-pattern, and Gutenberg diagram principles to position CTAs in high-attention areas like the terminal zone. - Visual Cue Techniques: Use directional cues such as arrows, human gaze direction, encapsulation, and visual hierarchy to guide users toward conversion elements. - CTA Design Reference: Choose psychologically appropriate button colors, first-person action-oriented copy, and correct sizing for desktop and mobile thumb zones. - Use Case: When redesigning a landing page with low sign-up rates, use this Skill to audit gaze direction in hero images, reposition the primary CTA to the Z-pattern terminal area, and rewrite button copy using risk-reduction patterns like "Try Free for 14 Days". ## Quick Start Use the visual-cues-cta-psychology skill to audit my landing page layout and recommend CTA placement, color, and copy improvements.

Frequently Asked Questions about visual-cues-cta-psychology

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a CTA button that converts?▼

Combine three elements: a psychologically appropriate color (orange for sign-ups, blue for trust-based actions), first-person action copy like "Start My Trial", and placement in the terminal area of the Z-pattern. Add risk-reduction text such as "No Credit Card Required" near the button.

Where should I place a CTA on a landing page?▼

Place the primary CTA in the bottom-right terminal area for Z-pattern layouts, since eyes naturally end there. On text-heavy pages following the F-pattern, front-load CTAs in the first two paragraphs and subheadings rather than the right column.

Does human gaze direction in photos affect conversions?▼

Yes. Users automatically follow where photographed people are looking, even when the face points elsewhere. Use photos where the subject's eyes point toward your CTA, and avoid stock photos with random or off-page gaze direction.

What CTA button color should I use?▼

Match color to psychological intent: red for urgency and limited-time offers, orange for friendly sign-ups, green for positive actions, blue for B2B and financial trust, and purple for premium products. Contrast with the surrounding page matters more than the specific hue.

How do I design CTAs for mobile thumb zones?▼

Place primary CTAs in the bottom-center easy-reach zone with a minimum 48x48px touch target. Avoid top corners which are hardest to reach, and consider sticky bottom CTAs for long scrolling pages.

What are common visual cue mistakes on landing pages?▼

Common mistakes include conflicting directional signals, two buttons with equal visual weight, people in photos looking away from the CTA, and overusing cues until they become noise. Each page should have one clear primary action with supporting cues aligned toward it.