home / skills / flpbalada / my-opencode-config / visual-cues-cta-psychology
This skill helps you design landing pages and CTAs using gaze cues and visual hierarchy to boost conversions and user engagement.
npx playbooks add skill flpbalada/my-opencode-config --skill visual-cues-cta-psychologyReview the files below or copy the command above to add this skill to your agents.
---
name: visual-cues-cta-psychology
description:
Design effective CTAs using visual attention and gaze psychology principles.
Use when designing landing pages, button hierarchies, conversion elements, or
optimizing user attention flow through interfaces.
---
# Visual Cues & CTA Psychology - Guiding User Attention
Visual cues leverage human attention and perception to guide user behavior and
direct focus toward specific elements. Understanding how the visual system
processes information enables designers to create more effective call-to-action
experiences.
## When to Use This Skill
- Designing landing pages and conversion funnels
- Creating button hierarchies and CTA elements
- Optimizing user attention flow
- Improving click-through rates
- Designing hero sections and key content
- Planning information architecture visually
## Core Principle
```
VISUAL ATTENTION IS PREDICTABLE
Human attention follows:
┌─────────────────────────────────────────────────────┐
│ 1. Evolutionary triggers (faces, movement, eyes) │
│ 2. Learned patterns (reading direction, F/Z) │
│ 3. Design signals (size, color, contrast) │
│ 4. Directional cues (arrows, gaze, lines) │
└─────────────────────────────────────────────────────┘
By understanding these patterns, we can CREATE
a visual conversation that guides users naturally
toward desired actions.
```
## Gaze Cueing Psychology
### Eye-Superiority Effect
```
Research Finding:
People automatically follow where others are looking,
even when face and eyes point in different directions.
┌─────────────────────────────────────────┐
│ │
│ [Person Photo] ───eyes────► [CTA] │
│ │ │
│ │ │
│ face pointing │
│ at camera │
│ │
│ Users follow EYE direction, │
│ not face direction │
└─────────────────────────────────────────┘
Why: Evolutionary survival mechanism -
detecting what others are attending to
```
### Application
```
GAZE DIRECTION BEST PRACTICES
✓ Use photos where person looks toward CTA
✓ Illustrated characters with directed gaze work too
✓ Video thumbnails with gaze toward key content
✓ Eye contact builds trust, then gaze directs action
❌ Avoid: People looking away from conversion elements
❌ Avoid: Generic stock photos with random gaze
❌ Avoid: Photos where subject looks off-page
```
## Eye Movement Patterns
### F-Pattern (Text-Heavy Content)
```
Reading pattern for content-heavy pages:
┌────────────────────────────────────────┐
│ ████████████████████████████ ←1st scan│
│ █████████████████████ │
│ ████████████ ←2nd scan│
│ ████████ │
│ █ │
│ █ ↑ │
│ █ │ │
│ █ vertical │
│ █ scan │
└────────────────────────────────────────┘
Implications:
├── Put key content in first two paragraphs
├── Front-load important words in sentences
├── Use subheadings to catch vertical scan
└── Don't bury CTAs in right column
```
### Z-Pattern (Visual/Minimal Content)
```
Reading pattern for landing pages:
┌────────────────────────────────────────┐
│ 1 ─────────────────────────────────► 2 │
│ ╱ │
│ ╱ │
│ ╱ │
│ ╱ │
│ ╱ │
│ 3 ─────────────────────────────────► 4 │
└────────────────────────────────────────┘
1: Logo/brand (start)
2: Navigation/search
3: Secondary content
4: CTA (natural end point - optimal placement!)
```
### Gutenberg Diagram
```
Attention Distribution:
┌────────────────────────────────────────┐
│ │ │
│ PRIMARY OPTICAL │ STRONG FALLOW │
│ AREA │ AREA │
│ (high attention) │ (medium) │
│ │ │
├────────────────────┼───────────────────┤
│ │ │
│ WEAK FALLOW │ TERMINAL AREA │
│ AREA │ (high attention) │
│ (low attention) │ │
│ │ │
└────────────────────────────────────────┘
Primary Optical (top-left): Where eyes start
Terminal Area (bottom-right): Natural resting point
→ Place CTA in Terminal Area for maximum impact
```
## Types of Visual Cues
### 1. Explicit Directional Cues
```
ARROWS AND POINTING ELEMENTS
Types:
├── Hand-drawn arrows (personal, friendly)
├── Geometric arrows (professional, clear)
├── Pointing fingers (direct human connection)
├── Chevrons and indicators
└── Animated directional elements
Effectiveness: High - direct and unmistakable
Caution: Can feel heavy-handed if overused
```
### 2. Human Gaze Direction
```
GAZE AS DIRECTIONAL CUE
┌─────────────────────────────────────────┐
│ │
│ [Testimonial Quote] │
│ │
│ [Photo looking →] ────► [CTA] │
│ │
└─────────────────────────────────────────┘
Guidelines:
├── Real people perform better than stock photos
├── Eye direction more powerful than body direction
├── Combine gaze with pointing gestures for emphasis
└── Video with gaze toward elements is highly effective
```
### 3. Implicit Visual Hierarchy
```
ATTENTION THROUGH DESIGN
Size:
├── Larger = More important
├── CTA buttons should be prominent
└── Visual weight guides priority
Color & Contrast:
├── High contrast attracts first
├── Color psychology affects emotion
├── Consistency creates predictable patterns
Whitespace:
├── Isolated elements feel important
├── Crowded elements compete for attention
├── Clean space reduces cognitive load
Typography:
├── Larger text = Higher priority
├── Bold weights create emphasis
├── Headlines interrupt scanning
```
### 4. Encapsulation
```
VISUAL CONTAINERS
Research: Encapsulation increased registrations 8%+
┌────────────────────────────────────────┐
│ │
│ ┌──────────────────────────────┐ │
│ │ │ │
│ │ [Registration Form] │ │
│ │ │ │
│ │ [Name field] │ │
│ │ [Email field] │ │
│ │ [Submit Button] │ │
│ │ │ │
│ └──────────────────────────────┘ │
│ │
└────────────────────────────────────────┘
Methods:
├── Border containers
├── Background color differentiation
├── Drop shadows for depth
└── Cards and panels
```
## CTA Button Psychology
### Color Impact
| Color | Psychological Effect | Best For |
| ------ | --------------------------- | ---------------------------- |
| Red | Urgency, excitement, action | Limited time, important CTAs |
| Orange | Friendly, confident, action | Sign ups, free trials |
| Green | Safety, "go", growth | Positive actions, eco |
| Blue | Trust, calm, professional | B2B, financial, trust-based |
| Purple | Premium, creative | Luxury, creative products |
### Copy Patterns
```
CTA COPY THAT CONVERTS
First Person (Outperforms):
├── "Get My Free Guide"
├── "Start My Trial"
├── "Show Me How"
└── "Create My Account"
Action + Benefit:
├── "Start Saving Today"
├── "Get Instant Access"
├── "Download Free Template"
└── "See Plans & Pricing"
Risk Reduction:
├── "Try Free for 14 Days"
├── "No Credit Card Required"
├── "Cancel Anytime"
└── "See It In Action"
```
### Size and Placement
```
CTA SIZING GUIDELINES
Desktop:
├── Primary CTA: Prominent, can't miss
├── Secondary CTA: Smaller, lower contrast
├── Minimum touch target: 44x44px
└── Padding: Generous whitespace around
Mobile:
├── Minimum: 48x48px touch target
├── Thumb zone: Bottom center optimal
├── Avoid: Top corners (hard to reach)
├── Consider: Sticky bottom CTAs
```
## Progressive Visual Flow
```
VISUAL STORYTELLING SEQUENCE
1. ATTENTION CAPTURE
│ Hero image or bold headline
│ High contrast, large element
│
▼
2. INTEREST BUILDING
│ Visual hierarchy through content
│ Subheadings guide scanning
│
▼
3. DESIRE CREATION
│ Social proof, benefits visualization
│ Testimonials with gaze toward CTA
│
▼
4. ACTION DIRECTION
Clear visual path to CTA
Multiple cues pointing to action
```
## Mobile Visual Considerations
### Thumb Zone Design
```
MOBILE REACH ZONES
┌────────────────────────────────┐
│ ⚠️ HARD TO REACH │
│ │
├────────────────────────────────┤
│ │
│ ⚡ NATURAL REACH │
│ │
├────────────────────────────────┤
│ ✓ EASY / OPTIMAL │
│ [Primary CTA Here] │
└────────────────────────────────┘
Thumb movement from bottom-center:
├── Bottom center: Easiest
├── Bottom corners: Medium
├── Top: Requires stretch
└── Top corners: Hardest
```
### Mobile-Specific Cues
- Simplified hierarchy (single primary CTA)
- Gesture-friendly (swipe indicators)
- Reduced visual noise
- Larger touch targets
- Sticky CTAs for long pages
## Implementation Checklist
```markdown
## Visual Cue Audit
**Page:** [Name] **Date:** [Date]
### Reading Pattern Alignment
- [ ] Key content in primary optical areas
- [ ] CTA in terminal area (Z-pattern)
- [ ] F-pattern accommodated for text
- [ ] Mobile thumb zones considered
### Directional Cues
- [ ] Human gaze directed toward CTA
- [ ] Arrows/pointers used appropriately
- [ ] No conflicting directional signals
- [ ] Line of action leads to conversion
### Visual Hierarchy
- [ ] Clear primary CTA (size, color, contrast)
- [ ] Secondary options visually subordinate
- [ ] Whitespace isolates important elements
- [ ] Typography hierarchy guides scanning
### CTA Design
- [ ] Button color psychologically appropriate
- [ ] Copy is action-oriented and benefit-focused
- [ ] Size appropriate for device
- [ ] Risk-reducing text near CTA
### Common Mistakes Check
- [ ] No competing elements at same visual level
- [ ] Gaze not pointing away from CTA
- [ ] Not over-cluttered with cues
- [ ] Mobile experience tested
```
## Common Mistakes
```
VISUAL CUE ANTI-PATTERNS
Conflicting Signals:
❌ Multiple arrows pointing different directions
❌ Two buttons with equal visual weight
❌ Person looking away from key content
Overuse:
❌ Too many visual cues (noise, not signal)
❌ Everything fighting for attention
❌ Excessive animation
Cultural Misalignment:
❌ Assuming left-to-right reading globally
❌ Color meanings vary by culture
❌ Gesture interpretations differ
Stock Photo Mistakes:
❌ Generic people with random gaze
❌ Posed photos that feel fake
❌ Subject looking off-page
```
## Integration with Other Methods
| Method | Combined Use |
| -------------------------- | ------------------------------------------- |
| **Cognitive Load** | Visual cues reduce decision effort |
| **Hick's Law** | Clear hierarchy reduces choice paralysis |
| **Trust Psychology** | Gaze toward trust signals builds confidence |
| **Progressive Disclosure** | Visual flow reveals info gradually |
| **Social Proof** | Direct attention to testimonials |
## Quick Reference
```
VISUAL CUE PRIORITY
High Impact:
□ Human gaze toward CTA
□ High contrast primary button
□ Encapsulated conversion areas
□ Clean whitespace around CTA
Medium Impact:
□ Explicit arrows/pointers
□ Color psychology application
□ Size hierarchy
□ Reading pattern alignment
Supporting:
□ Animation for attention
□ Typography weight
□ Background differentiation
□ Line and shape flow
```
## Resources
- [Don't Make Me Think - Steve Krug](https://sensible.com/)
- [Eye-Tracking Research - Nielsen Norman Group](https://www.nngroup.com/topic/eyetracking/)
- [ConversionXL - Visual Attention](https://cxl.com/)
- [Gestalt Principles in UI Design](https://lawsofux.com/)
This skill helps designers create high-converting CTAs by applying visual attention, gaze cueing, and layout psychology. It provides practical rules for placement, size, color, and directional cues so interfaces naturally guide users toward desired actions. Use it to audit pages, craft buttons, and structure visual flow for both desktop and mobile.
It inspects page composition against predictable attention patterns (F-pattern, Z-pattern, Gutenberg) and evaluates directional signals like human gaze, arrows, and encapsulation. The skill evaluates CTA prominence (size, contrast, color), copy framing (first-person, action+benefit, risk reduction), and mobile reach zones to recommend concrete design changes. Outputs are prioritized, actionable fixes to increase clarity and click-throughs.
Does human gaze always outperform arrows?
Human gaze is highly effective because people instinctively follow eyes, but combining gaze with subtle arrows or lines often increases clarity—avoid layering conflicting cues.
How do I choose CTA color?
Pick a color that contrasts with the background and matches the psychological goal: red/orange for urgency/action, green for positive ‘go’ actions, blue for trust-focused contexts.