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.