UX nümunələri checkout və konvertasiya

1) Flow kartı: nəyi optimallaşdırırıq

Entry → Method pick → Details → Review → 3DS/Confirmation → Receipt

Sürətli relsləri (A2A/cüzdan/One-tap) və klassik kartları (PAN forması) dəstəkləyirik.
Təkrar ödənişlər üçün - one-click/tokens/network tokens; birincisi üçün - «sürtünmədən» step-up lazımdır.

2) Single-step vs Multi-step

Single-step (onlayn): daha az klik, daha sürətli qavrayış. Cüzdan/Apple Pay/Google Rau/yerli yönləndirmə üsulları üçün tövsiyə olunur.
Multi-step (master): SoF kart/formasında idrak yükünü daha yaxşı idarə edir. Hər addım - 1 həll (məbləğ → üsul → rekvizitlər → təsdiq).
Həll: hibrid - sürətli relslər və qısa form kartları üçün tək addım, mürəkkəb ssenarilər üçün master (kupon/bonus/hesab ünvanı/SoF).

3) Formalar: səhvsiz sürət

Validasiya və maskalanma

Avtomatik PAN formatı (# # # # # # #), Luhn yerli, marka və uzunluq ipucu.
EXP MM/YY - iki avtomatik hərəkət sahəsi, CVV - maska + ipucu nişanı.
BIN-Detect → İpucu «Bankınızın kartı 3DS tələb edə bilər».
Məbləğ/valyuta: Yerli valyutanı və debet valyutasına çevirməni göstəririk (fərqli olduqda).

Avtomatik doldurma

«autocomplete» brauzerinə dəstək (cc-number, cc-exp, cc-csc, name).
Metodun saxlanması (razılığı ilə) → tokenizasiya; izah «Biz PAN saxlamaq deyil».

Səhvlər

«form-wide» deyil, inline ipuçları. 1-ci sətirdə mesaj: nə oldu və nə etmək lazımdır.
Sərt (invalid PAN) və yumşaq (issuer unavailable) səhvləri ayırmaq - təkrarlama strategiyası bundan asılıdır.

4) Metod seçimi: «ağ raf», vitrin deyil

Əvvəlcə - tövsiyə olunan (yüksək AR olan cüzdan/lokal APM), sonra «Digər üsullar».
GEO/validasiya üçün işləməyən metodları gizlətmək.
Lokallaşdırılmış nişanlar/adlar; çıxarış ETA göstərmək (bu depozit + eyni sistemdə çıxarış varsa).
Kartlar üçün - BIN detektoru ilə Visa/Mastercard/MIR/AmEx nişanları.

5) 3DS UX: necə «öldürmək» dönüşüm

Frictionless default, challenge - yalnız risk/siyasət ilə.
Yeni pəncərə kimi deyil, modalka daxili 3DS etmək.
Aydın gözləntilər: «Bank təsdiq istəyə bilər - telefonu yaxınlıqda saxlayın».
Fail-safe: zaman aşımı → təkrarlamaq və ya alternativ üsula keçmək təklifi.
Konteksti saxla: 3DS tamamlandıqdan sonra daxil edilmiş məlumatları itirmədən eyni addımı atırıq.

6) Uğursuzluqlar və bərpa (decline-recovery)

Soft-decline: «Müvəqqəti əlçatmaz bank/limit» + təkrar düyməsi; təkrar kömək etmədikdə - «Fərqli metodu sınayın» düyməsi (A2A/cüzdan təklif edin).
Hard-decline: eyni marşrutda retraj təklif etməyin; təhlükəsiz alternativləri (yerli APM) göstərmək.
Məbləği/valyutanı və seçilmiş bonus paketini saxlayın - yenidən daxil etməyə məcbur etməyin.
Mobil - sistem back gizlətməyin; state URL/Storage saxlamaq.

7) Komissiyaların şəffaflığı və geri qaytarma siyasəti

Depozitdə fee və ya DCC varsa - təsdiqlənmədən əvvəl göstərin: «Komissiya X %/Y fix., Z-nin silinməsi üçün nəticə».
Same-method və «mənbəyə qaytarma»: «Depozitin gəldiyi yerdə netto məbləğinə qədər» qısa mətni.
Qaydalara istinadlar - ödəniş addımından istifadəçini çıxarmadan ayrı bir təbəqədə (sheet).

8) Lokalizasiya, valyuta, dil

Accept-Language/IP/KYC avto dil, lakin açıq keçid saxlamaq.
Minlərlə/onluq yerli formatla (1 234,56 vs 1,234. 56).
Yerli ödəniş detalları (CPF/PIX açarı, IBAN, billing ünvanı) - yalnız bu ölkədə lazım olduqda.
3DS/kod vaxtı üçün tarixlər/vaxt - lokal (24h vs 12h).

9) Cüzdan və one-tap

Apple Pay/Google Pay: yalnız dəstəklənən cihazlarda/brauzerlərdə göstərin. Məbləğ kartında bir-tap.
System sheet (native sheet) - ən sürətli; məbləği/valyuta gizlətmək deyil.
«Saxlanılan» kartların/cüzdanların vitrinləri: böyük loqotiplər, son 4, müddəti - «tarixi yeniləyin» xəbərdarlığı ilə.
Sabit təkrar ödənişlər/recurring üçün network tokens dəstəkləyir.

10) Mövcudluq və performans

A11y: fokus üslubları, təzadlar, 'aria-labels', 3DS/formalarda ekran oxucularını dəstəkləyir.
Klaviatura naviqasiyası və tələsiz «tab-order».
İlk interaktiv üçün <2 c loading, boş ekranlar əvəzinə skeletlər.
Offline sabitləşdirmə: şəbəkə 3DS-də «batarsa» - başa düşülən mesaj və təhlükəsiz təkrar.

11) Anti-frod-friendly UI («yandırma» dönüşüm olmadan)

Yumşaq step-up: ZIP/poçt sorğusu, DOB, selfie/KUS - bütün deyil, risk.
İşıqlandırma mismatch (BIN-ölkə vs IP/KYC) - daxili məntiqi açıqlamadan («Görünür, cari bank dəstəklənmir»).
UI-də cəhdlərin sayının məhdudlaşdırılması, təkrarlamadan əvvəl zamanlayıcı, tərəqqi göstəricisi.

12) Mikro kopyalama (nümunələr)

PAN: «16-19 rəqəm, boşluq yoxdur - əlavə edəcəyik».
CVV: «Kartın arxasında/üzündə 3-4 rəqəm».
soft səhv: "Bank müvəqqəti cavab vermədi. Bir daha cəhd edin və ya başqa bir yol seçin".
Səhv hard: "Bank əməliyyatı rədd etdi. Başqa bir ödəniş üsulu seçin".
3DS: «Bankın tətbiqində əməliyyatı təsdiqləyin - bu ~ 10-20 saniyə çəkir».

13) Mobil nümunələr

Rəqəmsal sahələr üçün Numeric-keyboard, fokus avtomobil keçidi.
Sticky-bar «Cəmi/Davam».
Bank applications deep-link 3DS dəstək.
Təsdiq üçün Haptic feedback; sui-istifadə etməyin.

14) Ödəniş ssenariləri və flow variantları

Express-depozit: default üsul (son uğurlu token), 1 ekran.
«Qeydiyyat olmadan» → KYC ödənişdən sonra (icazə verilən yerdə): top-funnel artıracaq, lakin mütləq - geri qaytarma siyasəti və limitlər.
Combo bonus + depozit: xalis depozit məbləği və bonus ayrıca göstərmək; oyun şərtlərini gizlətməyin.

15) Metriklər və daşbordlar (minimum)

AR/DR metodu/geo/kanal/cihaz.
3DS pass & liability shift, soft-decline share.
Funnel: View→MethodPick→Details→3DSStart→3DSSuccess→Paid.
Abandonment reasons (on-page events): bağlanma, sahə xətası, zaman aşımı.
Latency p95/p99 mərhələləri (render, giriş, 3DS, təsdiq).
Cost-per-Approval və take-rate% (routing təsir UX dəyişikliklər üçün).
Mobile vs Masaüstü: AR və latency boşluğu.

16) Təcrübələr (qısa)

Istifadəçiyə görə randomize edin, GEO/BIN/metodu ilə stratifikasiya edin.
Guardrails: CBR/Refund, AR-eşik, latency.
Test edin: prosedur metodları, səhv mətnləri, 3DS modulları vs redirect, ekspress flow, avtomatik doldurma, maskalama.
Flow/PSP seçimi metodunu dəyişdirirsə, tam dəyəri (fees/FX/reserve) nəzərə alın.

17) Ekran şablonları (wireframe-səviyyə)

A. üsul seçimi (mobil)

Başlıq: «Ödəniş üsulu»

Kartlar: Apple Pay/Google Pay/Yerli cüzdan/Kart

Etiketlər: «Tez», «Məsləhət edirik», ETA çıxış (müvafiq olarsa)

Yerli valyuta + məbləğ

B. Kart forması

Sahələr: PAN, EXP, CVV, Sahibinin adı

Checkbox «Sürətli ödənişlər üçün kart saxla» (izahat ilə)

İnfoblok: bankdan təsdiq tələb etmək mümkündür

düyməsi: «Ödəniş X {valyuta}»

C. 3DS modalka

Addımlar: «Bankda təsdiq gözləyirik» + taymer + «Təkrarla» düyməsi

Link «Başqa bir yol seçin» (məbləği və kontekstini saxlayır)

D. səhv/alternativ

Uğursuzluq növü üzrə mesaj

CTA 1: «Təkrar et» (soft)

CTA 2: «[yerli üsul] vasitəsilə ödəmək»

18) Best practices (qısa)

1. Əvvəlcə sürətli relslər (cüzdan/A2A), sonra kartlar; əhəmiyyətsiz metodları gizlətmək.
2. Yumşaq inline validasiya, tamamlanmış səhv mesajı, yenidən başlamadan.

3. modalka 3DS, frictionless default, aydın gözləmə və B planı

4. Uğursuzluqlar və geri qaytarmalar vəziyyətini saxlamaq, təkrarlanana qədər bir klik.
5. Lokalizasiya: valyuta/formatlar/sahələr; təsdiq qədər komissiya göstərmək.
6. Mobil-birinci dizayn: numeric-keyboard, sticky-CTA, yuxarıda sürətli üsullar.
7. Mövcudluq və performans - isteğe bağlı deyil.
8. Anti-frod step-up risk deyil, hər kəs üçün.
9. Hər addım üçün telemetriya + uğursuzluqlar və səbəblər hunisi.
10. guardrails və tam dəyəri ilə təcrübələr.

19) Giriş çek siyahısı

• GEO metodlarının xəritəsi və göstərmə qaydası.
• PAN/EXP/CVV maskalanması/təsdiqlənməsi, 'autocomplete'.
• BIN-detekt və marka, 3DS haqqında ipucu.
• Zamanlayıcı və fallback ilə 3DS modalka.
• soft-decline üçün Retry, hard-decline üçün alternativ.
• Şəffaf komissiyalar və same-method siyasəti.
• Lokalizasiya: dil, valyuta, formatlar, yerli sahələr.
• One-tap/cüzdan, saxlanan üsullar, network tokens.
• A11u/performans (LCP/TTI), skeletonlar.
• Dashboard: AR/DR, 3DS, funnel, latency, uğursuzluq səbəbləri.
• Plan A/B və guardrails, analiz üçün data-friz.

Xülasə

Checkout çevirməsi xırda şeylərin cəmidir: «birinci ekranda» sürətli üsullar, düzgün formalar və ipuçları, düzgün 3DS eskalasiyası, səlahiyyətli uğursuzluq prosessoru və ədalətli komissiya şəffaflığı. Uğursuzluqlardan sonra sürət, aydınlıq və bərpaya diqqət yetirin, hər şeyi addım-addım ölçün və nəzarət edilən təcrübələrlə dəyişiklik edin - beləliklə AR-ı qaldıracaqsınız, uğursuzluqları azaldacaqsınız və oyunçuların və tənzimləyicilərin etibarını qoruyacaqsınız.