Understanding how to design effective call-to-action elements.
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
Implementation Checklist
## 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
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