UX 체크 아웃 및 변환 패턴
1) 흐름지도: 정확히 최적화 한 것
참가 → 방법 선택 → 세부 사항 → 검토 → 3DS/확인 → 영수증
우리는 고속 레일 (A2A/지갑/원탭) 과 클래식 카드 (PAN 형식) 를 지원합니다.
반복 지불의 경우-원 클릭/토큰/네트워크 토큰; 전자- "마찰없이" 스텝 업이 필요한 순간까지.
2) 단일 단계 및 다단계
단일 단계 (인라인): 더 적은 클릭, 더 빠른 인식. 리디렉션이있는 지갑/Apple Pay/Google Rau/로컬 방법에 권장됩니다.
다단계 (마스터): SoF 카드/양식의인지 부하를 더 잘 관리합니다. 각 단계는 1 개의 결정입니다 (양 → 방법 → 세부 사항 → 확인).
솔루션: 하이브리드-빠른 레일 및 짧은 형식의 카드를위한 단일 단계, 복잡한 시나리오를위한 마스터 (쿠폰/보너스/계정 주소/SoF).
3) 모양: 오류 없음 속도
검증 및 마스킹
자동 PAN 형식 (# # # # # # # #), Luhn 로컬, 브랜드 및 길이 힌트.
EXP MM/YY-자동 이동이있는 두 필드, CVV-마스크 + 힌트 아이콘.
BIN 감지 → 힌트 "은행 카드가 3DS를 요청할 수 있습니다".
금액/통화: 현지 통화를 표시하고 상각 통화로 전환하십시오 (다른 경우).
자동 완성
브라우저 '자동 완성' (cc 번호, cc-exp, cc-csc, 이름) 을 지원합니다.
방법의 보존 (동의) → 토큰 화; "PAN을 저장하지 않습니다".
오류
"양식 전체가 아닌 인라인 힌트. "1 줄 메시지: 무슨 일이 있었으며해야 할 일.
하드 (유효하지 않은 PAN) 와 소프트 (사용할 수없는) 오류를 분리하십시오. 반복 전략은 이에 따라 다릅니다.
4) 방법의 선택: 쇼케이스가 아닌 "흰색 선반"
먼저-권장 (AR이 높은 지갑/로컬 APM), "기타 방법".
작동하지 않는 GEO/유효성 검사 방법을 숨깁니다.
현지화 된 아이콘/이름; 인출을 통해 ETA를 표시하십시오 (동일한 시스템에서 예금 + 인출 인 경우).
카드-BIN 탐지를위한 Visa/Mastercard/MIR/AmEx 배지.
5) 3DS UX: 변환을 "죽이지" 않는 방법
기본적으로 마찰없는 도전-위험/정책에만 해당됩니다.
3DS를 새 창이 아닌 모달에 내장하십시오.
명확한 기대: "은행은 확인을 요청할 수 있습니다. 휴대 전화를 닫아 두십시오".
실패: 타임 아웃 → 다른 방법으로 반복하거나 전환하라는 메시지.
컨텍스트 저장: 3DS가 완료된 후 입력 된 데이터를 잃지 않고 동일한 단계로 돌아갑니다.
6) 감소 회복
소프트 거부: "은행/제한을 일시적으로 사용할 수 없음" + 재실행 버튼; 반복이 도움이되지 않은 경우-버튼 "다른 방법 사용" (A2A/지갑 제공).
거부: 동일한 경로에서 리트레이를 제공하지 마십시오. 안전한 대안 (로컬 APM) 을 보여줍니다.
금액/통화 저장 및 선택한 보너스 패키지-재진입을 강요하지 마십시오.
모바일에서-시스템을 다시 숨기지 마십시오. 스토리지 상태를 유지하십시오.
7) 위원회 투명성 및 수익 정책
예금에 수수료 나 DCC가있는 경우 확인 전에 다음과 같이 표시하십시오. "Commission X %/Y 수정., Z를 상각 할 총계".
같은 방법과 "소스로 돌아 가기": 짧은 텍스트: "우리는 예금이 시작된 곳과 같은 장소로, 순 금액으로 가져옵니다".
결제 단계에서 사용자를 제거하지 않고 별도의 계층 (시트) 으로 규칙에 연결합니다.
8) 현지화, 통화, 언어
Accept-Language/IP/KYC의 자동 언어이지만 명시 적 전환을 유지하십시오.
로케일별로 수천/10 진수를 형식화하십시오 (1,234,56 대 1,234). 56).
현지 결제 세부 정보 (CPF/PIX 키, IBAN, 청구 주소) -이 국가에서 필요한 경우에만 가능합니다.
로케일 별 (24 시간 대 12 시간) 3DS/날짜 코드의 날짜/시간.
9) 지갑 및 원탭
Apple Pay/Google Pay: 지원되는 기기/브라우저에만 표시됩니다. 금액 카드를 한 번 누릅니다.
시스템 시트 (기본 시트) - 가장 빠른; 금액/통화를 숨기지 마십시오.
"저장된" 카드/지갑 쇼케이스: 큰 로고, 마지막 4 번의 만료 - "업데이트 날짜" 경고.
안정적인 상환/되풀이를위한 네트워크 토큰이 지원됩니
10) 가용성 및 성능
A11y: 포커스 스타일, 대비, '아리아 라벨', 3DS/양식의 화면 판독기 지원.
트랩없이 키보드 탐색 및 "탭 주문".
빈 화면 대신 첫 번째 대화식 골격에 <2 c를로드합니다.
오프라인 안정화: 네트워크가 3DS에서 "딥" 되면 이해할 수있는 메시지와 안전한 반복.
11) 사기 방지 친화적 UI ("화상" 변환 없음)
소프트 스텝 업: 우편/메일, DOB, 셀카/ACC를 모든 사람이 아닌 위험에 따라 요청하십시오.
내부 로직을 확장하지 않고 잘못된 경기 강조 (BIN 국가 vs IP/KYC) ("현재 은행이 지원되지 않는 것 같습니다").
UI의 시도 횟수, 다시 시도하기 전의 타이머, 진행 표시기를 제한하십시오.
12) 마이크로 카피 라이팅 (예)
PAN: "16-19 자리, 공간 없음-추가 할 것입니다".
CVV: "카드 뒷면/얼굴에 3-4 자리".
소프트 오류: "은행이 일시적으로 응답하지 않았습니다. 다시 시도하거나 다른 방법을 선택하십시오. "
어려운 오류: "은행은 거래를 거절했습니다. 다른 지불 방법을 선택하십시오.
3DS: "은행 신청서에서 거래를 확인하십시오-~ 10-20 초가 걸립니다".
13) 모바일 패턴
숫자 필드를위한 숫자 키보드, 자동 초점 전환.
끈적 끈적한 바 "총 쓰기/계속".
뱅킹 애플리케이션에서 딥 링크 3DS 지원.
확인을위한 Haptic 피드백; 남용하지 마십시오.
14) 지불 시나리오 및 흐름 옵션
고속 예금: 기본 방법 (마지막 성공 토큰), 1 화면.
"등록 없음" → 지불 후 KYC (허용되는 경우): 최고 깔때기를 증가 시키지만 반드시 반품 정책 및 한도.
콤보 보너스 + 예금: 순 예금 금액과 보너스를 별도로 표시하십시오. 게임 조건을 숨기지 마십시오.
15) 지표 및 대시 보드 (최소)
방법/geo/채널/장치별 AR/DR.
3DS 통과 및 책임 전환, 소프트 감소 점유율.
깔때기: 보기 → MethodPick → 세부 사항 → 3DSStart → 3DSSuccess → 지불.
폐기 이유 (페이지 이벤트): 종료, 필드 오류, 타임 아웃.
단계별 대기 시간 p95/p99 (렌더링, 입력, 3DS, 확인).
승인 당 비용 및 테이크 레이트% (라우팅에 영향을 미치는 UX 변경의 경우).
모바일 vs 데스크톱: AR 및 대기 시간의 갭.
16) 실험 (짧은)
GEO/BIN/방법으로 계층화하여 사용자에 의한 무작위 화하십시오.
가드 레일: CBR/환불, AR 임계 값, 대기 시간.
테스트: 메소드 순서, 오류 텍스트, 3DS 모달 vs 리디렉션, 표현 흐름, 자동 완성, 마스킹.
흐름이 방법/PSP 선택을 변경하는 경우 전체 비용 (수수료/FX/예비) 을 고려하십시오.
17) 스크린 템플릿 (와이어 프레임 레벨)
A. 방법 선택 (모바일)
제목: "지불 방법"
카드: Apple Pay/Google Pay/Local 월렛/카드
레이블: 빠르고 권장되는 ETA 출력 (관련된 경우)
현지 통화 + 금액
B. 카드 양식
필드: PAN, EXP, CVV, 보유자 이름
Checkbox "빠른 결제를 위해 카드 저장" (설명 포함)
InfoBlock: 은행에서 확인을 요청할 수 있습니다
버튼: "Pay X {통화}"
C. 3DS 모달카
단계: "은행에서 확인을 기다리는 중" + 타이머 + 버튼 "반복"
다른 방법 링크 선택 (양과 컨텍스트 저장)
D. 오류/대체
실패 유형별 메시지
CTA 1: 반복 (소프트)
CTA 2: "[현지 방법을 통한 지불]"
18) 모범 사례 (짧은)
1. 첫 번째 빠른 레일 (지갑/A2A), 카드; 관련없는 방법을 숨깁니다.
2. 소프트 검증 인라인, 완료된 오류 메시지, 재부팅 없음.
3. 3DS 모달, 기본적으로 마찰이 없음, 명확한 기대 및 계획 B.
4. 다시 시도하기 전에 한 번 클릭하여 실패 및 반환 상태를 저장하십
5. 현지화: 통화/형식/필드; 확인 전에 수수료를 표시하십시오
6. 모바일 우선 디자인: 숫자 키보드, 끈적 끈적한 CTA, 상단의 빠른 방법.
7. 가용성과 성능은 선택 사항이 아닙니다.
8. 모든 사람이 아니라 위험에 대한 사기 방지 단계.
9. 각 단계 + 실패 및 원인에 대한 원격 측정.
10. 가드 레일 및 전체 가치에 대한 실험.
19) 구현 점검표
- GEO 메소드 맵 및 표시 순서.
- PAN/EXP/CVV 마스킹/검증, '자동 완료'.
- BIN 탐지 및 브랜드, 3DS 힌트.
- 타이머 및 폴록이있는 3DS 모달.
- 소프트 감소를위한 재시도, 하드 감소를위한 대안.
- 투명한 동일한 방법 수수료 및 정책.
- 현지화: 언어, 통화, 형식, 로컬 필드.
- 원탭/지갑, 저장된 방법, 네트워크 토큰.
- 자동차/성능 (LCP/TTI), 골격.
- 대시 보드: AR/DR, 3DS, 깔때기, 대기 시간, 고장 원인.
- 계획 A/B 및 가드 레일, 분석을위한 데이터 프리즈.
요약
체크 아웃 변환은 작은 것들의 합입니다: "첫 번째 화면의" 빠른 방법, 올바른 형태 및 팁, 깔끔한 3DS 에스컬레이션, 유능한 거부 처리기 및 수수료의 정직한 투명성. 속도, 선명도 및 재난 복구에 중점을두고 모든 단계를 측정하고 통제 된 실험을 통해 변경 사항을 구현하십시오.이 방법으로 AR을 높이고 실패를 줄이며 플레이어와 규제 기관의 신뢰를 유지합니다.