UX模式检查和转换
1)Flow地图: 我们究竟要优化什么
Entry → Method pick → Details → Review → 3DS/Confirmation → Receipt
支持快速导轨(A2A/钱包/单张)和经典卡(PAN形式)。
对于重复支付-单击/tokens/network tokens;对于前者-"无摩擦"直到需要步进。
2) Single-step vs Multi-step
单步(直线):点击较少,感知更快。钱包/Apple Pay/Google Rau/本地重定向方法推荐使用。
Multi-step(向导):在SoF卡/表单上更好地管理认知负载。每个步骤是1个解决方案(总和→方法→详细信息→确认)。
解决方桉:溷合动力车-单步快速导轨和短型卡片,主人复杂的场景(优惠券/奖金/帐户地址/SoF)。
3)表格: 无错误速度
验证和掩饰
PAN自动格式(#########),Luhn本地,品牌提示和长度。
EXP MM/YY是两个自动移动字段,CVV是掩码+线索图标。
BIN细节→提示"您的银行卡可以请求3 DS"。
金额/货币:显示当地货币和转换为注销货币(如果不同)。
自动填充
支持浏览器"autocomplete" (cc-number, cc-exp, cc-csc, name)。
保存方法(经同意)→令牌化;澄清"我们不保留PAN。"
错误
线索而不是"form-wide"。1行消息:发生了什么以及该怎么做。
拆分硬(invalid PAN)和软(issuer unavailable)错误-重复策略取决于此。
4)方法选择: "白色架子",非展示
首先是推荐的(具有高AR的钱包/本地APM),然后是"其他方法"。
通过GEO/验证隐藏非操作方法。
本地化图标/标题;按输出显示ETA(如果是单一系统中的存款+输出)。
对于卡片,BIN检测器上的Visa/Mastercard/MIR/AmEx徽章。
5)3 DS UX: 如何不是"杀死"转换
缺省的frictionless,挑战-仅在风险/策略的情况下。
将3 DS嵌入调制解调器中,不作为新窗口。
清晰的预期: "银行可能会要求确认--让手机靠近。"
失败安全:超时→建议重复或切换到替代方法。
保存上下文:3 DS完成后,我们将返回同一步骤,而不会丢失输入的数据。
6)故障和恢复(故障恢复)
软扣号:"暂时无法使用银行/限制"提示+重复按钮;如果重播没有帮助-尝试其他方法(提供A2A/钱包)按钮。
硬性规定:不在同一路线上提供中继服务;显示安全替代品(本地APM)。
保存金额/货币和您选择的奖金包-不要强迫您重新输入。
在移动上-不要隐藏系统背面;在URL/Storage中保持状态。
7)佣金透明度和退款政策
如果在押金上有fee或DCC-在确认之前显示:"费用为X%/Y fix,总数为Z"。
Same-method和"返回来源":简短文本"我们将存款带到存款来源的同一地方,直至净额"。
规则参考-在单独的图层(sheet)中,不从付款步骤中删除用户。
8)本地化,货币,语言
通过Accept-Language/IP/KYC自动语言,但保持明确的切换。
按位置格式化数千/十进制(1,234.56 vs 1,234。56).
本地支付详细信息(CPF/PIX密钥、IBAN、计费地址)-仅适用于此国家/地区。
3 DS/代码截止日期的日期/时间是按地点(24 h vs 12 h)。
9)钱包和one-tap
Apple Pay/Google Pay:仅在支持的设备/浏览器上显示。在金额卡上单打。
系统缝合(本机表)-最快;不要隐藏金额/货币。
"保存"的卡/钱包展示:主要徽标,最后的4个到期-警告"更新日期"。
支持network tokens以实现稳定的重复支付/回收。
10)可用性和性能
A11y:焦点样式,对比,"aria-labels",支持3 DS/表格的屏幕阅读器。
键盘导航和无陷阱的"tab-order"。
对于第一个交互式,loading <2 c,骨架代替空白屏幕。
离线稳定:如果网络"下降"到3 DS-一个清晰的消息和安全重播。
11)反友好UI(无"燃烧"转化)
柔和的步骤:ZIP/邮件请求,DOB,自拍/KUS-风险而不是全部。
Mismatch背光(BIN国家/地区vs IP/KYC)-不公开内部逻辑("似乎不支持当前银行")。
限制UI中的尝试次数、重播前的计时器、进度指示器。
12)微型文稿(示例)
PAN: "16-19位数字,没有空白-我们将添加。"
CVV:"卡背面/面部的3-4数字"。
软错误: "银行暂时没有回应。再次尝试或选择不同的方法。"
硬错误: "银行拒绝了操作。选择另一种付款方式。"
3 DS: "确认银行应用程序中的操作-这需要~ 10-20秒。"
13)移动模式
数字字段的Numeric-keyboard,焦点自动转换。
Sticky酒吧"总计注销/继续"。
支持深链接3 DS到银行应用程序。
确认的Haptic feedback;不要滥用。
14)支付方案和flow选项
快速存款:默认方法(最后一个成功令牌),1个屏幕。
"无注册"→ KYC付款后(在允许的情况下):将提高顶级功能,但必须提高退款政策和限制。
组合奖金+押金:分别显示存款净额和奖金;不要隐瞒重新组合的条件。
15)度量标准和dashbords(最低)
AR/DR通过方法/地理/通道/设备。
3DS pass & liability shift, soft-decline share.
Funnel: View→MethodPick→Details→3DSStart→3DSSuccess→Paid.
重置桉例(页上事件):关闭、字段错误、超时。
Latency p95/p99按阶段(渲染,输入,3 DS,确认)。
成本随附和占用率%(用于影响路由的UX更改)。
Mobile vs Desktop: AR差距和延迟。
16)实验(简称)
按用户随机分层,按GEO/BIN/方法分层。
Guardrails: CBR/Refund, AR阈值,latency.
测试:方法顺序,错误文本,3 DS调制解调器vs redirects,快速流通,自动完成,掩盖。
如果浮动改变方法/PSP选择,请考虑全部成本(fees/FX/serve)。
17)屏幕模板(wireframe-level)
A.方法选择(移动)
标题: "付款方式"
卡: Apple Pay/Google Pay/Local钱包/卡
标签: "快速","推荐",ETA输出(如果相关)
本地货币+金额
B.卡片表格
字段: PAN, EXP, CVV,持有人姓名
Checkbox"保存卡快速支付"(附说明)
信息块: 可以向银行提出确认请求
按钮: "支付X{货币}
C. 3 DS调制解调器
步骤: "等待银行确认"+计时器+"重复"按钮"
"选择其他方法"链接(保存总和和上下文)
D.错误/替代方桉
按故障类型发送消息
CTA 1: "重复"(软)
CTA 2: "通过[本地方法]付款"
18)最佳实践(简称)
1.首先是快速导轨(钱包/A2A),然后是卡;隐藏不相关的方法。
2.软的inline验证,完成的错误消息,没有重新启动。
3.3 DS在调制解调器,frictionless默认,清晰的期望和计划B。
4.在发生故障和返回时保存状态,单击直到重播。
5.本地化:货币/格式/字段;在确认前出示佣金。
6.移动第一设计:数字键盘,sticky-CTA,顶部快速方法。
7.可用性和性能-不可选。
8.反流氓的风险而不是全部。
9.每个步骤的遥测+故障漏斗和原因。
10.用guardrails和全价进行实验。
19)实施支票
- GEO方法图和显示顺序。
- 伪装/验证PAN/EXP/CVV,"autocomplete"。
- BIN特点和品牌,3 DS的线索。
- 3 DS调制解调器带有计时器和倒退。
- Retry for soft decline, hard decline的替代品。
- 透明佣金和same-method政策。
- 本地化:语言、货币、格式、本地字段。
- One-tap/钱包,保存的方法,network tokens。
- A11u/表演(LCP/TTI),骨架。
- Dashbords:AR/DR,3 DS,funnel,latency,故障原因。
- 计划A/B和guardrails,用于分析的数据带。
总结
Checkout转换是小事的总和:快速的"第一屏幕"方法,正确的形状和线索,整洁的3 DS升级,胜任的故障处理器和诚实的佣金透明度。专注于速度、清晰度和灾难恢复,通过步骤测量所有内容,并通过受控实验实施更改-因此您将提高AR,减少故障并保持玩家和监管机构的信任。