UX & Conversion Optimization

Build interfaces that convert. This skill covers UX patterns for desktop/mobile, conversion optimization, and user psychology.

Core Philosophy

1. Every element earns its place - Remove visual noise; minimize cognitive load
2. Reduce friction ruthlessly - Every click/field is a potential drop-off
3. Mobile-first always - 60%+ traffic is mobile; design smallest viewport first
4. Data beats assumptions - A/B test everything; use heatmaps and session recordings
5. Speed is UX - 1 second improvement = 7% conversion boost

Quick Reference

High-Impact Quick Wins

1. Reduce form fields to essentials only (42% lift from 15→5 fields)
2. Use inline validation with helpful error messages (22% success rate increase)
3. Make CTAs specific with first-person copy ("Get my report" > "Submit")
4. Add progress indicators to multi-step flows
5. Place trust signals near CTAs and checkout
6. 44px+ touch targets on mobile with adequate spacing
7. Offer guest checkout prominently (62% of sites fail this)
8. Get users to value within 60 seconds of signup
9. White space around CTAs can boost conversions 232%
10. Personalized CTAs convert 42% better than generic

Decision Framework

When designing forms:

• Single column layout (always on mobile)
• Labels above fields (not placeholder-as-label)
• Smart defaults and autofill where possible
• Validate on blur, not on submit
• Mark optional fields, not required
• Group related fields logically

When designing CTAs:

• High contrast against background
• Action verb + benefit: "Start my free trial"
• Large enough to tap (min 44px height)
• Isolated with generous padding/white space
• Repeat at end of long content

When designing for mobile:

• Start at 320px, enhance upward
• Primary actions in bottom 1/3 (thumb zone)
• Reduce input: autofill, smart defaults, minimize typing
• Touch targets 44x44px minimum with spacing
• Compress images, lazy-load below fold

When building signup/onboarding:

• Collect only essential info at signup (name, email, password)
• Use progress indicators ("Step 2 of 3")
• Get user to first "win" ASAP
• Personalize flow based on user type/goal (2-5 options)
• Provide skip option for experienced users
• Celebrate milestones to build momentum

When adding trust signals:

• Security badges near payment/checkout
• Testimonials with real names, photos, specific results
• Social proof numbers ("10,000+ customers")
• Guarantees near CTAs to reduce hesitation
• Client logos for B2B credibility

Anti-Patterns to Avoid

• Placeholder text as the only label (accessibility fail)
• Requiring account creation before showing value
• Credit card upfront for free trials
• Desktop-only optimization
• Generic CTAs ("Submit", "Click here")
• Validating only on form submit
• Hiding guest checkout option
• Tutorial overload on first visit
• Jargon and clever-but-unclear copy

Responsive Breakpoints

/* Mobile-first base styles */
.container { padding: 1rem; }

/* Tablet and up */
@media (min-width: 48em) {
  .container { padding: 2rem; max-width: 75rem; }
}

/* Desktop */
@media (min-width: 64em) {
  .container { /* desktop enhancements */ }
}

Break when content breaks, not at arbitrary device widths.

Metrics That Matter

For detailed patterns and examples, see the reference files in this skill.