UX/UI design pattern doporučení

# UX Solution: One-Page Express Checkout

## 1. Problem Statement
**Current State:** 4-step checkout process (Cart → Shipping → Payment → Review)
- Average completion time: 4min 23sec
- 68% abandonment rate (industry avg: 45%)
- Drop-off points: 32% at shipping form, 24% at payment entry

**User Pain Points:**
- "I just want to buy it quickly, not fill out an application"
- "I wasn't sure if shipping was included in the price"
- "I had to go back twice to check product details"

**Business Impact:** Lost revenue $127k/month (estimated based on traffic)

## 2. User Research Insights
**Behavioral Patterns:**
- 73% of mobile purchases happen during "micro-moments" (commute, lunch break, couch browsing)
- Users on mobile unlikely to tolerate > 2 minutes checkout
- Return customers annoyed by repeating information

**Mental Model:**
"Amazon One-Click" is reference standard - anything slower feels archaic

**Accessibility:**
- 18% use autofill (iOS Safari, Chrome)
- Form switching causes keyboard flicker (frustration point)

## 3. Design Pattern Selection

**Recommended:** Single-Page Accordion Checkout (Accordion Wizard)

**Why This Pattern:**
✅ Reduces perceived effort (everything visible at once)
✅ Allows back-and-forth without page reload
✅ Shows progress without multi-step indicator
✅ Mobile-optimized (vertical scroll, large tap targets)

**Rejected Alternatives:**
❌ **Multi-step wizard:** Creates commitment anxiety, higher drop-off
❌ **Full single-page form:** Overwhelming, no sense of progress
❌ **Overlay modal:** Limited space, feels temporary/dismissable

**When to Use:** E-commerce, B2C quick purchases, mobile-first flows
**When NOT to Use:** Complex B2B forms with conditionals, multi-party approvals

## 4. Interaction Flow

```
[Product Page]
↓
User taps "Buy Now"
↓
[Express Checkout - Single Page]

┌─────────────────────────────────────┐
│ 🛍️ Your Order $89.99 │ ← Sticky header
│ ────────────────────────────────── │
│ │
│ ▼ 1. Delivery (Expanded) │ ← Auto-expanded
│ ├─ Saved Address: Home (default) │
│ ├─ 📍 Add New Address │ ← Tap to expand inline
│ └─ 🚚 Standard (Free) [Selected] │
│ Express (+$9) │
│ │
│ ▶ 2. Payment (Collapsed) │ ← Expands on scroll or tap
│ │
│ ▶ 3. Review (Collapsed) │
│ │
│ ──────────────────────────────────│
│ Total: $89.99 (incl. free ship) │ ← Always visible
│ [Complete Order] ← 56px tall CTA │
└─────────────────────────────────────┘
```

**User Actions:**
1. Default shipping auto-selected (if saved)
2. Scroll/tap to expand Payment
3. Select payment method (Apple Pay / Card / PayPal)
4. Review section auto-expands showing final summary
5. Tap "Complete Order"

**Decision Points:**
- New vs returning user (show/hide address form)
- Payment method selected (adjust fields shown)
- Promo code applied (recalculate totals)

**Edge Cases:**
- Address validation fails → inline error under field, section stays expanded
- Payment declined → retry or switch method, without losing other data
- Out of stock during checkout → alert banner, remove item or suggest alternative

## 5. Wireframe Description

**Mobile (375px width):**

```
┌───────────────────────┐
│ ← Back to Product │ Top nav
│ ──────────────────────│
│ Order Summary │ ← Collapsible summary
│ Product Image + Name │
│ Qty: 1 Price: $89.99 │
│ ──────────────────────│
│ │
│ 1. DELIVERY ▼ │ ← Section header (bold, 18px)
│ ┌──────────────────┐ │
│ │ • Home │ │ ← Radio button, pre-selected
│ │ 123 Main St... │ │ (shows truncated)
│ │ ○ Work │ │
│ │ + Add Address │ │ ← Link opens inline form
│ └──────────────────┘ │
│ │
│ Shipping Method: │
│ • Standard (Free) │ ← Default
│ ○ Express ($9) │
│ Arrives Tue Jan 14 │ ← Date clarity
│ ──────────────────────│
│ │
│ 2. PAYMENT ▶ │ ← Collapsed (tap to expand)
│ ──────────────────────│
│ │
│ 3. REVIEW ▶ │
│ ──────────────────────│
│ │
│ Subtotal: $89.99 │ ← Sticky footer
│ Shipping: Free │
│ Tax: $7.20 │
│ ───────────────── │
│ Total: $97.19 │ (28px, bold)
│ [Complete Order] │ ← Full width, high contrast
└───────────────────────┘
```

**Responsive Breakpoints:**
- **< 768px (Mobile):** Single column, accordions
- **≥ 768px (Tablet):** Sidebar with order summary, main form expands
- **≥ 1024px (Desktop):** Two-column (60/40), all sections visible, no accordions

## 6. Micro-interactions

**Loading States:**
- Address validation: Spinner inline, 0.5s debounce
- Payment processing: "Completing order..." overlay, 60% transparent
- Success: ✓ checkmark animation, fade to confirmation page (1.5s)

**Transitions:**
- Accordion expand/collapse: 0.3s ease-out
- Price updates: Subtle highlight (yellow flash, fade)
- Error appearance: Slide down from top, red border pulse

**Feedback Animations:**
- Field validation: ✓ green check appears on blur
- Button tap: Scale down 0.95x (haptic feel)
- Promo code applied: Confetti micro-animation + price strikethrough

**Empty States:**
- No saved addresses: "Add your first address" with icon
- No payment methods: "Pay with Apple Pay" prominently shown first

## 7. Accessibility

**WCAG AA Compliance:**
- Color contrast: 4.5:1 for text, 3:1 for UI components
- Touch targets: Minimum 44x44px (Apple HIG)
- Form labels: Visible labels (not just placeholder text)

**Keyboard Navigation:**
- Tab order: Sequential through sections
- Enter key: Expands accordion / submits form at end
- Escape key: Closes any expanded overlays (address form)

**Screen Reader:**
- Accordion state announced: "Delivery section, expanded, 1 of 3"
- Price updates: aria-live="polite" region
- Errors: aria-invalid + aria-describedby linking to error message

**Reduced Motion:**
- Respect prefers-reduced-motion
- Accordion becomes instant show/hide (no animation)

## 8. Success Metrics

**Primary KPIs:**
- **Abandonment Rate:** Target < 50% (from 68%)
- **Avg Completion Time:** Target < 2min (from 4min 23s)
- **Mobile Conversion Rate:** Target +35% lift

**Secondary Metrics:**
- Saved address reuse rate (indicates returning customers liking it)
- Error rate per field (identify problematic inputs)
- Payment method distribution (are people using Apple Pay?)

**A/B Test Hypothesis:**
"Single-page accordion checkout will reduce mobile abandonment by 25% within 2 weeks due to reduced cognitive load and faster completion time"

**Test Setup:**
- 50/50 split (old multi-step vs new single-page)
- Run for 2 weeks (minimum 1000 checkouts per variant)
- Segment by device type (mobile vs desktop)

**Expected Improvement:**
- 18% more completed orders = +$23k revenue/month
- Reduced support tickets about "lost cart" issues

**Risks to Monitor:**
- Some users might prefer multi-step (sense of progress)
- Desktop users might find single-page too long (mitigate with side-by-side layout)

**Iteration Plan:**
If successful on mobile, consider progressive enhancement for desktop (optional multi-step toggle)