作者从实际工作出发，讨论了表单设计中误操作的背后思维。

这段时间，在准备CRM升级改版工作，其中有一个可用性问题。

有部分用户反馈添加工单功能的体验不好，经了解后，这些用户需要经常添加工单，而工单填写的内容较多，她们有时会不小心点到模态背景，把添加工单弹窗关闭了，而一关闭，原先填写的内容也会随着删除，浪费时间和精力。

在CRM中，内容较多的表单都是采用侧滑弹窗控件，弹窗的关闭方式共有4种，“点击关闭图标”、“点击模态背景”、“点击收起图标”、“点击底栏取消按钮”，其中“点击收起图标”方式所起作用不大，在实际场景中，也比较少人操作，所以这种方式在新版本中将被去掉，这里不做讨论。

添加工单弹窗原设计

为什么容易误操作？

从界面来看，“点击关闭图标”“点击底栏取消按钮”的方式都没有这个问题，因为操作精确度要求高，存在误点击可能性小，但是“点击模态背景”的方式就不一样了，在这个页面中，模态背景和内容区所占面积差不多，容易被误点到。

所以第一个原因是模态背景较大，而第二个原因则是，在这么长的表单中，用户有间隔保存的需求，但是保存按钮却没有时刻被看到。

所以针对以上的原因，有了以下方案：

1. 加大内容区面积，减少模态面积，同时把保存按钮一栏固定悬浮于底部；
2. 点击模态背景时，给二次确认提示，同时把保存按钮一栏固定悬浮于底部；
3. 去掉“点击模态背景”关闭弹窗的方式，同时把保存按钮一栏固定悬浮于底部。

但是这三个方案都存在或多或少的缺点：

第一个方案，只能从一定程度上减少误点击概率，不能完全解决问题；

第二个方案，如果只运用在工单模态或有操作复杂页面，会影响用户习惯，如果全部运用，那有的场景又不需要二次确认，操作麻烦；

第三个方案，不管是运用在工单模态或有操作复杂页面，还是运用全部页面，都会影响用户习惯，因为已经有大部分用户适应了通过点击模态背景来关闭弹窗的方式，而且反馈也是比较快捷方便的。

当面对着这三个方案一筹莫展的时候，我开始想，是不是哪里弄错了，或者思路是不是狭窄了被捆住了，是不是还有其他更好的方案。

后来，我发现这三种方案其实都是属于防错的措施，就是减少或防止用户犯错发生的机会。那如果允许用户犯错呢，犯错之后再给补救措施呢，这样一想，顿时有种豁然开朗的感觉。

再次分析需求，用户在填写表单过程中，误点击模态背景，把弹窗关闭了，重新进来之后内容被清除了，需要全部重填。

这个需求中，有两个点可以抓住，一个是误点击，另一个重新进来之后内容被清除掉，之前的全部思考都集中在第一个点上，而忽略了第二个点。所以有了另一个方案，把重心放在容错上，适当防错。

添加工单弹窗新方案

这个方案，判断通过点击模态弹窗方式关闭弹窗时是否处于编辑状态，若处于编辑状态，则在关闭弹窗的同时缓存已编辑数据，在用户下次进到弹窗时显示恢复提醒，同时也加大内容区面积，把保存按钮固定悬浮于底部，真正地解决问题。

最后，这个方案也得到了反馈用户和产品同事的认可和支持。

分享这篇文章是因为感触较深，“防错”和“容错”都是常见的可用性原则，但在日常工作中，“容错”却很少用到，甚至有时想不起来！

原本在运用上，就应该是“防错”在先，“容错”在后，尽量先让用户不要出错，出错了也有补救措施。

但是现在很多时候只停留在防错层面，一到“删除”操作就给“二次确认提示”，再不思考其他，好像是万能的，但其实不然，有的场景并不适合，例如上述例子。所以不要成为遇到“删除”只会“二次确认”的交互，这着实不妙啊。

本文由 @奶茶喝光了 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。