全部笔记

表单错误设计:让用户知道改哪里与为什么

用预约表单区分字段与服务错误,处理异步校验乱序,并建立可定位且保留有效输入的恢复路径。

一次提交失败不该清空有效输入

假设注册表单提交后只提示信息有误,输入全部清空。用户不知道哪个字段有问题,又要重填有效内容。错误反馈需要定位原因、保留工作并提供修正路径,不能只证明后台校验失败。

以预约表单为例,用户填写邮箱、开始日期和结束日期。格式、先后关系与可预约库存是三种不同判断:前两种可在客户端帮助发现,第三种必须由权威服务确认。以下推演不使用真实用户观察。设计时应画出每种失败后仍保留什么内容、焦点去哪、下一步是什么,避免把三个问题都压缩成顶部的一句“请检查信息”。

字段错误与服务错误使用不同事实

预约任务的目标是得到一个已确认区间。用户输入、结构校验、库存确认和最终保存分别有状态。库存刚查到可用不保证提交时仍可用,服务端在最终操作中维护约束。页面说明当前位置,不用绿色勾选暗示业务已经预留。

保留输入也有范围。普通日期和说明可以在当前页面恢复,密码和敏感资料按安全政策处理;跨设备保存需要明确授权和真实状态。不能为了降低重填把所有值写进 URL、日志或长期浏览器存储。恢复便利建立在合适数据边界之内。

区分字段格式、跨字段业务约束与服务异常。邮箱格式错误可由字段解释,已有成员资格涉及业务状态,服务器失败则不是用户输入问题。错误模型应包含字段关联、稳定类型和用户能执行的动作。

服务端可以返回稳定代码和字段路径,例如日期区间冲突对应 startDate 与 endDate,而不是返回一段任意文本让前端猜。组件将代码映射为说明,但仍保留无法识别错误的安全兜底。账号存在性等敏感信息需要单独设计,不应为了让消息更具体就泄露哪些邮箱已经注册。

前端校验帮助提前反馈,但不替代服务端校验。不能用错误说明泄露敏感账号存在性,密码值也不能为了保留输入而写进地址或日志。成功与失败提示保持真实,不假装提交已保存。

什么时候验证不会打断输入

错误分类可连接恢复动作。格式错误让用户改字段,跨字段关系定位字段组,资格错误提供合法申请或替代,服务超时先核对结果。用户不能修复的服务问题不标红普通输入,避免给出“你填错了”的错误因果。

服务端响应还有协议版本。前端识别稳定错误码与字段路径,未知码显示安全说明和关联 ID,不展示原始堆栈。文字可本地化,但客户端逻辑不根据错误句子匹配。业务规则升级与文案维护关联,不让旧提示继续给错误范围。

敏感条件的具体程度需要权衡。账号恢复请求不直接暴露某邮箱存在,权限不足不列出秘密资源标题。提供可执行下一步不等于公开所有内部原因,错误设计要同时符合安全边界和任务恢复。

失焦验证减少提交后惊讶,却可能过早打扰尚未输入完整的人;提交验证安静但恢复成本更高。对明确格式在合适时机反馈,复杂业务规则在提交后展示摘要,避免每输入一个字符就宣布失败。

对密码长度这类输入过程中的提示,可以展示尚需满足的规则,而不是每个字符都触发红色警报。日期范围只有两个日期都具备时才适合判断。提交以后再做业务校验,可以避免逐字请求接口,但要显示处理状态并防止重复提交。选择时机应依据规则能否在当前输入阶段作出可靠结论。

过期校验如何让正确输入重新变红

首次输入可以先给规则提示,完成字段或提交后再判断。用户尚未输入完整日期时,不每个字符都触发“无效”。提交后用户修改相关字段,旧错误可标记待重验证,不必立即宣称新值已合法。校验状态包括未检查、检查中、通过与失败,避免二元红绿掩盖过程。

跨字段验证要跟随依赖。开始日期改变,结束日期旧错误可能不再适用,库存检查也需重新确认。组件可以记录依赖快照,判断哪些结果仍有效。规则清晰之后再选择失焦或提交时机,不为表单“实时”而无限调用服务。

提交防重复需要服务端身份,禁用按钮只是体验。响应丢失时用户可能刷新或在另一标签页再试,稳定业务意图与幂等机制防止重复预约。按钮恢复可点之前,先明确当前结果是否已知,不把所有超时解释成未保存。

错误只出现在页面顶部,窄屏用户找不到字段;输入修正后错误不清除,又会误以为仍无效。错误摘要链接对应控件,字段消息描述当前问题,异步旧响应不得覆盖新输入的有效状态。

设想用户输入日期甲触发校验,随后改成日期乙,乙的成功响应先回来,甲的失败响应后回来。若按到达顺序更新错误,正确值又会被标红。响应需要绑定请求版本或输入快照;只有仍对应当前值的结果才有资格更新字段。取消旧请求有助节省工作,但不能替代结果匹配。

把摘要、字段和错误类型连接起来

异步匹配可以采用请求序号与输入快照,只接受对应当前条件的结果。即使取消请求成功也仍执行匹配,因为外部或缓存结果可能已经返回。旧响应被忽略不代表服务器没有工作,资源预算和取消可以另行优化。

库存结果还有有效期与业务版本。用户停留很久后提交,需要最终确认;页面可以说明检查时间和预订尚未生效。不能把一次成功校验当成无限保证。若最终冲突,保留用户输入并提供当前可选范围,不要求从头重新填全部表单。

服务异常与字段错误可以同时存在。用户修正日期后清除相关错误,新的网络故障仍单独展示;不因为一个字段变动就移除整个错误摘要。状态处理依据错误归属,避免界面看似恢复却丢失关键诊断。

字段有可见标签和关联描述,错误消息说明原因而非责怪用户。提交失败保留允许保留的值,顶部摘要帮助定位;处理期间明确禁用的理由,重复请求安全处理。修正完成后清理对应错误但不吞掉新的服务异常。

错误摘要适合一次提交出现多个问题,列表项链接到具体字段或字段组。字段使用 aria-describedby 关联解释,必要时设置 aria-invalid,并保留正常标签。摘要出现后可以把焦点移到摘要,让用户知道提交结果;不要同时让多个 live region 反复朗读同一组消息,导致定位信息淹没在重复提示中。

构造乱序响应验证恢复能力

摘要出现在明确提交失败后,给当前问题列表与链接。字段消息靠近输入并说明约束,视觉不只用红色,辅助技术知道关联。焦点管理通常将提交结果带入合理位置,但不让每次失焦校验抢焦点。用户仍控制填写顺序。

跨字段错误可以关联组标题和受影响控件,链接带到需要修改的位置。全局服务错误提供重试或查询状态,不伪造一个字段链接。移动端顶部摘要与下方字段间距清晰,固定栏不会遮住跳转后的输入。

处理状态也要可理解。保存期间说明动作尚未完成,允许安全取消时提供入口;按钮文字与尺寸稳定,不让加载状态跳动。错误出现后普通值仍在,敏感值的重填原因如有必要说明,不把它误读成系统全部丢稿。

输入空值、超长值、非法格式与跨字段冲突,检查每个错误能定位。只用键盘跳转摘要,使用阅读器听到错误关联。模拟提交超时与过期响应,确认有效输入仍在,用户不会被要求重复不必要工作。

表单验收卡包含一个有效邮箱、一个格式错误日期和一条服务端业务冲突。第一次提交后保留有效内容,摘要可跳到日期字段,阅读器知道字段与错误关系。修正日期后旧响应不得把错误重新加回;服务异常不应标记邮箱有误。密码不放入地址、持久日志或错误报告。模拟超时再重试,检查用户是否需要重复输入原本有效的普通字段。验收需核对错误消息、控件关联与后台实际拒绝原因,而不是只截图红色边框。

从错误数据契约开始改善表单

错误示例也能成为文案回归样本。同一代码在中文和英文里保留原因、对象与动作,翻译不能把“待确认”变成“未提交”。数字、时间和范围来自实际规则,不在字符串里复制难维护常量。规则变化时对应样例一起更新。

对多步骤表单,返回前一页保留已确认普通输入,新的依赖改变则标记需要复核。不能因为一个字段修改让全部后续信息丢失,也不能保留已不适用选项并假装仍有效。页面说明影响,让用户完成必要而非重复的修正。

测试人员可以只拿错误文本尝试解释下一步,再对照字段和状态。若只说“请稍后再试”却实际需要改输入,说明错误分类错了;若要求改字段却实际服务失败,同样需要修契约。恢复动作准确比措辞礼貌更重要。

验收逐一比较后台拒绝原因、错误模型、摘要与字段说明。未知错误不泄漏内部信息,乱序结果不覆盖新值,超时不重复业务结果。键盘与读屏任务记录焦点和公告,截图只能作为外观证据,不能证明恢复完整。

除了测试修正后能成功,还要检查刷新、返回上一步与超时重试是否保留合适内容。普通输入可以保留在当前页面,敏感值不得无条件持久化;不同字段使用不同保存政策。把校验代码、界面消息和实际拒绝原因一起核对后,再优化图标与颜色,才能让视觉提示真正服务恢复。

上线后按错误类别观察修正、放弃与支持请求,不只统计失败数量。校验更严格可能增加合理拒绝,消息更具体也可能提高修正成功;分母与规则版本同时记录。用户反复犯同一种错误,可能需要改输入控件或规则,而不仅是让红字更大。

把校验结果绑定到一份输入快照

假设预约条件由开始日期、结束日期、人数和房型共同组成。用户只改人数,先前日期检查可能仍有效,但库存检查已经失效。如果组件只记录“日期通过”,提交时就可能沿用针对一人的空房结果去预约四人。每类检查需要列出依赖字段,并把结果绑定到对应快照,而不是给整个表单一个永久有效的绿色状态。

可以维护输入版本、检查版本和提交版本三种身份。输入修改使相关检查过期;异步结果只更新自己所对应的检查;提交使用一份冻结的意图快照。用户在提交过程中继续编辑时,新输入属于下一个意图,旧提交成功不能清掉这些新内容。是否允许处理中编辑取决于任务,但实现不能把两个意图混在一份状态里。

服务端标准化也是一种变化。例如它统一空白、格式化日期或转换允许的表示方式,返回保存后的结果。界面需要解释重要差异,不能只显示用户原始输入并宣称它就是已保存内容。标准化不应擅自改变业务含义;如果转换导致范围或金额变化,需要明确规则与确认。

测试把相同值、等价格式和不同业务值分开。取消旧请求后仍模拟旧结果到达,确认快照匹配生效。改变一个不相关说明字段,不应让所有检查失效;改变影响库存的字段,则必须更新业务检查。准确依赖关系既保护正确性,也减少不必要的请求和提示。

多步骤表单不能把完成步骤当作永远有效

第一步选地区,第二步选服务,第三步填付款信息。用户返回修改地区,服务可能不再可用,税费也可能变化。产品应明确标记哪些后续选择需要复核,保留仍合法的信息,不把全部步骤清空,也不继续显示每一步已完成。完成状态表示在当前前提下有效,不是一张永久通行证。

一个依赖表可以列出地区影响服务范围与税费,服务影响可选日期,日期影响库存,联系方式不影响前述计算。界面据此提示“已保留联系方式,请重新选择日期”,比“信息已失效”更可操作。依赖逻辑由业务定义,不能让前端凭页面顺序猜测所有后续值是否需要清除。

刷新恢复还需区分草稿与已提交。恢复草稿时重新核对资格和动态选择,失效项显示原因;不能把浏览器存下的绿色完成标记当作服务端确认。若表单含敏感资料,恢复策略可以只保留非敏感部分并说明重填原因。便利的默认应当是保留安全工作,而不是复制所有值到长期存储。

跨设备继续则需要服务器草稿和明确身份。URL 可以携带不含秘密的草稿引用,读取仍要授权。分享链接不应让任何持有者看见付款或个人信息。一个“稍后继续”功能同时涉及保存状态、授权和数据保留,不只是增加一个按钮。

服务超时后的恢复先回答结果是否已知

预约请求超时,可能是没有到达、还在执行,或已经成功但响应丢失。三者不能都显示“预约失败,请重新提交”。如果业务提供稳定意图身份,客户端可以查询当前结果;若结果未知,说明正在确认,并限制可能造成重复业务的重试。具体幂等机制由服务端实现,禁用按钮本身只防止一部分误操作。

重复提交同一意图时,系统应解释现有结果或处理状态;用户真正改了日期,则是新意图,不能被旧幂等身份吞掉。界面状态和身份生命周期需要一致。把一个随机标识永久挂在表单上,或者每次点击都重新生成标识,都可能破坏预期恢复,不能只看请求里有某个字段就认为已经安全。

成功响应迟到时也有上下文检查。用户已经取消页面并进入另一预约,不应让旧成功提示覆盖新表单。可以在相关历史记录中更新结果,必要时给可理解通知,但不清除当前输入。结果事实应被保存,呈现位置则需尊重用户当前任务。

测试人为截断响应,再从查询入口找结果,核对只生成一份预约。接着修改输入形成新意图,确认它不会错误复用旧结果。最后让旧响应迟到,观察新输入仍完整。这个测试比反复点击提交看按钮是否禁用更接近真实失败。

错误文案要通过可行动性审查

拿一条错误给未参与实现的人:他能说出哪个对象有问题、需要改什么,或者为何目前只能等待吗?“非法参数”没有任务含义,“请检查日期”可能仍缺少范围,“结束日期必须晚于开始日期”则指出可修正关系。具体到什么程度仍需遵循安全政策,不能为了明确而泄漏秘密对象。

审查也要检查错误是否责怪用户。服务不可用不能写成输入有误,组织限制不能写成用户没有认真填写,结果未知不能写成已失败。礼貌措辞无法补偿错误因果。稳定错误模型先区分真实原因,文案才可能准确地支持恢复。

动态字段的错误归属用身份而非数组位置

预约表单允许添加多位同行者,第二位邮箱错误,用户删除第一位后,错误不能仍按索引落到新的第二位。字段路径可以关联稳定子对象身份,渲染时转换到当前控件。排序和删除改变位置,不改变错误对应的原对象。

若错误对象已被删除,清除其相关错误,不清除其他字段问题。测试先收到业务错误再重排行,检查摘要链接、消息和实际值仍一致。动态表单的恢复准确性不仅是保留输入,也包括保留原因与对象之间的关系。

参考资料