结账流程优化做了很多轮,用户回头改一次收货地址,前面填的全没了
本文目录
- 结账流程里其实有两条路,你只设计过其中一条?
- 首填是一条线,返工是一张图
- 三句话就能判出一条路有没有被设计过
- 那个变成21的数量框,是怎么来的
- 为什么97%这个数字本身值得琢磨
- 先把两条路并排放一次
- 返工其实有四种,混在一起谈会得出错的结论
- 第四种最容易被做成死路
- 一个会误导人的指标:平均结账时长
- 返工在漏斗报表里为什么天生看不见?
- 这不是埋点做得差,是漏斗这个模型的定义
- 五个不用加埋点就能算出来的返工指标
- 五个指标的共同点
- 一个反例:什么时候返工率高反而是好事
- 会话回放里全都有,为什么还是没人发现?
- 三种最常见的错误归因
- 返工率的横向基准怎么建
- 移动端的返工,难在三个桌面上不存在的地方
- 移动端的返工率天生更高,多高才算不正常
- 法律从2000年起就要求能改错,为什么没人把它当设计要求?
- 欧盟电子商务指令第十一条第二款
- 更狠的是它把这件事拆成了两条义务
- 另一部指令管的是“别让他走到最后才发现”
- 还有一条把措辞写死了,罚则是合同不成立
- 那为什么没人拿它当设计要求?
- 对出海独立站的实际影响
- 法条里用的是“技术手段”,不是“页面”
- 把法条翻成验收用例的对照表
- 成员国转化后的差异要注意
- 无障碍标准把结账页点名了,判据却是个三选一?
- WCAG 3.3.4说的是什么
- 这份文档给的第一个例子,就是订单确认
- 为什么“三选一”这个结构本身是个陷阱
- 还有一条被忽略的充分技术
- 无障碍这条线的正确用法
- 三选一里的“可撤销”,为什么电商几乎没人做?
- 一个折中做法:把窗口开在流水线之前
- 顺便看一眼相邻的那几条准则
- 这条链在合规上正在变硬
- 把改答案做成标准件的规范只有一份,为什么出自一个政府的设计系统?
- 四条逐字要求
- 一条一条对照
- 还有一条,和商品页那套规矩是同一条
- 为什么是政府服务先把这件事做了?
- 直接可抄的部分
- 一个容易做歪的地方
- 汇总页的六个细节,做错一个就废一半
- 什么时候不该用这个模式
- 购物车页其实就是一个汇总页
- 表单标准里65个字段名,为什么没有一个是关于改的?
- 先说这份清单是什么
- 54个字段名,覆盖得相当细
- 然后是那个空缺
- 唯一的例外,恰好证明了这件事
- 把这个逻辑往外推一层
- 顺带说一个能马上用的配置
- 一份可以直接抄的结账表单字段配置
- autocomplete和inputmode的分工别搞混
- 配好之后怎么验
- 把常见的十个结账问题按填和改重新分一次类,会看到什么?
- 先看这张表
- 数一下就能看出问题
- 逐条说几个容易分错的
- 重新分类之后,优先级会变
- 游客结账那一条,其实也有返工的一面
- 必填与选填的第三种标注法
- 电话号那句解释,三种写法的差别
- 校验在什么时候跑,直接决定返工有多痛
- 改一个字段,会连带动几个数?
- 先看收货地址这一个字段能牵动多少
- 这里有个反直觉的点
- 正确的做法只有一条
- 受限商品是这套机制的压力测试
- 怎么把连带关系建成一张表
- 顺手能捡到的一个副产品
- 连带变化怎么提示,三种形态对照
- 币种和汇率是隐藏的第九项
- 优惠券被静默移除,是这里面最脏的一种
- 把这张表做成回归测试
- B2B报价单是同一个问题的放大版
- 一次被用户好评盖住的失手,问题到底出在哪?
- 那个站
- 预警是怎么来的
- 三个月后才反应过来
- 为什么这种预警最难被识别
- 修好它的代价,是失去一个正向证据
- 后来做的三件事
- 为什么这件事没法用A/B测试
- 酒这个品类另外两个坑
- 基线怎么记,具体到字段
- 怎么落地:一个验收动作、一个卡点、三条边界
- 验收动作只有一个,五分钟
- 卡点挂在哪里,比挂什么更重要
- 清单怎么排优先级
- 三条边界,提前说清楚
- 三十天能做完的一份排期
- 卡点落地时会遇到的三种阻力
- 跨团队的分工怎么切
- 有一件事别做
- 购物代理帮用户下单的时候,返工路径去哪了?
- 这对现在该怎么做有两个具体影响
- 一个不需要等未来就成立的理由
- 常见问题解答
- 结账流程优化如果只能先做一件事,应该做哪个?
- 提交前多加一页确认,会不会因为多一步反而降低转化?
- 一步式结账和多步式结账,哪一种对修改更友好?
- 允许用户在下单后自助修改地址,会不会被人钻空子?
- 欧盟那几条指令,对只做美国市场的独立站还有参考价值吗?
- 用Shopify或者WooCommerce这类平台,能改到什么程度?
- 怎么说服老板给返工路径排资源?
- 权威参考资料
摘要:结账页上其实有两条路。一条是从空白填到完成,另一条是回头把某个已经填好的东西改掉。前者被设计稿画过、被验收用例测过、被漏斗报表统计过;后者三样都没有,它只是前者的副产品。用户在结账里真正卡住的时刻,绝大多数落在第二条路上——改数量、改地址、改配送方式、改支付方式、修一个报错。这篇把这两条路拆开讲:为什么返工在漏斗里天生隐形,为什么欧盟从2000年起就把它写成了法定义务,为什么全世界唯一一份把它做成标准组件的规范出自一个政府服务的设计系统,以及一个不需要任何埋点、五分钟就能做完的验收动作。
先说一个多数人不会当回事的观察。
你打开自己站的结账页,从头到尾填一遍,很顺。姓名、邮箱、地址、电话、卡号,一路下来没什么可挑剔的,甚至比同行做得干净。这个测试你做过几十次,团队每次改版也是这么验的。
现在换一个动作:填到最后一步,然后回去把收货地址从加州改成得克萨斯。
大概率会出事。可能是运费悄悄从免运费变成了18.5美元而页面没有任何提示;可能是配送日期从周三变成了下周一,但那行小字在你视线之外;可能是你点了返回,前面填好的电话号码被清空了;也可能是最惨的那种——改完之后系统告诉你,我们不往这个州发这类商品。
这两个动作的差别,就是这篇文章要讲的全部内容。
结账流程里其实有两条路,你只设计过其中一条?
把结账拆开看,用户在上面做的事情可以归成两类。
第一类是首填:某个字段现在是空的,用户把它变成有值。第二类是返工:某个字段现在已经有值了,用户要把它变成另一个值,或者干脆清掉。
这两件事听上去只差一个前置状态,实际上是两个完全不同的问题。
首填是一条线,返工是一张图
首填有个非常好的性质:它是线性的。空白在前,完成在后,中间的顺序由你决定。你可以画一张流程图,从第一屏画到下单成功,每一步的输入和输出都是确定的。设计稿能画出来,验收用例能写出来,埋点能按步骤打。
返工没有这个性质。它的起点是“页面上已经有N个字段有值了”,而N个字段各自可能处在有值、无值、有值但格式错、有值但业务上不再成立这四种状态里。你要把它画成流程图,得先枚举出这些状态的组合。
这就是为什么返工路径几乎从来没有被单独设计过。它不是被忽略了,是它在成本结构上就画不出来:首填是一条线,画一张稿就够;返工是一张图,节点数量随字段数指数增长,你画多少张稿都覆盖不完。
于是它变成了一个副产品——首填路径做完,返工路径就自动“有了”,因为字段总归还能点进去改。能不能改得动、改完对不对,没人负责。
三句话就能判出一条路有没有被设计过
这套判据用了很久,三句,每句都要能当场答出来:
- 这一步用户改主意或发现填错了,回来改的那个动作是什么?说不出具体的点击序列,就说明没设计过。
- 这个“改”,是不是等于把第一次重做一遍?如果是,成本一定比第一次高——因为第一次面对的是空白,改要先把旧值清掉。
- 改完之后,前面已经定下来的东西会不会跟着变,变了他知不知道?这一句杀伤力最大,后面有整整一节讲它。
第三句之所以最狠,是因为前两句的问题用户至少能看见——按钮难找、输入框难删,他知道自己在跟什么较劲。第三句的问题他看不见:运费在他眼皮底下改了,配送日期换了一个,可用的支付方式少了两个,页面上什么都没说。
那个变成21的数量框,是怎么来的
有一个在结账研究里被反复记录的场景,特别适合当这一型的标本。
用户想把购物车里某件商品的数量从1改成2。他点进数量框,输入2。结果框里显示的是21。
为什么?因为框里原本的“1”还在,光标落在它后面,输入的2就接到了后面。用户要做对这件事,正确动作是:点进去、全选或退格删掉1、再输入2、再触发更新。四步。而他脑子里的动作只有一步:把1换成2。
注意这个失败长什么样。它不是没做,是做了,做的是首填那一套——一个数字输入框,用来接收用户输入的数量,从产品需求的角度挑不出毛病。问题只出在它面对的从来不是空白:购物车里的数量字段永远已经有值了,默认就是1。
这个字段的真实使用场景百分之百是返工,而它的交互设计百分之百按首填做的。公开的结账基准研究里,这一项的不达标比例是97%——几乎所有站都错。而它的修法便宜到荒唐:加一对加减按钮,或者点进去自动全选。
为什么97%这个数字本身值得琢磨
一项设计缺陷如果只有三成站中招,那多半是执行水平的差距。如果97%都中招,那就不是执行问题了,是整个行业的默认做法本身有问题。
没有人开会决定“我们要让改数量变难”。这个结果是自然长出来的:需求写的是“支持修改商品数量”,设计给的是数量输入框,前端实现的是受控组件,测试用的是空购物车加一件商品然后检查数量是不是1。四道工序全部通过,没有一道会碰到那个21。
后面几节会反复看到这个形状:返工路径的失效不是因为有人做错了,而是因为流程里的每一道工序在设计上都只朝向首填。
先把两条路并排放一次
| 维度 | 首填路径 | 返工路径 |
|---|---|---|
| 起点状态 | 字段为空,唯一确定 | 字段已有值,状态组合无穷 |
| 能不能画成稿 | 能,一条线 | 难,一张图 |
| 验收用例 | 天然存在 | 要专门写,通常没写 |
| 漏斗埋点 | 每步一个事件 | 不产生新事件 |
| 用户心里的成本 | 预期之内,我知道我在填表 | 预期之外,我以为这是一秒钟的事 |
| 失败后的反应 | 继续填,可能变慢 | 直接走人,或者去找客服 |
| 修复难度 | 常见问题都有成熟解法 | 要先承认它是一件独立的事 |
最后一行是关键。返工路径的修复难点不在技术,在于它得先被当成一件事。只要它还挂在“结账体验优化”这个大筐里,它永远排在最后,因为筐里其他条目都更容易描述、更容易演示、更容易在评审会上通过。
返工其实有四种,混在一起谈会得出错的结论
把“用户回头改一个东西”再往下切一层,会发现它至少有四种完全不同的成因。这四种要分开看,因为它们的解法不一样,甚至方向相反。
| 类型 | 触发原因 | 用户心态 | 正确的解法方向 |
|---|---|---|---|
| 改主意 | 看到了新信息(运费、日期、总价) | 主动、冷静,这是决策的一部分 | 让改这件事变便宜,不要试图阻止 |
| 填错了 | 手滑、记错、控件不好用 | 着急,想快点修掉 | 报错说清具体错在哪,光标落到出错处 |
| 信息在别处变了 | 库存没了、优惠券过期、地址不可达 | 困惑,不知道自己做错了什么 | 把变化和原因一起说,给出下一步 |
| 被系统拒绝 | 风控拦截、支付失败、地区禁售 | 受挫,容易直接放弃 | 保留已填内容,只让他改需要改的那一项 |
最容易被搞混的是第一种和第二种。很多团队把所有返工都当成“用户填错了”,于是解法全部指向防错——加更多校验、加更强的格式限制、加二次确认。
但改主意那一类根本不是错误,它是用户在正确地做决策。你给他加校验和确认弹窗,等于在惩罚一个正在认真考虑的人。这两类的解法方向刚好相反:一个要减少摩擦,一个要增加确认。分不开就会互相抵消。
第四种最容易被做成死路
被系统拒绝这一类值得单独说,因为它的失败形态最惨。
用户填完全部信息,点提交,支付被风控拦下。这时候大部分站的做法是把他弹回某一步,而弹回去之后已填的内容常常只保住了一部分——卡号肯定不留(这个对),但地址、电话、配送选项也一起没了(这个不对)。
他现在要做的事情是:为了换一张卡,把整张表重填一遍。而他刚刚已经经历了一次拒绝,情绪本来就不好。
正确的做法是把这次失败限制在它自己的范围里:只让他改需要改的那一项,其余全部原样保留。这件事在支付返回这个场景下还有额外的技术障碍,因为跨站跳转回来时会话可能已经不在了——付款返回后购物车变空说的就是这一类,那不是产品设计的问题,是浏览器策略变了之后没跟上。
一个会误导人的指标:平均结账时长
顺着这个话题说一个坑。很多团队用“平均结账完成时长”来衡量结账体验,越短越好。
这个指标在首填路径上是成立的:填得快说明字段少、自动填充配得好、控件顺手。但一旦把返工算进来,它就开始骗人了。
原因有两个。第一,放弃的人不进这个平均值——他们没完成,没有结束时间戳。所以一个把用户逼走的站,平均时长反而会很好看。第二,把返工做顺之后,会有更多本来会放弃的人留下来完成,而这些人的完成时长天然偏长,平均值会往上走。
于是出现一个荒诞的局面:你把体验改好了,指标变差了。要避免这个,得同时看两个数——完成时长的中位数(反映首填效率)和返工发生率(反映第二条路的顺畅程度),单看任何一个都会被带偏。
返工在漏斗报表里为什么天生看不见?
假设你的结账是四步:账号、地址、配送、支付。报表上写着地址步到配送步的转化率是89%,看着挺健康。
现在把一个真实用户的动作序列摊开:他进了地址步,填完,前进;到了配送步,看见运费不对,返回地址步;改了城市,前进;配送步的日期又变了,再返回;改成另一个地址,前进;这次认了,继续。
他在地址步进出了三次,最后成功前进。报表怎么记的?进入地址步1次,前进到配送步1次,转化率100%。
这不是埋点做得差,是漏斗这个模型的定义
漏斗统计的是阶段之间的通过率,为了让分母有意义,同一个会话在同一个阶段的重复进入必须去重,否则一个来回跳了五次的人会把转化率算成20%,报表立刻失真。
所以去重是对的,是这个模型能用的前提。代价是:返工这个行为在漏斗里没有位置。它不产生新阶段,不产生新事件,它是同一个阶段的第二次进入,而这一次进入按定义被丢掉了。
结果就是那个很多人熟悉的分裂感:数据看着还行,体感很糟,客服那边天天有事。三方说的其实是同一件事,只是漏斗那一方用的口径把最难受的部分过滤掉了。
五个不用加埋点就能算出来的返工指标
这五个不需要动前端,多数站现有的日志、订单表和工单系统里就有。按上手难度从易到难排:
一、下单后短时间内要求改单的订单占比
把客服工单里“改地址”“改数量”“加一件”“改配送方式”这四类,按下单后多久提出来分个桶。下单后30分钟内提出的改单请求,几乎全部是站上没做到的返工。
这个指标最大的好处是它完全免费——工单系统里已经有了,只是从来没人按“距下单时长”这个维度切过。它的说服力也最强:每一条都是一个具体的人,在具体的时间,为了一件具体的事,被迫离开你的站去找人工。
二、同一订单在支付网关侧的重复发起次数
网关的日志里,一笔订单对应几次payment intent或者几次授权尝试,是现成的。次数大于1,意味着用户在支付这一步返工过。
⚠️口径修正:要先排掉3DS验证和银行侧的正常重试,这两类会制造大量假阳性。只看“用户主动重新提交”的那部分,通常看请求间隔——间隔在几十秒到几分钟之间且卡号后四位变了的,才算真返工。
三、购物车里数量被改过的订单占比,对比数量大于1的订单占比
这两个数应该差不多。如果“最终数量大于1”的订单占12%,而“数量字段被修改过”的订单只占3%,那中间那9%去哪了?
答案通常是:他们不是改的数量,是把同一件商品重复加了几次购物车——因为加购按钮比数量框好用。这是一个非常干净的信号,说明数量选择器难用到了用户宁可绕路的程度。
四、表单最后一次校验失败到成功提交的时间差分布
如果你的前端有校验日志(哪怕只是打到控制台再采样上报),把每个会话里最后一次校验失败的时间戳,减去下单成功的时间戳。
这个差值的长尾比中位数有信息量得多。中位数一般是几秒,正常。真正要看的是超过90秒的那一批占多少——那些人不是在改一个字符,是在猜你到底想要什么格式。这和报错文案要说清具体错在哪是同一件事的两端。
五、地址字段的修改次数分布
不是“填了几次”,是“同一个会话里,地址相关字段被写入了几次”。这个数在前端状态里就有,上报一个计数不需要新建埋点体系。
⚠️口径修正:自动填充会一次性写入五六个字段,必须按“一次连续写入算一次”折叠,否则用了浏览器自动填充的人全部变成高返工用户,结论直接反过来。
五个指标的共同点
它们都不测“有多少人完成了”,只测“有多少人在同一件事上做了不止一次”。这是一个和转化率正交的维度——两个转化率完全一样的站,返工率可以差三倍,而差出来的那部分全部体现在客服成本、退款率和第二次购买意愿上。
还有一个不那么直观的好处。返工率这个指标不需要跟任何人争论用户体验好不好。它是个计数,它只回答“同一个人在同一个字段上写了几次”。这类不需要论证的证据,在争资源的时候比任何定性描述都好使,这一点和购买路径上那些看不见的摩擦力是一个道理。
一个反例:什么时候返工率高反而是好事
别把这个指标当成越低越好。有两类情况下返工率高是正常的,甚至是健康的。
一是需要用户比较和试算的品类。买保险、订机票、配大件家具,用户本来就会来回改参数看结果,那是决策过程不是失败。这类站要看的是“改完之后他有没有继续”,不是“他改了几次”。
二是你刚刚把返工路径做好的时候。以前改不动所以没人改,现在能改了所以有人改,返工率会先涨一波。这时候要盯的是配套的下降指标:客服改单工单、支付重复发起、下单后取消。这几个跟着降,那波上涨就是对的。
会话回放里全都有,为什么还是没人发现?
说到这儿总会有人问:我们装了会话回放工具,用户在结账页来回跳这种事,录像里看得一清二楚,怎么会发现不了?
工具确实拍到了。问题出在没有人有理由去看那些录像。
会话回放的常规看法是按结果筛选:筛出放弃的会话,看看他们在哪一步走的。这个筛法很自然,也很有效——对首填路径。但返工发生在完成了的会话里的比例同样很高,那些人最后买了,所以他们不在筛选结果里。
更麻烦的是时长。一个来回改了三次地址的会话,录像长度可能是八分钟。而分析师一天能看的录像是有限的,八分钟的录像天然排在两分钟的后面。返工越严重的会话,越不容易被看到。
要破这个,筛选条件得换成行为型的:筛“在同一个结账步骤上出现过两次以上”的会话,不管它最后成没成。这个条件多数工具都支持,只是默认不会有人这么筛。
三种最常见的错误归因
返工率高的站,报表上的表现通常是结账完成率略低于同行,但看不出具体是哪一步的问题。这时候的归因往往会滑向三个方向,三个都不对:
| 归因 | 听起来的理由 | 为什么不对 | 怎么证伪 |
|---|---|---|---|
| 怪支付网关 | 支付步流失最多,肯定是通道有问题 | 支付步是最后一步,前面所有的疲惫都在这里结算 | 看网关侧的成功率,通常是正常的 |
| 怪流量质量 | 广告带来的人本来就不精准 | 加购率正常就说明意向是真的 | 比自然流量和广告流量的结账完成率,差距通常没那么大 |
| 怪价格 | 用户嫌贵,走到运费那一步就不买了 | 价格问题应该在商品页就流失,不会拖到结账第三步 | 看流失点分布,集中在中段而不是首尾的多半不是价格 |
第三行那个判据挺好用:价格敏感造成的流失通常发生在价格第一次完整出现的那一刻,往后每多走一步,价格因素的解释力就弱一分。如果流失高峰在填地址和选配送这一段,那基本可以排除价格。
返工率的横向基准怎么建
没有行业公开数据可以对标,但可以在自己站内部建一套相对基准,成本很低:
- 按字段建。同一个站里,地址字段的返工率和邮箱字段的返工率一比,就知道哪个控件有问题。这是最干净的对比,因为用户群完全相同。
- 按设备建。同一个字段,移动端和桌面端的返工率比值。移动端天生高一点是正常的,高出三倍以上就是控件在小屏上塌了。
- 按新老客建。老客的返工率理论上应该更低(他们的信息已经存过),如果反而更高,说明你的地址簿或者历史信息回填做错了——这种情况比想象中常见。
第三条是最容易出意外的一条。见过一个站,老客的地址返工率是新客的两倍,查下来是因为地址簿默认选中了最早那一个而不是最近用过的那一个。这个默认值改一行代码,返工率当天就下来了。
移动端的返工,难在三个桌面上不存在的地方
同样一个改地址的动作,在手机上比在电脑上难得多,而难的原因有三条是桌面完全没有的。做移动端返工排查的时候,这三条要单独看。
软键盘吃掉了半屏,而变化发生在被吃掉的那一半
用户点进邮编框,软键盘弹出来,屏幕可用高度少了将近一半。他改完邮编,运费那一行更新了——而运费那一行此刻在键盘下面。
他收起键盘才看得见,可收键盘这个动作通常伴随着页面滚动,等他抬头,已经不知道刚才哪个数变了。提示元素如果只在原地闪一下,在移动端等于没提示。
解法是把关键变化的提示做成持久的而不是短暂的——变化标记留在那儿,直到用户下一次交互才消失。桌面上可以用几秒后淡出,移动端不行。
返回手势和页面返回不是同一件事
安卓的返回键、iOS的边缘侧滑,用户拿它们当“回到上一屏”用。而在一个多步结账里,这两个手势触发的可能是浏览器历史返回,可能是关闭一个浮层,也可能是退出整个结账。
三种结果长得不一样,而用户的预期只有一个。猜错的代价是他丢了填到一半的东西。
这一条在App里更复杂,因为原生返回栈和内嵌页面的历史栈是两套东西。App容器的默认行为和网页不一样这件事,在结账这种多步流程里表现得最明显——同一份前端代码,装进App之后返回行为整个变了,而多数团队直到用户投诉才发现。
点得到不等于改得到
桌面上一个14像素的编辑链接,鼠标点起来毫无压力。同样的链接在手机上,手指的实际接触面积远大于它,旁边如果还有别的可点元素,误触率会很高。
而误触的后果在返工场景里格外糟:用户想点“修改地址”,点到了旁边的“修改配送方式”,进去发现不是他要的,退出来——他现在多做了两次操作,而且不确定刚才有没有误改什么。
这就是为什么修改入口在移动端要做成有足够点击区域的独立元素,而不是一行文字里的一个链接。这跟同一根手指要同时负责太多种意图是一回事:屏幕上每多一个可点区域,误触的账就要重算一遍。
移动端的返工率天生更高,多高才算不正常
前面说过用移动与桌面的返工率比值做内部基准。给个粗口径:同一个字段,移动端返工率是桌面端的一点五到两倍属于正常,超过三倍就是控件在小屏上塌了。
塌得最狠的通常是三类控件:长选项列表的下拉框、需要精确点击的日历选择器、以及带格式掩码的输入框(信用卡和电话)。这三类在桌面上都好用,在拇指操作下全部退化。
法律从2000年起就要求能改错,为什么没人把它当设计要求?
这一节的材料是直接去翻的法条原文,翻完之后有点恍惚——因为要求写得比任何一份产品需求文档都清楚,而且已经写了二十六年。
欧盟电子商务指令第十一条第二款
欧盟1998年起草、2000年通过的电子商务指令2000/31/EC,第十一条第二款原文是这样的:
成员国应当确保,服务提供者向服务接收方提供适当的、有效的、可访问的技术手段,使其能够在下单之前识别并纠正输入错误。
三个形容词,一个都不多余。
适当的——不能拿一个技术上存在但没人找得到的入口交差。有效的——它得真的能改成,不是点进去发现只读。可访问的——这个词在欧盟语境里有特定含义,指的是残障用户也能用,它把无障碍要求直接焊进了这条义务里。
然后是那个被写死的时点:在下单之前。不是下单后走售后,不是联系客服,是提交那一下之前,站上必须有一条能走通的纠错路径。
更狠的是它把这件事拆成了两条义务
同一部指令的第十条第一款,列了服务提供者在用户下单前必须明确告知的四项信息。第c项是:
在下单之前用于识别和纠正输入错误的技术手段。
看清楚这是两条不同的义务。第十一条要求你提供纠错手段,第十条要求你事先说明这个手段在哪、怎么用。
这个拆分非常准。因为“能改”和“知道能改”真的是两件事,而后一件更容易被漏掉:结账页最后一屏的角落里有个不起眼的“编辑”链接,技术上满足第十一条,但用户根本不知道它存在,第十条那一半就是空的。
顺带说,第十条第一款第a项要求告知缔结合同要走的各个技术步骤——这是结账进度条的法律来源。它不是一个视觉装饰,它是一条信息披露义务。
另一部指令管的是“别让他走到最后才发现”
2011年的消费者权利指令2011/83/EU第八条第三款,只有一句话,但这句话直接管住了跨境独立站最常见的一类结账事故:
交易网站应当最迟在订购流程开始时,清楚易读地标明是否存在配送限制以及接受哪些支付方式。
把这句话翻译成产品语言:用户不能走到第三步才发现你不发货到他那儿,也不能填完卡号才发现你不收他这张卡。
这两件事一旦发生,用户面对的就不是“改一个字段”,而是“整个流程作废,从头再来,还不一定有得来”。它是返工里最贵的那一档,而法条给的解法是:把它提前到流程开始之前,让它根本没机会变成返工。
还有一条把措辞写死了,罚则是合同不成立
同一条的第二款,管的是最后那个按钮:
经营者应当确保消费者在下单时明确知悉该订单意味着付款义务。如果下单需要激活一个按钮或类似功能,该按钮应当以易读的方式仅标注“下单并付款”或者相应的、能明确表明下单即产生付款义务的措辞。经营者未遵守本项的,消费者不受该合同或订单的约束。
最后半句是整段里最重的。不是罚款,不是整改,是合同直接不成立——用户可以不认这笔单。一个按钮上的文案写错了,交易的法律基础就没了。
把三条放在一起看,欧盟其实规定了返工路径的三个关键位置:流程开始前把死条件说清楚(第八条第三款)、流程当中给纠错手段并且告诉用户它在哪(第十一条第二款加第十条第一款c项)、流程结束那一下让他明确知道自己在做什么(第八条第二款)。
那为什么没人拿它当设计要求?
保哥问过几个做跨境的朋友,答案出奇一致:这些条款在公司里归法务,法务的验收方式是看条款有没有写进用户协议。
于是就有了那个荒诞的结果:网站底部的服务条款里有一段话,写着“用户可在提交订单前检查并修改所填信息”,这段话本身合规,法务打勾通过。而站上那个数量框,还是改不动。
这是一类特别典型的合规失效——义务的载体被搬到了一个它管不着的地方。第十一条第二款要求的是技术手段,不是一句声明;把技术手段的义务用文字声明去满足,形式上过了,实质上一点没做。这个模式和商品页字段对齐那件事是同构的:三层披露里最便宜的那一层总是先被做掉,然后被当成整件事做完了。
对出海独立站的实际影响
| 条款 | 它管的动作 | 常见的不合规形态 | 改起来的成本 |
|---|---|---|---|
| 2000/31/EC第10(1)(a) | 告知缔约的技术步骤 | 没有进度指示,或进度条不反映真实步数 | 低 |
| 2000/31/EC第10(1)(c) | 告知纠错手段在哪 | 有编辑入口但不说明,用户找不到 | 低 |
| 2000/31/EC第11(2) | 提供可用的纠错手段 | 只能返回上一步重填,或某些字段锁死 | 中到高 |
| 2011/83/EU第8(2) | 下单按钮措辞 | 写“提交”“继续”“完成订单”而不含付款义务 | 极低 |
| 2011/83/EU第8(3) | 配送限制与支付方式前置 | 走到配送步或支付步才拦下来 | 中 |
最后一列值得看一眼:五条里有三条的改动成本是低或极低,而它们恰好是最容易被漏掉的三条。不是因为难,是因为没人负责。
法条里用的是“技术手段”,不是“页面”
再回去看一眼第十一条第二款的措辞,有个细节值得琢磨:它要求提供的是技术手段,不是某个页面,也不是某段说明文字。
这个用词是有意的。1998年起草这部指令的时候,谁也不知道二十多年后的结账页长什么样,所以立法者刻意避开了任何具体形态,只规定这件事必须能被完成。
好处是它到今天还完全适用。不管你的结账是一屏还是五步,是网页还是App,是自己写的还是平台托管的,判据都只有一句:用户在按下最后那个按钮之前,有没有一条能走通的路,把已经填错的东西改过来。
坏处是它太抽象了,抽象到法务读完之后不知道该验收什么,于是退回到验收文字条款。前面说过这个失效,这里补一句解法:把三条法条翻译成可勾选的检查项,交给测试而不是法务。
把法条翻成验收用例的对照表
| 法条要求 | 可执行的验收动作 | 通过标准 |
|---|---|---|
| 提供纠错的技术手段 | 在最后一步之前,逐个字段尝试修改 | 每个字段都改得到,且改完值真的变了 |
| 纠错手段要有效 | 改完之后提交,检查订单里存的是新值 | 没有出现改了但没生效的字段 |
| 纠错手段要可访问 | 只用键盘走一遍修改流程 | Tab能到达每个修改入口,焦点可见 |
| 事先告知纠错手段 | 在下单前的界面上找“可以修改”这个信息 | 不用摸索就能知道哪里能改 |
| 告知缔约的技术步骤 | 数流程实际步数,对比页面上标的步数 | 两个数一致,且当前位置可见 |
| 配送限制前置 | 用一个禁运地址走一遍 | 在订购流程开始时就被告知 |
| 支付方式前置 | 在流程开始处找可用支付方式的说明 | 不用走到支付步就能看见 |
| 下单按钮措辞 | 读最后那个按钮上的字 | 明确包含付款含义,不是“提交”或“继续” |
这张表的价值在于它把八条抽象义务变成了八个二十分钟就能跑完的动作。跑完之后拿到的是八个是或否,而不是一段需要解释的判断。
第三行那个“只用键盘走一遍”特别值得单独跑。它是所有检查项里最快出结果的一个——很多站的修改入口是个纯图标按钮,或者干脆是个绑了点击事件的div,键盘根本到不了。这一条一挂,“可访问的”这个要求就直接不成立,而它本来只需要换一个标签名。
成员国转化后的差异要注意
⚠️一个实操提醒:欧盟指令不是直接生效的法律,它要由各成员国转化成本国法。转化过程中细节会有出入,比如下单按钮的具体措辞,德国的实践比指令原文更严格,要求用的是明确表达付款义务的固定表述,写成“继续”是不行的。
所以真要落地到具体市场,最终以当地转化后的法条为准。但对于做设计和产品的人来说,按指令原文的标准做,各国转化版基本都能覆盖住——转化只会更严,不会更松。这跟做多市场支付方式配置时的思路一样:按最严的那个市场设计一套,比给每个市场各做一套省事得多。
无障碍标准把结账页点名了,判据却是个三选一?
另一条把返工写成硬要求的线索,来自一个多数电商团队不会去翻的地方:网页无障碍标准。
WCAG 3.3.4说的是什么
Web内容无障碍指南里有一条编号3.3.4的成功准则,级别是AA——不是最高的AAA,是绝大多数合规基线要求达到的那一级。W3C对3.3.4的官方释义文档原文是:
对于会为用户产生法律承诺或金融交易、会修改或删除数据存储系统中用户可控数据、或者提交用户测试答案的网页,以下至少一项为真:可撤销——提交是可以撤回的;已校验——用户输入的数据经过输入错误检查,并且用户获得纠正的机会;已确认——存在一种机制,可以在最终提交之前审阅、确认和纠正信息。
“会为用户产生金融交易的网页”,这就是结账页,没有第二种解释。
这份文档给的第一个例子,就是订单确认
3.3.4释义文档里的示例部分,第一条标题叫“Order confirmation”,内容是:
一家网络零售商提供在线购物。订单提交时,订单信息——包括所订购的商品、每件商品的数量、收货地址和支付方式——会被展示出来,以便用户检查订单是否正确。用户可以确认订单,也可以做出修改。
四个字段被逐个点名,其中三个正好是返工事故的高发区。而最后那半句“也可以做出修改”,是整份无障碍标准里离“返工路径”最近的一处表述。
顺带一提,这条准则还有个AAA级的加强版3.3.6,把适用范围从“法律与金融”扩大到所有需要用户提交信息的表单。判据一模一样,还是那三选一。
为什么“三选一”这个结构本身是个陷阱
这是读完之后最想说的一点,也是这一节真正的价值所在。
三选一意味着做任意一项就算达标。那么在一个要赶排期的团队里,会选哪一项?
当然是最便宜的那一项。三项的成本差距大得离谱:
| 选项 | 要做什么 | 工作量 | 它真正覆盖了什么 |
|---|---|---|---|
| 可撤销 | 下单后一段时间内允许自行取消或修改 | 最大,要动订单状态机和履约系统 | 全部错误,包括改主意 |
| 已校验 | 字段做格式校验,报错时提示怎么改 | 最小,前端就能做完 | 只有格式错误 |
| 已确认 | 提交前给一页汇总,每项可回改 | 中等,要能带值往回跳 | 格式错误加填错内容 |
几乎所有电商站选的都是“已校验”。它便宜、能演示、代码里就有,甚至框架自带。
问题在最后一列:已校验只覆盖格式错误。它能拦住“邮箱少了@”,拦不住“地址填成了旧家的地址”,更拦不住“我想把配送方式从快递改成自提”。而后两类才是返工的主体。
所以这条准则的实际效果是:它给了一个合规的达标口径,而这个口径可以被最不解决问题的那一项满足。不是标准写错了,标准的目的是给不同类型的服务留出实现空间。是我们在读它的时候,把“达标”当成了“做好”。
还有一条被忽略的充分技术
3.3.4的充分技术清单里,第一条编号G164,写的是:
提供一个明确的时间窗口,在此期间用户可以在提出请求之后修改或取消该请求。
这就是“下单后15分钟内可自助改地址”那类设计的规范出处。它被列为“充分技术”,意思是单做这一条就足以满足整条准则。
而它在电商里的实现率低到什么程度呢?这几年看过的独立站里,能在下单后自助改收货地址的,一只手数得过来。多数站的答案是“联系客服”——把返工完整地推到了站外,推给一个要付工资的人。这件事和发货前被拒掉的那次取消其实是同一笔账:省下的开发工时,会变成客服工时和退货运费,只是它们记在不同的科目下。
无障碍这条线的正确用法
⚠️提醒一句,别拿“无障碍能提排名”去说服人,因果链太长,被追问一次就崩。
它真正的用处是换量纲。“把提交前汇总页做出来能提转化”是一个要举证、要排实验位、要跟其他假设抢资源的提案;“结账页需要满足WCAG 3.3.4的AA级要求,我们目前只靠格式校验勉强达标”是一条合规待办。
两者要改的是同一块代码,走的是完全不同的两条通道。这个转换手法和网站无障碍改造的整套做法是一脉的:不要试图让无障碍去证明商业价值,让它待在合规这条线上,它在那里的说服力强得多。
三选一里的“可撤销”,为什么电商几乎没人做?
前面那张对照表里,可撤销这一项的工作量标了“最大”。展开说一下它到底难在哪,因为这个难处很典型。
让订单在提交后一段时间内可以自行修改或取消,卡住的从来不是前端,是订单状态机和履约系统的耦合。
多数电商系统的设计假设是:订单一旦创建就进入不可逆的流水线,支付、风控、库存扣减、生成拣货单、推给仓库或三方物流,一环扣一环。要在这条流水线上开一个可回退的窗口,等于要求前几个环节全部支持撤销和重放。
库存扣减要能回滚,支付要能部分退或改额,拣货单要能作废,已经推给三方的单要能撤回——而最后这一条往往不由你决定,取决于对方的接口给不给。
所以这不是一个前端能领走的需求。它是个系统性改造,而它的收益在报表上又不明显,于是永远排在后面。这就是为什么标准给了三条路,而所有人都走了最便宜的那一条。
一个折中做法:把窗口开在流水线之前
有个成本低很多的变通,思路是不去改流水线,而是在流水线开始之前加一个缓冲。
具体做法:订单创建后不立即推给履约,而是停留在一个待处理状态,比如两小时。这两小时里用户可以自助修改地址、联系方式,甚至取消。两小时之后再统一推单。
代价是发货节奏晚了两小时。收益是可撤销这条路彻底打通,而且不用动库存、支付和物流对接的任何一行代码。
对绝大多数不承诺当日发货的品类来说,这笔交易划算得离谱。真要压缩,可以把窗口设成动态的——加急订单十五分钟,普通订单两小时,节日季批量发货的时候按批次切。
顺便看一眼相邻的那几条准则
3.3.4不是孤立的,它前面还有三条,合起来正好覆盖了返工的完整链路:
| 准则 | 级别 | 要求 | 在返工链路里的位置 |
|---|---|---|---|
| 3.3.1错误识别 | A | 出错时要能识别出是哪一项错了,并用文字说明 | 让用户知道要改哪里 |
| 3.3.2标签或说明 | A | 需要用户输入时要提供标签或说明 | 让他知道该填成什么样 |
| 3.3.3错误建议 | AA | 如果知道怎么改,要把建议给出来 | 让他知道怎么改 |
| 3.3.4错误预防 | AA | 金融交易要满足可撤销、已校验、已确认之一 | 让他在生效前还有机会改 |
把这四条连起来读,是一条很完整的链:出错了要指出来(3.3.1)、事先说清要求(3.3.2)、能建议就给建议(3.3.3)、来不及的话至少留一次反悔的机会(3.3.4)。
而绝大多数电商站在这条链上的实现是:3.3.2做了一半(有标签,没说明),3.3.1做了一半(说了有错,没说是哪一项),3.3.3基本没做,3.3.4靠格式校验蒙混过关。
其中3.3.3那一条尤其可惜。它的要求是“如果系统知道怎么改,就要说出来”——注意前提是系统已经知道。你的后端在拒绝一个卡号的时候,当然知道是位数不够还是校验位不对,那个信息就在那儿,只是没往前端传。
这条链在合规上正在变硬
还有一个背景值得知道:这几条准则过去主要是自愿采纳的行业标准,但欧盟无障碍法案已经把电商服务纳入了强制范围,2025年6月底起适用,微型企业才有豁免。
它的实际效果是把上面这张表从“最佳实践”变成了“合规底线”。对于既卖欧洲又在纠结要不要投这块的团队,这个变化省掉了整场辩论——不再需要论证它值不值得做,只需要排期什么时候做完。
把改答案做成标准件的规范只有一份,为什么出自一个政府的设计系统?
找了一圈之后,只找到一处地方,把“用户回头改一个已经填好的答案”当成一个独立的、需要专门定义的设计模式写了下来。它不在任何电商设计规范里,在英国政府的设计系统里,模式的名字叫Check answers。
四条逐字要求
GOV.UK Design System的Check answers模式里,有一节小标题就叫“让用户回去修改他们的答案”。下面四条,每一条都精确对上电商结账的一个常见失效:
如果用户决定返回某个先前的答案,要确保他已经填过的信息是预填好的。
那些答案页面看上去应当和用户上次离开时一模一样。
他改完之后,“继续”按钮应当把他送回汇总页。他不应该需要把剩下的流程再走一遍。
如果用户的这次修改导致你需要问他更多问题,要在把他送回汇总页之前问完。
把这四条倒过来读,就是一份电商结账返工事故清单。
一条一条对照
| 规范要求 | 电商里对应的失效 | 用户当时在想什么 |
|---|---|---|
| 回去改时已填信息要预填好 | 点“编辑地址”弹出一张空表单 | 我刚才填过一遍了,怎么又要来一遍 |
| 页面要和上次离开时一样 | 返回后配送方式回到默认,勾选的礼品包装没了 | 我不确定现在选的到底是哪个 |
| 改完直接回汇总页 | 改完地址被扔回流程第二步,还得再点三次 | 我只是改个门牌号,怎么要重走一遍 |
| 连带问题要在回去之前问完 | 改完地址回到汇总页,运费默默变了没人告诉他 | (他没在想什么,他根本不知道) |
第四行最值得停一停。规范的意思是:如果这次修改会引出新问题,那就在原地问完再送他回去,不要让他带着一个已经过期的汇总页往下走。而电商里最常见的做法恰恰相反——改完就跳回去,页面上那几个连带变化的数字自己悄悄更新,界面上没有任何痕迹。
还有一条,和商品页那套规矩是同一条
同一份模式文档里还写着:如果某个问题是选填的,用户跳过没答,要用“未提供”把这件事显示出来,让他知道自己跳过了。
不是留空。留空会被读成“这里没有内容”,而“未提供”读出来的是“这一项存在,你选择了不填”。这两句话在用户脑子里激活的是完全不同的东西。
这条规矩和之前写商品并排比较时空值不能留白时得到的结论一字不差,只是那边是商品字段,这边是表单答案。凡是要让人比对和复核的地方,空白都是有害的,因为空白没有语义。
为什么是政府服务先把这件事做了?
这个问题的答案,比模式本身更有用。
政府服务和电商在三个性质上正好相反:
| 性质 | 政府服务 | 电商结账 |
|---|---|---|
| 使用频率 | 一辈子几次,用户永远是新手 | 可能一周一次,有回头客 |
| 填错的后果 | 申请被拒,重来要等几周 | 下错单,通常能退 |
| 用户能不能走 | 不能,只有这一个入口 | 随时能走,隔壁就有替代 |
| 失败的可见性 | 会变成投诉、申诉、议员质询 | 变成一个没有回头的会话 |
看第四行。政府服务的失败会留下痕迹,而且痕迹会一路往上走;电商结账的失败什么痕迹都不留——用户关掉标签页,报表上少一个转化,跟今天流量结构变了、跟广告投放调了、跟天气不好,看起来没什么区别。
所以不是政府部门的设计师更聪明,是他们的失败会说话,我们的失败不会。这个差别决定了哪一方会花力气去定义返工路径。
直接可抄的部分
Check answers这个模式,对独立站来说有三件事是可以原样搬的:
- 提交前给一页汇总,每一行右边挂一个修改链接。不是一个总的“返回修改”,是逐行的。用户要改的是哪一行,就点哪一行。
- 修改链接的可读文本要说清改的是什么。规范要求链接里带一段视觉上隐藏、但屏幕阅读器能读到的文字,比如“修改收货地址”,而不是满页七个一模一样的“修改”。这是无障碍要求,但对所有人都好用。
- 改完回汇总页,不要回流程。这一条的技术含量最高,因为它要求你的结账流程能在任意步骤之间带值跳转,而不是一条只能顺着走的管道。
第三条也是最值得投的一条。它一旦做出来,前面说的返工事故会一次性消掉一大半,而且后续加任何新字段都自动享受这个能力。
一个容易做歪的地方
⚠️汇总页不是把所有字段原样堆一遍。规范里专门说了要按区块分组、只显示与该用户相关的部分、必要时把问题改写成更短的陈述。
见过一些站把汇总页做成了一张四十行的表,用户扫不完,等于没做。汇总页的目的是让人在十秒钟内确认“这单没错”,行数一多,它就从确认工具变成了新的阅读负担——那样还不如不做,至少不占屏幕。
汇总页的六个细节,做错一个就废一半
这个模式看起来简单,实际做起来有一批坑。把踩过的整理成六条:
一、修改链接要在每一行,不是在每一区块
常见的偷懒做法是一个区块给一个“编辑”按钮,点进去是整块表单。这样等于把粒度退回到了步骤级,用户还是要在一堆已填字段里找他要改的那一个。粒度必须到行。
二、修改链接要说清改的是什么
一页上七个一模一样的“修改”,对用鼠标的人问题不大(位置提供了上下文),对用屏幕阅读器的人是灾难——读出来就是连续七个“修改,链接”。规范给的解法是在链接里塞一段视觉隐藏的文字,读屏能读到,视觉上不占地方。
三、点进去之后,值必须是预填的
这一条听起来是废话,但真出错的概率不低,尤其是那种“编辑地址”走的是一个通用地址表单组件的实现。组件是为新增地址写的,默认空表单,接了个编辑场景之后忘了传初值。
四、改完必须回汇总页,不能回流程
技术上这要求结账流程能记住“用户是从汇总页跳过来的”,改完按这个来源返回。实现上通常是在跳转时带一个来源标记。这个标记不能只在前端内存里,页面刷新之后要还在,否则用户中途刷新一下就掉回流程了。
五、跳过的选填项要写“未提供”
不是留空。留空在视觉上和“这一行没有内容”没有区别,而用户需要知道的是“这一项存在,我当时选择了不填”。这两句话在他脑子里触发的动作完全不同。
六、别把它做成一张长表
汇总页的目的是十秒钟确认一遍,不是让人重读所有输入。要分区块、要合并显示(地址不必逐行标注,四行地址显示成一段就行)、要只显示与这个用户相关的部分。超过屏幕两屏的汇总页,基本等于没做。
什么时候不该用这个模式
规范自己也说了适用边界:汇总页适合中小规模的事务,放在确认页之前。
如果流程特别长、分好几个大段落,做法是每个段落末尾放一个小汇总,而不是最后堆一个大的。这在电商里对应的场景是B2B的大额订单、需要配置的定制商品、或者一次要填多个收货地址的批量下单。
还有一种情况不适合:用户可能不是同一个人。比如企业采购流程里申请人填一部分、审批人填一部分,这时候每段各自汇总更合理,因为后一个人没必要也不应该看到前一段的全部细节。
购物车页其实就是一个汇总页
最后说一个视角转换,很多团队想通这一点之后省了不少事。
购物车页在结构上已经是一个汇总页了:它列出了用户选过的东西,每一项旁边有数量和删除,底部有总价。它天生就是“检查答案”的形态。
那为什么它没起到汇总页的作用?因为它汇总的只有商品,没有决策。用户在结账过程中做的其他选择——收货地址、配送方式、支付方式——一个都不在上面。
顺着这个思路,一个成本很低的改造方向是:把结账过程中已经确定的决策,逐步回写到购物车页的形态上,让它从商品清单长成完整的订单预览。这样不用新建一个页面,用户也不用学一个新的界面,而购物车这块本来就该被当成决策场而不是中转站。
表单标准里65个字段名,为什么没有一个是关于改的?
这一节的数字是自己数出来的,数完之后对前面所有结论的信心又强了一档。
先说这份清单是什么
浏览器的自动填充功能,靠的是HTML标准里的一个属性叫autocomplete。你在输入框上写 autocomplete="shipping street-address",浏览器就知道这一栏是收货地址的街道行,可以把用户存过的值填进去。
这套字段名不是各家浏览器各定各的,是写在HTML标准的表单控件章节里的统一清单。保哥把标准页面里定义过的取值全部提出来数了一遍:一共65个。
去掉9个修饰词(section、shipping、billing、home、work、mobile、fax、pager、webauthn)和开关用的on、off,剩下54个真正的字段名。
54个字段名,覆盖得相当细
细到什么程度?光是电话就拆了8个:tel、tel-country-code、tel-national、tel-area-code、tel-local、tel-local-prefix、tel-local-suffix、tel-extension。生日拆了4个,信用卡拆了10个,地址层级从address-level1到address-level4分了四档,街道行给了三行。
这是一份非常认真的清单。制定它的人显然仔细想过:用户填一次结账表单,浏览器需要认出哪些语义,才能一次性把这些框全部填对。
然后是那个空缺
54个字段名里,没有一个和“修改”有关。
没有一个token表达“这个字段现在的值是历史值,可能需要更新”,没有一个表达“这次填写是一次修正”,没有一个让浏览器知道“用户是回来改的,别把上次的值再灌一遍”。整份清单的语义模型只有一个:这一栏应该填什么。
这不是标准写得不好。自动填充这个功能本来解决的就是首填效率,它做得非常成功——一个配好autocomplete的结账表单,能把填写时间压掉一大半。问题只在于,它把整个工具链的注意力锚定在了首填这一侧,而工具链的默认能力会变成行业的默认做法。
唯一的例外,恰好证明了这件事
54个里有一对是特殊的:new-password 和 current-password。
这是整份清单里唯一一处区分了“这是新建的值”和“这是已经存在的值”的地方。为什么只有密码有这个待遇?因为密码字段如果不区分,浏览器会在改密码表单里把旧密码填进新密码框,后果非常明显、非常容易被发现、而且立刻会有人报bug。
换句话说:标准在有且仅有一处承认了“字段可能已经有值”,而这一处是因为不承认的话会当场出事。其余53个字段,不承认也不会当场出事——只会让用户多花二十秒,多点四下,或者干脆走人。而这些事情不产生bug单。
把这个逻辑往外推一层
这个模式在别的地方也成立,值得单独记一下:
一个系统会不会去处理某种状态,取决于不处理时的失败有多明显,而不是取决于那种状态有多常见。
购物车数量框那个21,出现频率极高,但失败形态是“用户自己会发现并且自己会改回去”——它不产生错误日志,不产生告警,不产生bug单。所以97%的站带着它跑了很多年。
改密码时旧密码被填进新密码框,出现频率低得多,但失败形态是“表单直接提交不了”——它会被立刻发现。所以标准里给它准备了专门的token。
这条推论在别的场合也很好用,比如判断一个技术债该不该现在还:不要问它多常发生,问它发生的时候会不会有人知道。没人知道的那类,会一直躺在那里。
顺带说一个能马上用的配置
既然说到了autocomplete,有个细节很多独立站配错,改起来只要几分钟:收货地址和账单地址必须分别加shipping和billing前缀。写成 autocomplete="shipping postal-code" 和 autocomplete="billing postal-code",浏览器才能分开记两套地址。
不加前缀的后果是:用户第一次填了收货地址,第二次到账单地址那一栏,浏览器把收货地址又填了一遍,他得先删掉再重填——这就又是一次返工,而且是自动填充自己制造出来的返工。这类由工具好心办坏事引发的摩擦,和下拉框在表单里悄悄吃掉转化属于同一类:控件本身没错,错在它面对的场景和它被设计出来时假设的不是同一个。
一份可以直接抄的结账表单字段配置
既然把这份清单数了一遍,顺手把跨境独立站结账页最常用的那部分整理出来。这张表抄过去就能用,改起来是几十分钟的事,效果是自动填充一次填对而不是填一半。
| 结账页字段 | autocomplete取值 | 常见的写错形态 |
|---|---|---|
| 邮箱 | 写成username,导致密码管理器误判 | |
| 收件人姓名 | shipping name | 拆成first-name / last-name这类非标准值 |
| 收货国家 | shipping country-name | 用country(那个要的是代码不是名称) |
| 收货州或省 | shipping address-level1 | 写成state或province,标准里没有这两个 |
| 收货城市 | shipping address-level2 | 同上,写成city |
| 收货街道 | shipping address-line1 | 整块地址只给一个street-address也可以,但要一致 |
| 门牌或公寓号 | shipping address-line2 | 常常什么都不写 |
| 收货邮编 | shipping postal-code | 写成zip |
| 联系电话 | shipping tel | 拆区号和号码时没用tel-country-code和tel-national |
| 账单地址各项 | 把shipping换成billing | 前缀完全没加,两套地址混成一套 |
| 持卡人姓名 | cc-name | 写成name |
| 卡号 | cc-number | 常见于自建收银台,托管字段一般已配好 |
| 有效期 | cc-exp或cc-exp-month加cc-exp-year | 拆成两个框却只给一个cc-exp |
| 安全码 | cc-csc | 写成cvv或cvc |
| 创建账号的密码 | new-password | 写成password,浏览器灌进旧密码 |
| 登录时的密码 | current-password | 同上,方向相反 |
| 短信验证码 | one-time-code | 不写,手机上就不会自动带入 |
倒数第三和倒数第二那两行,就是前面说的那对唯一承认“字段可能已有值”的token。而最后一行的one-time-code也很有意思——它是整份清单里唯一一个值有时效性的字段,因为验证码过期就作废。整份清单里承认“时间”这个维度的,也只有它一个。
autocomplete和inputmode的分工别搞混
这两个属性经常被混着用,但它们管的是完全不同的事:
- autocomplete管的是语义——这一栏在讲什么,浏览器据此决定填什么值进来。
- inputmode管的是键盘——手机上弹哪种软键盘出来,不影响值。
邮编字段的正确写法是两个都给:语义上是 shipping postal-code,键盘上在纯数字邮编的国家给 numeric。只给一个,要么填不进来,要么手机上弹出全键盘让人翻着找数字。
⚠️还有一个容易踩的:别在邮编上用 type="number"。数字类型会吃掉前导零,而美国有一批邮编就是零开头的,用户填的0xxxx到你后台变成xxxx。这个bug非常隐蔽,因为它只影响特定几个州。
配好之后怎么验
验证很简单:在浏览器里存一套地址和一张卡(用测试卡),然后打开自己的结账页,触发一次自动填充,数有几个框被填对了。
配得好的站,一次填充能把地址区全部填满。配得差的站,通常只有邮箱和姓名进去了,剩下的还得手打——而手打之后,用户在账单地址那一栏又要再来一遍,因为浏览器不知道那是另一套地址。
这个验证动作和前面那个五分钟返工验收可以合成一次做完:先自动填充一遍看填对几个,再回头改一个字段看塌不塌。一次跑完,首填和返工两条路的体检结果都有了。
把常见的十个结账问题按填和改重新分一次类,会看到什么?
公开的结账可用性基准里,被点名最多的问题大致是十个。这十个通常被摆成一个并列清单,看上去是十件互不相干的事。
把它们按“这是首填的问题还是返工的问题”重新分一次组,会看到一个之前没露出来的结构。
先看这张表
| 常见问题 | 不达标比例 | 属于哪条路 | 为什么 |
|---|---|---|---|
| 游客结账入口不够显眼 | 62% | 首填 | 第一次到账号选择步的人找不到路 |
| 密码规则过于复杂 | 65% | 首填为主 | 建号时受阻,但找回密码那一半是返工 |
| 只写配送时长不写送达日期 | 48% | 首填 | 用户要自己换算,属于信息缺口 |
| 截单时间是静态文字不是倒计时 | 83% | 首填 | 时区换算负担,同样是信息缺口 |
| 购物车数量选择器难用 | 97% | 纯返工 | 这个字段永远已经有值 |
| 结账时切不了履约方式 | 52% | 纯返工 | 用户在商品页已经选过一次了 |
| 必填与选填没有分别标注 | 61% | 两条都有 | 填时犹豫,跳过后被拦回来改 |
| 选填字段用错了控件类型 | 32% | 两条都有 | 点进去了要退出来,是一次微型返工 |
| 报错信息笼统不说具体原因 | 94% | 纯返工 | 报错这件事本身的定义就是回去改 |
| 要电话号不解释用途 | 49% | 首填 | 信任问题,发生在第一次填的时候 |
数一下就能看出问题
十项里,纯首填四项,纯返工三项,两条路都沾的三项。听起来还算均衡。
但把不达标比例这一列一起看,形状就变了:三个纯返工项的不达标率是97%、94%、52%,其中两个是全表最高的两个。四个纯首填项里,最高的83%那一条讲的是截单倒计时,本质上是个信息展示问题,改一行文案外加一个计时器就完事。
换句话说:这个行业在首填这条路上已经做得不错了,剩下的失分几乎全在返工那一侧。而返工那一侧的问题,恰恰是最少被写进需求文档的。
逐条说几个容易分错的
密码规则:一半在首填,一半藏在很远的地方
密码要求写一长串,直接后果是注册那一刻多花两分钟,这是首填成本。但真正贵的那一半在后面:被复杂规则逼出来的密码,用户记不住。
下一次他回来买东西,登不进去,走找回密码流程,那才是返工,而且是最脆弱的一种返工——它跨越了邮件、跨越了设备、跨越了几个月的时间,任何一环出问题,这次购买就没了。
顺带说一句现在很多人不知道的事:安全标准这边其实早就转向了。现行的数字身份指南明确禁止施加字符组合规则,也就是那套“必须含大写、小写、数字和特殊字符”;同时它把单因素密码的最短长度提到了15位,并且要求验证方必须允许密码管理器和自动填充。
方向是很清楚的:把复杂度预算从规则条数换成字符数量。规则条数是用户要满足的负担,字符数量是用户可以用一句话凑出来的东西。两者对暴力破解的贡献不在一个量级,对记忆的负担却正好相反。
多数电商站现在的做法,是把这笔交易做反了:规则一条不少,长度还只要8位。
履约方式切不了:这是返工里最典型的一种
用户在商品页看到“可到店自提”,很高兴。加购,进结账,到配送这一步,找自提,没有。要切回去只能退回购物车甚至退回商品页。
这件事的结构非常干净:一个决定在A页面做出,在B页面生效,而它只能在A页面被修改。用户在B页面上改主意,是完全正常、完全可预期的行为——他这时候才第一次看见完整的价格、运费和送达日期,这正是改主意的最佳时机。
而系统的设计假设是:这个决定在A页面已经定了。
一半以上的站是这样,比例52%。修法也不复杂:把所有履约方式——仓库发货、门店自提、同城配送——全部放进结账页的配送选择区,就地切换。有实体店的品牌还能顺手把自提包装成一个免运费选项,这是纯线上竞争对手拿不出来的牌。
报错信息:它本身就是返工的入口
校验报错这件事,定义上就是“你填的东西我不收,请回去改”。所以它百分之百属于返工路径,没有讨论余地。
而94%的站在这个入口上给的是一句通用文案。用户看到的是“输入有误”,他不知道是格式不对、位数不够、还是这张卡不支持。他现在要做的不是改一个字符,是猜。
这里有个很值得抄的对照:一句“您的卡号不完整”,和一句“卡号无效”,后端拿到的是同一个校验结果,前端多写了一个分支。而用户那边的差别是“再输两位”和“换一张卡”。
重新分类之后,优先级会变
如果按不达标比例排,你会先去做数量选择器和报错文案。这没错,但漏了一个更重要的维度。
按“这条路有没有被系统性地设计过”排,结论是:先建返工路径这条路,再逐个修上面的坑。因为返工路径上的问题不是彼此独立的十个bug,它们是同一个缺失的十种表现。
一个具体的例子:如果你先把“提交前汇总页加逐行修改链接”做出来,数量、地址、配送方式、支付方式这四项的返工路径同时就通了。而如果你按单点修,得改四个地方,改完还是四条互不相通的支路。
游客结账那一条,其实也有返工的一面
前面把游客结账入口归到了首填,那是主要矛盾。但它还有一个很少被讨论的返工侧,值得补上。
场景是这样:一个老客户回来了,但他忘了自己注册过。他看到游客结账,很开心,一路填完,到最后提交,系统告诉他——这个邮箱已经注册过了,请登录。
现在他要做什么?登录。登录之后呢?大概率是刚才填的全没了,因为登录动作切换了会话上下文,购物车可能保住了,结账过程中填的地址和配送选择基本保不住。
这是一次完整的、由系统制造的返工,而且发生在流程的最后一步——用户投入最多、耐心最少的那个时刻。
解法有三种,成本递增:
- 邮箱输入完就异步查一次,当场提示“这个邮箱已有账号,要登录吗”,并且提供“继续以游客身份结账”的出口。成本最低。
- 登录之后把已填内容带过去。技术上要求登录不销毁当前的结账草稿。
- 干脆不拦。允许同一个邮箱以游客身份下单,事后在后台把订单关联到账号。这是最省事的用户体验,但要看你的账号体系能不能接受。
⚠️第一种有个变体千万别做:在邮箱框旁边直接报错“该邮箱已被注册”。这等于把你的用户名单变成了可枚举的——任何人输入一个邮箱就能确认它在不在你的库里。提示要给,但措辞要中性,动作要指向登录而不是指向“这个已被占用”。
必填与选填的第三种标注法
基准里说61%的站没有同时标注必填和选填。常见的两种做法是只标必填(打星号)或者只标选填(写“可选”),研究显示两种的效果都不好——只标一半,用户会对另一半产生不确定。
有个第三种做法在长表单上更好用:把选填字段整个收起来,藏在一个链接后面。
比如公司名、地址第二行这类只对一部分人有意义的字段,默认不显示,给一个“添加公司名或公寓号”的链接。需要的人点开,不需要的人从头到尾不知道它存在。
这个做法一举解决了三件事:视觉上表单变短了;不需要的人不用判断“我要不要填这个”;而且它自带标注含义——藏起来的就是选填的,不用再写“可选”。
⚠️边界:只适用于确实只有少数人需要的字段。如果一个字段有三成人要填,藏起来就是给这三成人加了一次返工——他们得先发现那个链接。判据是看历史数据里这个字段的填写率,低于一到两成的可以藏。
电话号那句解释,三种写法的差别
基准里说49%的站要电话不给理由,而超过七成的受访者对给电话号有顾虑。这个数字挺吓人,但解法便宜到只是一句文案。三种写法的效果差别很大:
- 什么都不写。用户会默认往最坏的方向想,其中一部分人的应对办法是填一个假号码,而假号码对履约的伤害比空号更大。
- 写了用途但太笼统。比如“用于订单相关联系”——“相关”这个词把营销也包了进去,读的人心里那点疑虑一点没消,等于没说。
- 写具体场景外加一句承诺。比如“仅在配送出现问题时由快递员联系你,我们不会用于营销”。这是对的写法。
第三种里有两个要素缺一不可:一个具体的使用场景(谁会用、什么情况下用),加一句明确的排除(不会用来干什么)。只有前半句,用户会自己脑补后半句。
还有个更省事的选项常被忽略:直接把它设成选填,或者干脆不要。如果你的物流方不强制要求收件人电话,这一栏到底有没有必要存在,值得重新评估一遍。
校验在什么时候跑,直接决定返工有多痛
还有一个几乎从不被单独讨论、但对返工体验影响极大的开关:校验是什么时候触发的。
常见有四个时机,效果差得很远:
| 触发时机 | 用户感受 | 适合什么字段 |
|---|---|---|
| 每敲一个字符就校验 | 还没填完就开始飘红,很烦 | 基本不适合,除非是密码强度这类渐进反馈 |
| 光标离开时校验 | 填完一项得到一次反馈,节奏舒服 | 绝大多数字段的默认选择 |
| 点提交时统一校验 | 一次性满屏红,要逐个找回去改 | 只适合字段极少的短表单 |
| 提交到后端才知道 | 页面刷新,已填内容有丢失风险 | 只有必须服务端判断的才用,比如库存和风控 |
默认应该是第二种,光标离开时校验。它的好处是把返工限制在一个字段的范围内——填完这一栏立刻知道对不对,要改就现在改,不用等到最后拿着七个错误回头找。
但第二种有个必须处理的例外
光标离开就校验,在用户还没填完就切走的时候会误报。最典型的是电话号码:他填了一半去看了眼别的地方,一回来那栏已经红了。
处理原则是:失焦校验只在字段有过内容的时候跑,而且第一次报错要偏宽松。空字段失焦不报必填错误,等到提交或者进入下一步再统一提示。
第三种为什么这么难受
提交时统一校验,制造的是返工里最糟糕的一种形态:用户面对的不是一个错误,是一堆错误。
他要做的事情从“改一个字段”变成了“管理一个待办清单”,还得自己滚上滚下地找每一项在哪。如果表单很长,光是定位就要花掉大部分精力。
如果因为技术限制只能这么做,至少要配一个错误汇总——把所有错误列在页面顶部,每一条是一个链接,点了直接跳到对应字段并把焦点放上去。这个组件在无障碍规范里是标准做法,对所有人都好用。关键是那个焦点:不是滚过去就完了,光标要真的落在出错的那个框里,用户接着就能打字。
第四种要尽量减少,但减不到零
有些校验只能在服务端做:库存够不够、这张卡能不能过、这个地址在不在配送范围、这张券还有没有效。这些注定要等一次往返。
能做的是两件事。一是把能提前的提前——地址可达性不必等到提交,填完邮编就可以异步查一次。二是失败时保住所有已填内容,这是底线,做不到的话一次服务端拒绝就等于让用户从头再来一遍。
顺带说,这四种时机的选择在很多站里根本不是选出来的,是所用表单库的默认值。翻一下配置,把默认从“提交时校验”改成“失焦时校验”,往往是一行代码的事,而它对返工体验的改善比大部分UI调整都大。
改一个字段,会连带动几个数?
这是前面那三句判据里的第三句,也是返工路径上最难做、最容易被跳过、出事之后最难查的一部分。
用户改一个字段,页面上通常不止那一个字段会变。而那些跟着变的东西,绝大多数是静默变的。
先看收货地址这一个字段能牵动多少
把一个跨境独立站的结账页拆开,用户把收货地址从一个国家改成另一个国家,理论上会连带影响:
| 连带项 | 会不会变 | 用户看得见吗 | 不告诉他的后果 |
|---|---|---|---|
| 运费 | 几乎必变 | 数字在页面上,但没有变化提示 | 总价对不上,怀疑被坑 |
| 税费或关税 | 常变 | 常常折叠在“税费”一行里 | 下单时和结算时两个数 |
| 预计送达日期 | 常变 | 在配送选项里,改完常常没刷新 | 按旧日期做了安排 |
| 可用的配送方式 | 可能变 | 选项列表变了,但原来的选中项可能还留着 | 选中一个已经不可用的方式 |
| 可用的支付方式 | 可能变 | 基本不会提示 | 走到最后一步被拦 |
| 发货仓与库存 | 可能变 | 完全不可见 | 下单成功,两天后收到缺货通知 |
| 商品能不能卖 | 受限品类必变 | 取决于你有没有做校验 | 最坏的一种,整单作废 |
| 优惠券是否仍适用 | 可能变 | 券可能被静默移除 | 总价涨了,找不到原因 |
八项里有六项,用户在改完的那一刻是看不见变化的。他能看见的只有变化之后的结果,而结果和他记忆里的那个数不一样。
这里有个反直觉的点
静默更新在工程上通常被当成好事。页面自动重算,不打扰用户,体验流畅——这是很多前端方案默认追求的效果。
但在结账页上,静默更新是最坏的选择。原因是用户此刻正在做一个金额判断,而金额判断依赖于他脑子里那个刚刚看过的数。你悄悄把它换掉,等于让他拿一个过期的数去做决定。
他后来发现了,第一反应不是“页面重算了”,是“这个站在动手脚”。这个误解一旦形成,这一单基本没了,而且他不会告诉你为什么。这类信任崩塌的路径,和订单确认页上那几个数对不上时的后果是完全一样的。
正确的做法只有一条
前面引过的那条规范其实已经给了答案:如果这次修改会引出新的问题或新的变化,在把用户送回汇总页之前处理完。
具体到电商,落成三个动作:
- 改动提交的那一刻,把连带变化算出来并且显式展示。不是刷新一下数字,是给一句话:“配送到得克萨斯,运费从0元变为18.5美元,预计送达从10月3日推迟到10月7日。”
- 如果某个已选项因为这次修改不再可用,必须显式提示并要求重选。不能悄悄换成默认值,更不能留着一个已经无效的选中态。
- 如果修改导致整单不成立,在改动那一步就拦住。而不是让他走到支付步再说。
第一条里那句话的写法有讲究:要给出旧值和新值两个数。只写“运费18.5美元”,用户不知道它变了;写“从0元变为18.5美元”,他一眼就知道发生了什么,而且知道原因是他刚才那个动作。
受限商品是这套机制的压力测试
如果你卖的是酒、含锂电池的产品、危险品、需要年龄验证的商品,或者任何有地域禁运的东西,上面这套就不是体验优化,是业务能不能跑通的问题。
因为这些品类里,“改了地址导致这单不成立”不是极端情况,是日常。而它撞上的正是前面引过的那条法条:配送限制必须最迟在订购流程开始时说明白。
这两件事叠在一起,给出的结论很具体:受限品类的地址收集必须前置,而且必须在收集的那一刻就校验。不是下单时校验,不是履约时校验,是用户输入完那个邮编、光标离开输入框的那一刻。
怎么把连带关系建成一张表
做法很土,但有效。开一张表,行是结账页上每一个用户可以修改的字段,列是每一个会被影响的展示项或状态。用户改行,就在对应的列打勾。
打完之后做三件事:
- 每一个勾都要回答:这次变化会不会告诉用户?答不上或者答“不会”的,就是一个待办。
- 找出勾最多的那几行。它们是最需要做“改动预览”的字段——最典型的就是地址和数量。
- 找出被打勾最多的那几列。它们是最需要做变化高亮的展示项——通常是总价、运费和送达日期这三个。
这张表通常一两个小时就能填完,而它往往是团队第一次把“字段之间有依赖”这件事写下来。在此之前,这些依赖只存在于后端某几个函数的调用链里,前端不知道,产品不知道,测试当然也测不到。
顺手能捡到的一个副产品
这张表填完之后,通常会发现某几个字段的连带影响多到不合理。这时候要问的不是“怎么把这些提示都做出来”,而是“这个字段能不能收得更早一点”。
地址就是典型。它牵动六到八项,说明它其实是整个结账里信息量最大的一个输入。那与其在第二步收它然后处理一堆连带变化,不如把它往前挪——挪到购物车页,甚至挪到商品页给一个“查一下能不能寄到你那儿”。
这个动作的收益不只是少了连带变化,还顺便解决了一批别的问题:运费在加购前就是确定的,送达日期在决策时就在场,受限品类在用户投入感情之前就拦下来了。送达日期那笔一直没算完的账,多半也是在这一步补上的。
连带变化怎么提示,三种形态对照
知道了要提示,还有个具体问题:提示长什么样。常见三种,效果差别很大。
| 形态 | 做法 | 优点 | 缺点 |
|---|---|---|---|
| 浮层提示 | 右上角弹一条“运费已更新”,几秒后消失 | 实现最简单 | 可能没看见就没了,且没说变成多少 |
| 行内差值 | 在运费那一行原地显示“0元 → 18.5美元”,保留一小段时间 | 位置正确,数值完整 | 要处理好视觉,别做成闪烁 |
| 变更汇总块 | 修改提交后,在页面顶部列出这次改动引起的全部变化 | 覆盖多项变化,最清楚 | 成本最高,且要小心变成噪音 |
推荐的组合是行内差值打底,变更汇总块只在影响项超过两项时出现。改一个门牌号只影响运费,行内提示就够;改一个国家影响六项,那就值得给一个汇总块。
浮层提示那一种,除非你的变化只有一项且不涉及金额,否则不建议。它的失败模式是最坏的那种:系统认为自己已经告知了,用户其实没看见。之后所有的沟通都建立在一个错误的前提上。
币种和汇率是隐藏的第九项
前面那张连带表列了八项,跨境站还有第九项常被漏掉:改了国家可能会改变展示币种。
这一项特别脏,因为总价的数字会变,但变的原因不是金额变了而是单位变了。用户看到“128”变成“1180”,第一反应是价格涨了十倍。
处理原则只有一条:币种切换必须显式,绝不能跟着地址静默切。要么问一句“检测到你在日本,要切换为日元显示吗”,要么干脆不切、保持原币种并在旁边标一个参考换算。
顺带说一个相关的坑:如果你的价格是按币种分别设定的(不是按汇率实时换算的),那切币种还会让实际售价变化。这时候更要显式,因为这已经不是显示问题,是价格问题了。
优惠券被静默移除,是这里面最脏的一种
八项里最想单独拎出来的是优惠券。
典型场景:用户用了一张满两百减三十的券,然后他把数量从3改成2,订单金额掉到两百以下,券自动失效被移除。
这时候他看到的是:我减了一件商品,总价却没有按比例往下走,反而比预期高了三十。而页面上那一行“优惠 -30”已经消失了,连它存在过的痕迹都没有。
这个失败特别恶劣,原因是它同时改变了两个方向:用户做的是一个减少的动作,得到的却是一个相对增加的结果。人对这种反向结果的容忍度极低,而且第一归因永远是“这个站在坑我”。
正确做法:券失效的时候必须显式说明,而且要说清差多少。“订单金额低于200美元,优惠券已暂时失效,再加15美元即可重新享受30美元优惠。”这句话不但解释了变化,还顺手给了一个可执行的下一步——很多时候用户真的会去加那15美元。
把这张表做成回归测试
连带关系表填完之后,别让它躺在文档里。它天生就是一份回归测试用例清单。
做法是把表里每一个打勾的格子变成一条自动化断言:修改字段A之后,断言展示项B的值发生了变化,并且断言页面上出现了对应的提示元素。
这类测试写起来不难,价值在于它守住的是最容易在后续迭代中被打破的东西。连带变化的提示是典型的“加新功能时最容易漏掉的部分”——下次有人加一个新的配送方式,多半不会想到去更新那条提示逻辑。有断言在,那次遗漏当场就红了。
B2B报价单是同一个问题的放大版
做B2B或者定制商品的站,这一节的所有结论都要再乘一个系数。
因为报价这件事的本质就是反复调参数:改数量看阶梯价、改材质看单价、改交期看加急费。用户在报价器上的主要动作不是填,是改。首填只发生一次,返工发生几十次。
这类页面上最要命的失效有两种。一种是每改一个参数就整表重算并且滚回顶部,用户改到第五次就放弃了;另一种是改完之后前面某个选项被静默重置,他拿到的报价对应的其实不是他以为的那套配置。
第二种尤其危险,因为它产出的是一个看起来完全正常的数字。用户拿着这个数去做预算,几天后回来下单,发现价格对不上,这时候要解释的就不只是一个界面问题了。
所以报价类页面的最低要求应该更高一档:每次重算之后,把当前生效的完整参数组合原样列出来。不是让用户去回忆他选了什么,而是把系统当前认定的那一套摆在报价数字旁边。这一步的成本很低,它挡掉的却是最贵的那类纠纷。
判断自己的报价页有没有这个毛病,有个很快的办法:连续改五个参数,然后把最后那份报价截图,再对着截图去核一遍每一项配置。核不齐的,说明系统和用户对“当前选的是什么”这件事已经不同步了。
一次被用户好评盖住的失手,问题到底出在哪?
这一节讲个保哥自己没看出来的事,前后拖了大半年。写出来是因为它的失败形态很少见——预警不但出现了,还是以表扬的形式出现的。
那个站
是个做精酿啤酒和小众葡萄酒的跨境独立站,主要卖到美国和欧洲几个国家,客单价一百到三百美元,按箱走,一箱六支或十二支。
酒这个品类有几个绕不开的东西:不同的州和国家规则不一样,有些地方根本不能寄,有些地方要成人签收,有些地方对单次寄送的容量有上限;运费很重,因为是玻璃瓶加缓冲包装;而且节日季订单集中,用户经常是买来送人,收货地址不是自己家。
站的状态是:流量稳定,加购率正常,结账完成率也不算差,广告投放的账算得过来。所有报表都说这个站没什么大毛病。
预警是怎么来的
客服那边有个季度汇总,其中一项是用户评价里的正面反馈。那一季的正面反馈里,出现频率最高的一类是这样的:
“客服反应特别快,我下完单发现地址填成了办公室,发邮件过去十分钟就帮我改好了。”
“临时要多加两瓶,联系客服直接给我并单了,还没重新收运费,服务很贴心。”
“我不确定能不能寄到我这个州,客服查完告诉我可以,还帮我改了配送方式。”
这些是真的好评。用户是真的满意,客服是真的做得好,NPS上是实打实的正分,季度汇报里这一页做得很漂亮。
当时看到这一页的反应,和会上其他人一样:客服团队做得不错,继续保持。
三个月后才反应过来
转折点是一次很偶然的对话。运营同事随口提了一句,说最近改地址的邮件特别多,节日季前后一天能有二三十封,客服都是手工改后台。
二三十封。日订单量并不大。
回头把这三类好评重新读了一遍,看到的东西完全变了:每一条好评的背后,都是一次站上做不到、只能靠人肉完成的返工。
“帮我改好了地址”——因为站上下单后改不了地址。
“帮我并单了”——因为购物车加不了数量,或者说加了要重新走一遍结账。
“帮我查了能不能寄到我这个州”——因为配送限制没有前置,用户填完地址才知道,甚至填完了也不知道。
为什么这种预警最难被识别
之前遇到过的预警失效,形态各种各样:有的根本没有预警,有的用了另一个部门听不懂的语言,有的被读成了捷报,有的被一份结论正确的验收报告正式关闭。
这一次不一样。这一次的预警来自用户本人,内容是表扬,情绪是正面的,而且它出现在一个专门用来收集用户满意度的渠道里。
要从这样一条信息里读出问题,你得先做一个很别扭的动作:把“用户在夸我们”和“用户为什么需要我们帮这个忙”拆开。前一句是结论,后一句是场景。绝大多数汇报只汇报结论。
更麻烦的是激励方向。客服团队的KPI里有满意度,这些工单是他们的加分项;运营看到的是好评率上升;管理层看到的是服务口碑。整条链上没有一个人的指标会因为这件事变差,所以没有一个人有动力去问它为什么会发生。
修好它的代价,是失去一个正向证据
这是这次失手最值得记下来的一点。
当你把“下单后30分钟内可自助改地址”做出来之后,会发生什么?那类好评消失了。客服的满意度分项少了一个稳定的加分来源。季度汇报里那一页变得没那么好看。
而真正改善的指标——发错地址的重寄成本、客服工时、退货率——分别记在物流、人力和售后三本账上,谁也不会主动把它们和这次改动挂钩。
所以这类修复天然是吃亏的:收益分散在别人的账本上,代价集中在自己的报表里。如果不提前把这件事说明白,做完之后大概率会被问一句“这个改动到底带来了什么”。
保哥后来的做法是,动手之前先把那三类好评的月度条数记下来当基线,同时记下客服在这三类工单上的平均处理时长。改完之后不比好评数,比这两个数的乘积——它就是被人力顶掉的那部分返工成本,单位是小时。这个数一降,账就算得清了。
后来做的三件事
不多,三件,按先后顺序:
- 把配送可达性校验挪到了购物车页。输入邮编,当场告诉你能不能寄、运费多少、大概什么时候到。受限州直接在这一步说清楚,不让用户带着期待往下走。
- 下单后开了一个可自助修改的时间窗。发货前且下单后两小时内,收货地址和联系方式可以自己改,改完系统重新校验一次可达性和运费差额。这一条就是前面说的那个G164。
- 购物车数量框加了加减按钮,并且点进输入框自动全选。顺手把“再加一箱”做成了购物车页上的一个按钮,因为酒这个品类凑箱数是高频动作。
结果不是那种能写进海报的数字。整体转化率的变化很小,落在噪声范围里。真正变了的是三个地方:客服那三类工单几乎清零;因地址错误产生的重寄从每月十几单降到个位数;下单后两小时内的自助修改,在节日季有相当一部分订单用到了——这个数说明需求一直在,只是以前全走了人工。
⚠️还有一个不太好看的变化要如实说:加了邮编前置校验之后,购物车到结账的转化率降了一点。因为一部分本来会走到最后才被拦下来的用户,在购物车页就走了。这些订单本来也成不了,但报表上它们从“结账流失”变成了“购物车流失”,看起来像是购物车页变差了。这种口径迁移要提前讲清楚,不然会被当成负面结果。
为什么这件事没法用A/B测试
那个站当时问过一句:能不能先小流量试一下再全量。答案是这件事天生不适合做A/B。
原因有三个,每个都足以单独否掉。
第一,返工是低频事件。一次会话里改地址的比例本来就不高,要在这个子集上测出统计显著性,需要的样本量比测一个按钮颜色高一个量级。多数独立站的流量撑不起来。
第二,核心收益不在转化率上。真正改善的是客服工时、错发重寄和退货率,这三个数都有明显滞后——退货要等收货之后,重寄要等物流反馈。实验周期还没结束,这些数还没长出来。
第三,也是最要命的一个:下单后自助改地址这类能力,天然不能分流量做。你不可能让一半用户能改一半用户不能改,客服那边会立刻乱套,而且被分到对照组的用户如果知道了,那是实打实的投诉。
所以这类改动的正确验证方式不是实验,是前后对照加上一个明确的口径声明:改动之前记录一个月的基线,改动之后记录一个月,比的是那几个滞后指标,同时把季节因素单独标出来。不精确,但足够用来判断方向。
酒这个品类另外两个坑
顺便把那个站踩过的另外两个记下来,做受限品类的可以直接绕开。
成人签收这件事,用户不知道意味着什么
很多地区要求酒类必须由成年人当面签收。站上通常会写一句“需成人签收”,用户看到之后点点头就过去了。
他不知道的是:这意味着包裹不能放门口、不能放快递柜、家里没人就会被带走并且要重新预约。而这三件事里的任何一件发生,都会变成一封客服邮件。
后来那个站把这句话改成了具体的后果描述,并且在配送选择那一步就问一句“这个地址白天有人吗”,不方便的可以选择送到取货点。改完之后,配送失败重投的比例下来了一截。这跟礼物订单里收件人和买家不是同一个人是同类问题:系统只认得下单那个人,而现场那个人才决定成败。
容量上限会让购物车在结账时才失败
某些目的地对单次寄送的酒精容量有上限。这个校验如果只在结账时做,用户会遇到最难受的一种失败:购物车里的东西全都能买,合在一起不能寄。
而且这个失败没有明确的下一步——他不知道该删哪一件,也不知道删到什么程度就可以了。
解法是把校验挪到加购那一刻,并且给出可执行的信息:“当前地址单次最多可寄6升,购物车已达5.25升,再加这一瓶将超出。”有了这句话,用户至少知道自己在跟什么打交道。受限品类的通用原则是:所有会导致整单不成立的条件,都必须在用户投入之前暴露。
基线怎么记,具体到字段
前面说了要在动手之前记基线,这里给一份具体的清单,照着记就行:
- 改单类工单条数,按四类分开记。数据在客服系统里,按标签导出,按周记,至少攒四周才有意义。
- 改单类工单的平均处理时长。同一个系统,取工单开启到关闭的时长,同样按周。
- 地址错误导致的重寄单量和费用。这个要去物流对账单里翻,按月记就够。
- 下单后24小时内的取消率。订单表里直接能查,按周记。
- 支付重复发起的订单占比。网关日志里有,按周记,记得先排掉正常重试。
前两条相乘就是那个小时数,也是唯一一个能直接换算成钱的指标。汇报的时候只讲这一个,其余四个作为支撑放在后面——一个能换算成钱的数,胜过五个需要解释的数。
怎么落地:一个验收动作、一个卡点、三条边界
前面讲了不少机制,这一节全是能今天就做的。
验收动作只有一个,五分钟
打开自己的站,走完整个结账流程,填到最后一步不要提交。然后做三件事,边做边数:
- 把收货地址改成另一个国家或者另一个州。数需要点几下才改得到,数有几个已填字段被清空了。
- 看运费、税费、预计送达日期这三个数。它们变了没有,变的时候页面有没有说一句话。
- 把配送方式换一个,再把数量从1改成2。数这两件事各需要几步。
这个动作的价值不在于它能发现多少问题,在于它的结论没法被争论。你没法跟人争“用户改地址很困难”,但没法否认“改一个州要点七下,而且电话号码被清空了”。这类计数型证据的杀伤力,来自它不需要任何理论支撑。
做完顺手录一段屏。一段四十秒、没有旁白的操作录屏,在评审会上比十页文档管用——这一点和那些看着无关紧要却真能提转化的UI改动一样,说服力全部来自当场可见。
卡点挂在哪里,比挂什么更重要
很多人的第一反应是往结账页的设计评审里加一条“检查修改路径”。这个位置是错的。
原因和商品页那套问题一样:设计评审天然是对着一张稿看的,而返工路径的问题恰恰在“稿画不出来”。你在那儿提这件事,会显得跑题,而且没有任何具体的东西可以指着说。
正确的位置是验收用例模板。在模板里加一条硬规则:
结账流程里每一个用户可输入的字段,验收用例必须成对出现——一条测“从空到有值”,一条测“从有值改成另一个值”。只有一条的,直接打回。
这条规则的好处是它不需要任何人理解为什么。写用例的人只要照着模板走,返工路径就自动被覆盖了。它把一个需要认知的问题,转成了一个机械的检查项。
配一条纪律:新加的检查项,先造一个必然失败的例子,确认它真的会红。不然很容易加进去一条永远绿灯的规则,团队还以为已经覆盖了。这个动作五分钟,能省掉半年的假安全感。
清单怎么排优先级
如果一次做不完,按两个维度相乘排:
第一维:这个字段的返工频率。用前面那五个免埋点指标估,估不出来就用一个粗口径——这个字段在客服工单里被提到几次。
第二维:改这个字段会牵动几个别的数。就是那张连带关系表里,这一行有几个勾。
两维相乘排下来,地址和数量通常在最前面,支付方式在中间,姓名邮箱这类在最后。这个排序和按“修复难度”排出来的顺序往往完全相反——难的正好是该先做的,因为它牵动最多。
⚠️这里要专门提醒一句:不要按“这个字段被填错的比例”排。填错率高的字段(电话、邮编)修的是校验,属于首填那一侧;而返工的主体是“填对了但要改”,这两批字段的重合度没你想的那么高。
三条边界,提前说清楚
这套东西不是万能的,有三种情况它不该是你的第一优先级。
一、单商品、低客单价、一步下单的场景
如果你卖的是十几美元的单件商品,用户加购到付款只有一屏,那返工的空间本来就小。这时候该盯的是首填效率——自动填充配全、支持钱包支付、字段能少就少。
判据很简单:去数一下有多少会话在同一个结账步骤上停留超过两次。比例低,说明返工不是主要矛盾,不必在这上面花力气。
二、返工路径做好了不等于转化率会涨
这一点必须说清楚,不然后面很难交代。前面那个酒类站的例子里,整体转化率的变化落在噪声里。
原因不难理解:把返工做顺,救回来的是那些本来会放弃的人,同时也会让一部分本来会盲目下单的人想清楚不下单了——比如他改完地址看到运费涨了18.5美元,于是不买了。这两股力量方向相反。
真正稳定改善的是别的东西:客服成本、错发重寄、退货率、二次购买。要在动手之前就把要看的指标定下来,不要做完了再去找一个好看的数字。
三、它解决不了商业问题
如果你的问题是运费本来就贵到没有竞争力、或者配送时效比对手慢一周,那返工路径做得再顺,用户也只是能更顺畅地看清楚这些事实然后离开。
把信息摆到决策位置,是一把双刃的动作:运费和时效怎么讲是另一个话题,但前提是那两个数本身经得起看。经不起看的时候,先去改数,不要指望改界面。
三十天能做完的一份排期
| 时段 | 做什么 | 产出 |
|---|---|---|
| 第1周 | 跑那个五分钟验收动作并录屏;拉客服工单按“距下单时长”重新分类 | 一段录屏加一张工单分布图 |
| 第2周 | 填连带关系表;把验收用例模板改成成对规则并造一个必然失败的例子 | 一张依赖表加一条生效的卡点 |
| 第3周 | 做提交前汇总页,每行挂逐项修改链接,改完回汇总页 | 返工主干打通 |
| 第4周 | 给牵动最多的两个字段做改动预览(旧值到新值);数量框加按钮 | 连带变化不再静默 |
第3周那一项是整个排期的重心,也是唯一一件需要动流程架构的事。前两周都是为了让第3周的方案有依据,第4周是收口。
如果只有一周时间,那就只做第4周的下半句:购物车数量框加一对加减按钮,点进输入框自动全选。成本以小时计,覆盖的是那个97%。
卡点落地时会遇到的三种阻力
“验收用例必须成对”这条规则,写进模板容易,真正跑起来会遇到三种反对。提前想好怎么答。
一、用例数量翻倍了,测试排期不够
这是最实际的一条,而且反对得有道理。回应方式不是硬扛,是先划范围:只对结账流程和账号信息这两块强制成对,其他表单不管。
结账页的可输入字段通常在十到十五个之间,成对之后多出十来条用例,测试跑一遍多不了多少时间。而这十来条覆盖的是转化路径上最贵的那一段,性价比说得清。
二、这些用例大部分会通过,是在浪费时间
这个说法可以当场验证:先手工跑三条,看有几条挂。按经验,第一次跑的时候挂掉一半是常态,通常是地址、数量、配送方式这三块。
挂了一半之后,这个反对自动消失。而如果真的一条都没挂——那说明你们的返工路径本来就做得好,这十来条用例就当保险,成本也不高。
三、有些字段改不了,写用例也没意义
这个反对最需要警惕,因为它把结论当成了前提。“这个字段本来就不支持修改”不是一个技术事实,是一个产品决定,而这个决定多半从来没有被明确做出过——它只是没人做而已。
正确的处理是让用例照写,然后标记为已知失败并挂上原因。这样它至少变成了一条可见的技术债,而不是一个大家默认如此的空白。
跨团队的分工怎么切
返工路径这件事横跨的部门比较多,切不清楚就会互相等。一个比较顺的切法:
| 角色 | 负责什么 | 产出物 |
|---|---|---|
| 产品 | 填连带关系表,定哪些变化必须提示 | 字段依赖表加提示规则 |
| 设计 | 汇总页版式、修改链接形态、变化提示的三种形态 | 三张稿加一份组件规范 |
| 前端 | 带值跳转、来源标记、自动填充属性 | 能在任意步骤间往返的结账流程 |
| 后端 | 把校验失败的具体原因传到前端;改动后的重新计算接口 | 结构化的错误码和重算端点 |
| 测试 | 成对用例模板、连带变化的回归断言 | 一份跑得起来的用例集 |
| 客服 | 四类改单工单的打标和月度导出 | 基线数据 |
其中后端那一行最容易被漏掉,也最卡人。前端做不出好的报错文案,通常不是文案能力问题,是后端只传回来一个通用错误码。这件事必须在排期一开始就说清楚,否则做到一半会发现前端手里根本没有可用的信息。
有一件事别做
⚠️最后提醒一个常见的扩大化:不要借这个机会做全站表单大重构。
这个诱惑很真实——既然要改结账表单,那注册、地址簿、联系我们、订阅弹窗一起统一了多好。
但这么一并,排期从四周变成四个月,收益点被稀释,评审要过的部门从两个变成六个,而且一旦某个环节卡住,整包都停在那儿。前面说的那些改动,绝大多数的价值在于四周内能上线并且能量到结果,摊进大重构里就全没了。
先把结账这一段做完,量出数据,再拿那份数据去谈别的。这跟做搜索体验这条链上的整体优化是同一个道理:链条要整体看,动手要一段一段动,不然每一段都停在计划阶段。
购物代理帮用户下单的时候,返工路径去哪了?
最后说一个正在发生的变化,它会把这件事的重要性再往上抬一档。
越来越多的购买动作开始由AI代理代为完成:用户描述需求,代理去挑、去比、去填表、去下单。这条路上,前面讲的两条路会发生一个有意思的变形。
首填路径反而变简单了。代理不会被丑陋的下拉框困住,不会因为找不到游客结账入口就放弃,也不会被一长串密码规则劝退——只要页面的语义结构清楚,它填得比人快得多。
返工路径反而变难了。原因是代理在返工上的能力比人差得多:它看不出“运费悄悄从0变成了18.5”这种视觉层面的变化,因为静默更新在页面语义上留不下任何痕迹;它也不容易判断“这个已选项现在还成不成立”,除非页面明确说了。
换句话说,那些原本靠用户眼睛兜底的隐性信息,在代理这条路上直接掉在地上。人类用户还能凭着“咦总价怎么变了”的直觉去查一遍,代理只会拿着页面上现在写着的数继续往下走。
这对现在该怎么做有两个具体影响
第一,把变化说出来这件事,从体验优化升级成了机器可读性要求。“运费从0元变为18.5美元”这句话如果只体现为一个数字的替换,人还有可能发现;如果它是一句显式的文本,代理就能读到、能判断、能停下来问一句。
第二,提交前的汇总页从可选项变成了关键接口。它是整个流程里唯一一个把所有决策集中呈现的地方,对代理来说,那是它唯一能一次性核对全部字段的机会。没有这一页,它只能靠回溯多个步骤来拼,出错概率高得多。
这两件事和接入AI购物代理时那些配置层面的准备是配套的:协议层把通路打通之后,真正决定成败的是页面上这些信息说没说清楚。
一个不需要等未来就成立的理由
说了这么多,其实不必为了代理去做这些事。
因为把连带变化显式说出来、把决策集中到一页可核对,这两件事对人类用户的收益本来就已经足够大,前面整篇讲的都是这个。代理这条线只是让同一批改动多了一个受益方,让排期的理由更硬一点。
这也是这类改动值得优先排的原因:它不赌任何关于未来的判断。代理这条路走得快还是慢、走得通还是走不通,都不影响这些改动在今天的价值——真正好的技术投入通常都有这个性质,赌对了加分,赌错了也不亏。
常见问题解答
结账流程优化如果只能先做一件事,应该做哪个?
做提交前的汇总确认页,并且给每一行挂一个独立的修改链接,改完直接回到汇总页。这一件事的性价比最高,因为它一次性打通了地址、数量、配送方式、支付方式这四条返工支路,而不是单点修四个地方。如果连这个都排不进去,那就退而求其次做购物车数量框:加一对加减按钮,点进输入框自动全选。这个改动以小时计,覆盖的是不达标率高达97%的那一项。判断顺序的原则是先建路再修坑——返工路径上的那些问题不是十个独立的缺陷,它们是同一处缺失的十种表现形式。
提交前多加一页确认,会不会因为多一步反而降低转化?
这个担心可以理解,但把它做对之后通常不成立。关键在于汇总页不是新增一个填写步骤,它是把原本就存在的最后一屏改成可逐行回改的形式,用户的输入总量没有增加。真正会拖累转化的是两种做法:一是把汇总页做成四十行的长表,用户扫不完,它就从确认工具变成了阅读负担;二是汇总页上的修改链接点进去要重走整个流程,那还不如不给入口。做对的判据是分组清晰、只显示与该用户相关的部分、必要时把问句改写成更短的陈述句,让人在十秒内确认这单没错。
一步式结账和多步式结账,哪一种对修改更友好?
两种都可以做好,也都可以做砸,关键不在步数。一步式的优势是所有字段同屏,改一个不用跳转;劣势是页面长,改一个字段要滚很远才找得到,而且很容易触发全表校验,一改就满屏飘红。多步式的优势是每步聚焦,劣势是跨步修改需要能带值跳转,做不好就变成从头再走一遍。真正决定优劣的是那条通用要求:改完之后能不能直接回到他离开的地方,而不是被扔回流程起点。这一条做到了,一步和多步都能用;做不到,两种都难受。
允许用户在下单后自助修改地址,会不会被人钻空子?
风险是真实的,主要有两类:改成高风险地址规避风控,以及用改地址来延缓发货。所以这个能力必须带三重限制。第一是时间窗,通常设在下单后一到两小时,且必须在拣货或发货之前,一旦进入履约就关闭入口。第二是范围限制,只开放同一国家或同一配送区域内的修改,跨区域必须走人工。第三是重新校验,改完之后要重新跑一次可达性、运费和风控规则,运费有差额的要么补收要么明确说明由谁承担。加上这三重限制之后,绝大多数正常用户的需求都能自助完成,异常请求仍然会落到人工那里。
欧盟那几条指令,对只做美国市场的独立站还有参考价值吗?
法律义务上没有,设计价值上很大。这些条款之所以值得读,不是因为你必须遵守,而是因为它们把一件很难讲清楚的产品要求写成了可执行的语言。适当的、有效的、可访问的纠错手段这几个形容词,比任何一份产品需求文档写得都准;配送限制必须最迟在订购流程开始时说明,这一句直接就是一条可以写进验收用例的规则。把它们当成一份成熟的检查清单来用,比当成合规负担来用有价值得多。何况只要你有一天想卖到欧洲,这些就会从参考变成硬要求。
用Shopify或者WooCommerce这类平台,能改到什么程度?
能改的范围比多数人以为的大,但确实有天花板。购物车数量选择器、字段标注、报错文案、地址表单的自动填充属性,这几项在主题模板层面基本都能改,属于低成本高回报的部分。提交前的汇总页在自建结账或者支持深度定制的方案里可以做,在受托管限制的结账页上空间较小,这时候的替代方案是把汇总能力前移到购物车页。下单后自助改地址通常要靠订单管理侧的功能或者插件实现。建议的顺序是先把模板层能改的全部改掉,量一遍指标,再决定要不要为剩下的部分付出定制成本。
怎么说服老板给返工路径排资源?
不要用体验好坏去说服,那是一场没有裁判的辩论。用两样东西:一段录屏和一个乘积。录屏是那个五分钟验收动作,四十秒、无旁白,让人自己看着一个地址要点七下、电话号码被清空。乘积是客服在改单类工单上的月度条数乘以平均处理时长,单位是小时——那就是被人力顶掉的返工成本,它记在人力这本账上,而不是转化率那本账上。同时要提前把预期讲明白:这件事改善的是客服成本、错发重寄和退货率,整体转化率大概率不会明显变化,甚至购物车流失会因为口径迁移而看起来变差一点。
权威参考资料
本文标题:《结账流程优化做了很多轮,用户回头改一次收货地址,前面填的全没了》
本文链接:https://zhangwenbao.com/checkout-rework-path-vs-first-fill.html
版权声明:本文原创,转载与引用请注明作者与原文链接。许可协议: CC BY 4.0