My-opencode-config visual-cues-cta-psychology
Visual Cues & CTA Psychology - Guiding User Attention
install
source · Clone the upstream repo
git clone https://github.com/flpbalada/my-opencode-config
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/flpbalada/my-opencode-config "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/visual-cues-cta-psychology" ~/.claude/skills/flpbalada-my-opencode-config-visual-cues-cta-psychology && rm -rf "$T"
manifest:
skills/visual-cues-cta-psychology/SKILL.mdsource content
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
Human attention follows predictable patterns:
- Evolutionary triggers (faces, movement, eyes)
- Learned patterns (reading direction, F/Z)
- Design signals (size, color, contrast)
- Directional cues (arrows, gaze, lines)
Reading Pattern Quick Guide
| Pattern | Use For | CTA Placement |
|---|---|---|
| F-Pattern | Text-heavy content | First 2 paragraphs, subheadings |
| Z-Pattern | Visual/landing pages | Bottom-right (terminal area) |
| Gutenberg | General pages | Top-left (start), bottom-right (end) |
Progressive Disclosure
| Topic | File | When to Use |
|---|---|---|
| Eye patterns & gaze | context/gaze-patterns.md | F-pattern, Z-pattern, thumb zones |
| Visual cue types | context/visual-cue-types.md | Arrows, gaze direction, encapsulation |
| CTA design | context/cta-design.md | Button color, copy, placement |
CTA Quick Reference
Color Psychology
| Color | Effect | Best For |
|---|---|---|
| Red | Urgency, action | Limited time CTAs |
| Orange | Friendly, confident | Sign ups, trials |
| Green | Safety, growth | Positive actions |
| Blue | Trust, professional | B2B, financial |
| Purple | Premium, creative | Luxury products |
Copy Patterns
First Person (Outperforms): "Get My Free Guide", "Start My Trial" Action + Benefit: "Start Saving Today", "Get Instant Access" Risk Reduction: "Try Free for 14 Days", "No Credit Card Required"