UX-патерни checkout і конверсія
1) Карта флоу: що саме оптимізуємо
Entry → Method pick → Details → Review → 3DS/Confirmation → Receipt
Підтримуємо швидкі рейки (A2A/гаманці/One-tap) і класичні карти (PAN-форма).
Для повторних оплат - one-click/tokens/network tokens; для перших - «без тертя» до моменту, коли потрібен step-up.
2) Single-step vs Multi-step
Single-step (інлайн): менше кліків, швидше сприйняття. Рекомендується для гаманців/Apple Pay/Google Рау/локальних методів з перенаправленням.
Multi-step (майстер): краще управляє когнітивним навантаженням на картах/формі SoF. Кожен крок - 1 рішення (сума → метод → реквізити → підтвердження).
Рішення: гібрид - single-step для швидких рейок і short-form карт, master для складних сценаріїв (купон/бонус/адреса рахунку/SoF).
3) Форми: швидкість без помилок
Валідація та маскування
Авто-формат PAN (# # # # # # #), Luhn локально, підказка бренду і довжини.
EXP MM/YY - два поля з авто-переміщенням, CVV - маска + іконка підказки.
BIN-детект → підказка «Картка вашого банку може запросити 3DS».
Сума/валюта: показуємо локальну валюту і конверсію у валюту списання (якщо відрізняється).
Автозаповнення
Підтримка браузерного'autocomplete'( cc-number, cc-exp, cc-csc, name).
Збереження методу (за згодою) → токенізація; пояснити «ми не зберігаємо PAN».
Помилки
Inline підказки, а не «form-wide». Повідомлення в 1 рядок: що сталося і що зробити.
Розділяти жорсткі (invalid PAN) і м'які (issuer unavailable) помилки - від цього залежить стратегія повторів.
4) Вибір методу: «біла полиця», не вітрина
Спочатку - рекомендовані (гаманці/локальні APM з високим AR), потім «Інші методи».
Приховувати непрацюючі методи по GEO/валідації.
Локалізовані іконки/назви; показувати ETA за висновком (якщо це депозит + виведення в одній системі).
Для карт - бейджі Visa/Mastercard/MIR/AmEx по BIN-детекту.
5) 3DS UX: як не «вбити» конверсію
Frictionless за замовчуванням, challenge - тільки при ризику/політиці.
Робити 3DS вбудованим в модалку, не як нове вікно.
Чіткі очікування: «Банк може попросити підтвердження - тримайте телефон поруч».
Fail-safe: тайм-аут → пропозицію повторити або перейти на альтернативний метод.
Зберігати контекст: після завершення 3DS повертаємося на той же крок без втрати введених даних.
6) Відмови і відновлення (decline-recovery)
Soft-decline: підказка «Тимчасово недоступний банк/ліміт» + кнопка повтору; якщо повтор не допоміг - кнопка «Спробувати інший метод» (пропонувати А2А/гаманець).
Hard-decline: не пропонувати ретрай на тому ж маршруті; показати безпечні альтернативи (локальні APM).
Зберігати суму/валюту і обраний пакет бонусу - не змушувати вводити заново.
На мобільному - не приховувати системний back; тримати state в URL/Storage.
7) Прозорість комісій і політика повернення
Якщо на депозиті є fee або DCC - показувати до підтвердження: «Комісія X %/Y фікс., підсумок до списання Z».
Same-method і «повернення на джерело»: короткий текст «Виводимо туди ж, звідки прийшов депозит, до суми нетто».
Посилання на правила - в окремому шарі (sheet), не прибираючи користувача з кроку оплати.
8) Локалізація, валюта, мова
Авто-мова по Accept-Language/IP/KYC, але тримати явний перемикач.
Форматувати тисячі/десяткові по локалі (1 234,56 vs 1,234. 56).
Локальні платіжні деталі (CPF/PIX ключ, IBAN, адреса білінгу) - тільки якщо потрібні в цій країні.
Дати/час для 3DS/код-термінів - по локалі (24h vs 12h).
9) Гаманці і one-tap
Apple Pay / Google Pay: показувати тільки на підтримуваних пристроях/браузерах. One-tap на картці суми.
Системний шит (native sheet) - найшвидше; не ховати суму/валюту.
Вітрина «збережених» карт/гаманців: великі логотипи, останні 4, що закінчуються - з попередженням «оновіть дату».
Підтримка network tokens для стабільних повторних платежів/recurring.
10) Доступність і продуктивність
A11y: фокус-стилі, контрасти,'aria-labels', підтримка екранних читалок на 3DS/формах.
Клавіатурна навігація і «tab-order» без пасток.
Лоадинг <2 c для першого інтерактивного, скелетони замість порожніх екранів.
Offline-стабілізація: якщо мережа «просіла» на 3DS - зрозуміле повідомлення і безпечний повтор.
11) Анти-фрод-friendly UI (без «спалювання» конверсії)
М'які step-up: запит ZIP/поштового, DOB, селфі/КУС - за ризиком, а не всім.
Підсвічування mismatch (BIN-країна vs IP/KYC) - без розкриття внутрішньої логіки («Схоже, поточний банк не підтримується»).
Обмеження кількості спроб в UI, таймер перед повтором, прогрес-індикатор.
12) Мікро-копірайтинг (приклади)
PAN: «16-19 цифр, без прогалин - ми додамо».
CVV: «3-4 цифри на звороті/обличчі карти».
Помилка soft: "Банк тимчасово не відповів. Спробуйте ще раз або виберіть інший спосіб".
Помилка hard: "Банк відхилив операцію. Виберіть інший спосіб оплати".
3DS: «Підтвердіть операцію в додатку банку - це займає ~ 10-20 сек».
13) Мобільні патерни
Numeric-keyboard для числових полів, автоперехід фокусу.
Sticky-бар «Разом до списання/Продовжити».
Підтримка deep-link 3DS в банківські додатки.
Haptic feedback на підтвердження; не зловживати.
14) Платіжні сценарії та варіанти флоу
Express-депозит: метод за замовчуванням (останній успішний токен), 1 екран.
«Без реєстрації» → KYC після оплати (там, де дозволено): підвищить top-funnel, але обов'язково - політика повернення і ліміти.
Комбо бонус + депозит: показувати чисту суму депозиту і бонус окремо; не приховувати умови відіграшу.
15) Метрики і дашборди (мінімум)
AR/DR за методом/гео/каналу/пристрою.
3DS pass & liability shift, soft-decline share.
Funnel: View→MethodPick→Details→3DSStart→3DSSuccess→Paid.
Abandonment reasons (on-page events): закриття, помилка поля, тайм-аут.
Latency p95/p99 за етапами (рендер, введення, 3DS, підтвердження).
Cost-per-Approval і take-rate% (для UX-змін, що впливають на роутинг).
Mobile vs Desktop: розрив в AR і latency.
16) Експерименти (коротко)
Рандомізуйте по користувачеві, стратифікуйте по GEO/BIN/методу.
Guardrails: CBR/Refund, AR-поріг, latency.
Тестуйте: порядок методів, тексти помилок, 3DS модалки vs редирект, експрес-флоу, автозаповнення, маскування.
Враховуйте повну вартість (fees/FX/reserve), якщо флоу змінює метод/PSP-вибір.
17) Шаблони екранів (wireframe-рівень)
A. вибір методу (мобільний)
Заголовок: «Спосіб оплати»
Картки: Apple Pay/Google Pay/Локальний гаманець/Карта
Лейбли: «Швидко», «Рекомендуємо», ETA виводу (якщо релевантно)
Локальна валюта + сума
B. карткова форма
Поля: PAN, EXP, CVV, Ім'я власника
Чекбокс «Зберегти карту для швидких оплат» (з поясненням)
Інфоблок: можливий запит підтвердження в банку
Кнопка: «Оплатити X {валюта}»
C. 3DS модалка
Кроки: «Очікуємо підтвердження в банку» + таймер + кнопка «Повторити»
Лінк «Вибрати інший спосіб» (зберігає суму і контекст)
D. помилка/альтернатива
Повідомлення за типом відмови
CTA 1: «Повторити» (soft)
CTA 2: «Оплатити через [локальний метод]»
18) Best practices (коротко)
1. Спочатку швидкі рейки (гаманці/А2А), потім карти; ховати нерелевантні методи.
2. М'яка валідація inline, закінчене повідомлення про помилку, без перезавантажень.
3. 3DS в модалці, frictionless за замовчуванням, чітке очікування і план B.
4. Збереження стану при відмовах і поверненнях, один клік до повтору.
5. Локалізація: валюта/формати/поля; показувати комісію до підтвердження.
6. Мобільний-перший дизайн: numeric-keyboard, sticky-CTA, швидкі методи вгорі.
7. Доступність і продуктивність - не опціональні.
8. Анти-фрод step-up за ризиком, а не всім.
9. Телеметрія по кожному кроку + воронка відмов і причин.
10. Експерименти з guardrails і повноцінною вартістю.
19) Чек-лист впровадження
- Карта методів по GEO і порядок показу.
- Маскування/валідація PAN/EXP/CVV,'autocomplete'.
- BIN-детект і бренд, підказка про 3DS.
- 3DS-модалка з таймером і fallback.
- Retry для soft-decline, альтернатива для hard-decline.
- Прозорі комісії та політика same-method.
- Локалізація: мова, валюта, формати, локальні поля.
- One-tap/гаманці, збережені методи, network tokens.
- А11у/перформанс (LCP/TTI), скелетони.
- Дашборди: AR/DR, 3DS, funnel, latency, причини відмов.
- План A/B і guardrails, дата-фриз для аналізу.
Резюме
Конверсія checkout - це сума дрібниць: швидкі методи «на першому екрані», коректні форми і підказки, акуратна 3DS-ескалація, грамотний обробник відмов і чесна прозорість комісій. Сфокусуйтеся на швидкості, ясності і відновленні після збоїв, вимірюйте все по кроках і впроваджуйте зміни через контрольовані експерименти - так ви піднімете AR, знизіть відмови і збережіть довіру гравців і регуляторів.