181 lines
4.7 KiB
Markdown
181 lines
4.7 KiB
Markdown
# signup-flow-cro reference
|
|
|
|
## Core Principles
|
|
|
|
### 1. Minimize Required Fields
|
|
Every field reduces conversion. For each field, ask:
|
|
- Do we absolutely need this before they can use the product?
|
|
- Can we collect this later through progressive profiling?
|
|
- Can we infer this from other data?
|
|
|
|
**Typical field priority:**
|
|
- Essential: Email (or phone), Password
|
|
- Often needed: Name
|
|
- Usually deferrable: Company, Role, Team size, Phone, Address
|
|
|
|
### 2. Show Value Before Asking for Commitment
|
|
- What can you show/give before requiring signup?
|
|
- Can they experience the product before creating an account?
|
|
- Reverse the order: value first, signup second
|
|
|
|
### 3. Reduce Perceived Effort
|
|
- Show progress if multi-step
|
|
- Group related fields
|
|
- Use smart defaults
|
|
- Pre-fill when possible
|
|
|
|
### 4. Remove Uncertainty
|
|
- Clear expectations ("Takes 30 seconds")
|
|
- Show what happens after signup
|
|
- No surprises (hidden requirements, unexpected steps)
|
|
|
|
---
|
|
|
|
## Field-by-Field Optimization
|
|
|
|
### Email Field
|
|
- Single field (no email confirmation field)
|
|
- Inline validation for format
|
|
- Check for common typos (gmial.com → gmail.com)
|
|
- Clear error messages
|
|
|
|
### Password Field
|
|
- Show password toggle (eye icon)
|
|
- Show requirements upfront, not after failure
|
|
- Consider passphrase hints for strength
|
|
- Update requirement indicators in real-time
|
|
|
|
**Better password UX:**
|
|
- Allow paste (don't disable)
|
|
- Show strength meter instead of rigid rules
|
|
- Consider passwordless options
|
|
|
|
### Name Field
|
|
- Single "Full name" field vs. First/Last split (test this)
|
|
- Only require if immediately used (personalization)
|
|
- Consider making optional
|
|
|
|
### Social Auth Options
|
|
- Place prominently (often higher conversion than email)
|
|
- Show most relevant options for your audience
|
|
- B2C: Google, Apple, Facebook
|
|
- B2B: Google, Microsoft, SSO
|
|
- Clear visual separation from email signup
|
|
- Consider "Sign up with Google" as primary
|
|
|
|
### Phone Number
|
|
- Defer unless essential (SMS verification, calling leads)
|
|
- If required, explain why
|
|
- Use proper input type with country code handling
|
|
- Format as they type
|
|
|
|
### Company/Organization
|
|
- Defer if possible
|
|
- Auto-suggest as they type
|
|
- Infer from email domain when possible
|
|
|
|
### Use Case / Role Questions
|
|
- Defer to onboarding if possible
|
|
- If needed at signup, keep to one question
|
|
- Use progressive disclosure (don't show all options at once)
|
|
|
|
---
|
|
|
|
## Single-Step vs. Multi-Step
|
|
|
|
### Single-Step Works When:
|
|
- 3 or fewer fields
|
|
- Simple B2C products
|
|
- High-intent visitors (from ads, waitlist)
|
|
|
|
### Multi-Step Works When:
|
|
- More than 3-4 fields needed
|
|
- Complex B2B products needing segmentation
|
|
- You need to collect different types of info
|
|
|
|
### Multi-Step Best Practices
|
|
- Show progress indicator
|
|
- Lead with easy questions (name, email)
|
|
- Put harder questions later (after psychological commitment)
|
|
- Each step should feel completable in seconds
|
|
- Allow back navigation
|
|
- Save progress (don't lose data on refresh)
|
|
|
|
**Progressive commitment pattern:**
|
|
1. Email only (lowest barrier)
|
|
2. Password + name
|
|
3. Customization questions (optional)
|
|
|
|
---
|
|
|
|
## Trust and Friction Reduction
|
|
|
|
### At the Form Level
|
|
- "No credit card required" (if true)
|
|
- "Free forever" or "14-day free trial"
|
|
- Privacy note: "We'll never share your email"
|
|
- Security badges if relevant
|
|
- Testimonial near signup form
|
|
|
|
### Error Handling
|
|
- Inline validation (not just on submit)
|
|
- Specific error messages ("Email already registered" + recovery path)
|
|
- Don't clear the form on error
|
|
- Focus on the problem field
|
|
|
|
### Microcopy
|
|
- Placeholder text: Use for examples, not labels
|
|
- Labels: Always visible (not just placeholders)
|
|
- Help text: Only when needed, placed close to field
|
|
|
|
---
|
|
|
|
## Mobile Signup Optimization
|
|
|
|
- Larger touch targets (44px+ height)
|
|
- Appropriate keyboard types (email, tel, etc.)
|
|
- Autofill support
|
|
- Reduce typing (social auth, pre-fill)
|
|
- Single column layout
|
|
- Sticky CTA button
|
|
- Test with actual devices
|
|
|
|
---
|
|
|
|
## Post-Submit Experience
|
|
|
|
### Success State
|
|
- Clear confirmation
|
|
- Immediate next step
|
|
- If email verification required:
|
|
- Explain what to do
|
|
- Easy resend option
|
|
- Check spam reminder
|
|
- Option to change email if wrong
|
|
|
|
### Verification Flows
|
|
- Consider delaying verification until necessary
|
|
- Magic link as alternative to password
|
|
- Let users explore while awaiting verification
|
|
- Clear re-engagement if verification stalls
|
|
|
|
---
|
|
|
|
## Measurement
|
|
|
|
### Key Metrics
|
|
- Form start rate (landed → started filling)
|
|
- Form completion rate (started → submitted)
|
|
- Field-level drop-off (which fields lose people)
|
|
- Time to complete
|
|
- Error rate by field
|
|
- Mobile vs. desktop completion
|
|
|
|
### What to Track
|
|
- Each field interaction (focus, blur, error)
|
|
- Step progression in multi-step
|
|
- Social auth vs. email signup ratio
|
|
- Time between steps
|
|
|
|
---
|