ominou5 Conversion UX Patterns
Apply these patterns to every funnel page. These are not suggestions — they are requirements for high-converting funnels.
Above the Fold (First Viewport)
Every page must have these 3 elements visible without scrolling:
- Headline — Clear, benefit-driven, addresses the #1 pain point
- Sub-headline — Expands on the headline, introduces the solution
- Primary CTA — Visible, high-contrast button with action-oriented text
<!-- Pattern: Hero Section -->
<section class="hero">
<h1>Headline: Desired Outcome</h1>
<p class="subtitle">Sub-headline: How you'll get there</p>
<a href="#action" class="cta-primary">Action-Oriented CTA Text →</a>
</section>
CTA Button Rules
| Rule | Good ✅ | Bad ❌ |
|---|---|---|
| Action-oriented | "Get My Free Guide" | "Submit" |
| First-person | "Start My Trial" | "Start Your Trial" |
| Benefit-focused | "Unlock 50% More Sales" | "Click Here" |
| Urgency | "Claim My Spot (Only 12 Left)" | "Register" |
| Specificity | "Download the 7-Step Checklist" | "Download" |
CTA Placement
- Always above the fold
- Repeat after every major value block (every 2–3 scroll lengths)
- Sticky CTA bar on mobile (bottom of viewport)
- Final CTA with full benefit stack at page bottom
Social Proof Patterns
Testimonial Card
<div class="testimonial">
<img src="avatar.jpg" alt="Customer Name" class="testimonial-avatar">
<blockquote>
<p>"Specific result they achieved with your product."</p>
<cite>
<strong>Full Name</strong>
<span>Title, Company</span>
</cite>
</blockquote>
</div>
Trust Bar
<div class="trust-bar">
<span>As featured in:</span>
<img src="logo1.svg" alt="Publication 1">
<img src="logo2.svg" alt="Publication 2">
<img src="logo3.svg" alt="Publication 3">
</div>
Stats Row
<div class="stats-row">
<div class="stat"><strong>10,000+</strong><span>Customers Served</span></div>
<div class="stat"><strong>4.9/5</strong><span>Average Rating</span></div>
<div class="stat"><strong>30-Day</strong><span>Money-Back Guarantee</span></div>
</div>
Urgency Patterns (Use Authentically)
- Countdown timer — Only for real deadlines (course enrollment, live event)
- Limited spots — Only if genuinely limited ("12 of 50 spots remaining")
- Price increase — Only if price is actually changing
- Seasonal — "Enroll before [date] to join the spring cohort"
Friction Reduction
Form Optimization
- Minimize fields — Only ask for what you need at this stage
- Opt-in: Email only (name optional)
- Purchase: Email, name, payment
- Application: More fields acceptable
- Single-column layout — Never side-by-side fields on forms
- Progress indicator — For multi-step forms
- Inline validation — Show errors in real-time, not on submit
Navigation
- Remove top nav on landing pages — No escape routes
- Single CTA — One primary action per page (secondary allowed in footer)
- Exit intent — Optional popup when cursor moves to close tab
Visual Hierarchy
- Headline (largest text, bold)
- Sub-headline (medium text)
- CTA button (high contrast, standout color)
- Body copy (readable, 16px+ on desktop, 18px+ on mobile)
- Supporting text (smaller, lighter — fine print, disclaimers)
Mobile UX Requirements
- Touch targets: minimum 44x44px
- CTA button: full width on mobile
- Font size: minimum 16px (prevents iOS zoom on input focus)
- Spacing: generous padding between tap targets
- Sticky CTA: fixed bottom bar on scroll