［译］更好的表单设计: 每一页，一件事（实例研究）

• 原文地址：Better Form Design: One Thing Per Page (Case Study)
• 原文做者：Adam Silver
• 译文出自：掘金翻译计划
• 译者：horizon13th
• 校对者：LeviDing, laiyun90

更好的表单设计: 每一页，一件事（实例研究）

2008 年，我在 Boots.com 工做时，团队提出需求，要设计当时最流行的单页表单进行付款操做，主要技术有折叠选项卡，AJAX，客户端验证。

表单提交的每一步（快递地址，快递方式，付款方式）都是一个折叠模块。每个模块经过 AJAX 提交，提交成功后当前模块折叠，下一步所在的折叠模块滑动展开。

以下图所示：

Boots 网站的单页付款图，每一步都是一个折叠模块。

用户在提交订单时备受折磨，由于一旦填错内容就很难修改，用户须要上下来来回回滑动屏幕。折叠面板的设计简直太让人不爽了。果不其然，客户提出需求让咱们修改。

咱们从新设计了页面，将原来的每一个折叠模块变成了独立的页面，删掉了折叠面板效果，也再也不使用 AJAX，惟独保留了客户端验证，以省去没必要要的服务器请求。

更改后的设计以下：

Boots 网站的多页付款图，每一步都是一个单独页面。

这一版本变得好多了。我记不清确切的支持数据，但我记得客户当时很满意。

六年过去了（2014），当我就任于 Just Eat，一样的事情在不一样地点又发生了一次。咱们又从新设计了单页提交订单页面，将单页的多个模块修改为独立的页面。此次，我记录下了数据。

结果显示，每一年新增订单数量有两百万。这里要强调一下，这个数字仅仅是订单量，还不是利润。该数据是版本更新一周内的订单统计结果，由付款时订单增长的百分比而得来。咱们这个百分比转化成了订单数量，再乘以52周。

下图是一些移动端设计：

Just Eat 的付款被分红了多个页面。咱们还提出了一个设计方案使付款更简便：用户能够选择“现金付款”或者“银行卡付款”，而后跳转到相关页面去填写信息。很遗憾，咱们从未对此进行测试。

几年过去了（2016），GDS 公司的 Robin Whittleton 告诉我说，把每一件事情放在属于本身一个页面里，这自己是一个设计模式，被称为“每一页，一件事”英文为“One Thing Per Page”。除了数据支持，这个设计模式背后还有可靠的理论依据，咱们立刻会讲到。

不过在这以前，咱们先来看看这个设计模式究竟是什么样的。

“每一页，一件事”到底意味着什么？

“每一页，一件事”，指的并非在一个页面上只摆放一个元素或者组件（固然了，这样也能够）。不过至少，你也得给加个页眉页脚吧。

同理，它也不是在单页上放置单个表格字段。（尽管，你非要这样作也不是不行）

这种模式是将复杂繁琐的步骤分割成不少个更小的部分，将这些更小的部分格子分布在只属于它们本身的屏幕。

例如，在设计快递地址表单时，咱们将这个功能单独放置一页，而不是将它和快递方式，付款方式几个功能挤在同一个页面。

一个快递地址表单有多个字段（城市，街道，邮政编码等），然而终究这些字段共同回答了同一个具体问题。于是在同一页面上解决这个问题是合理的。

下面让咱们考虑一下，这种模式究竟为何这么好。

为何这种模式这么好嘞？

这个模式每每产出奇妙美味的果子（实际上是订单啦，原谅个人比喻）可以理解其背后的运做原理，那就好办啦。

1. 减小认知负荷

正如 Ryan Holiday 在 The Obstacle Is The Way （最近在美国很火的鸡汤畅销书－－译者注）里所说的那样：

还记得你第一次见到复杂的代数方程么？有那么一大堆混淆的符号和未知数。可是当你静下心分解方程式，最终获得的，那就是答案。

解决方程式的简单办法就是，分步骤分解等式。

一样的道理能够应用到用户试图填好一份表单，或者任何其它事情。若是屏幕上内容较少，且用户只需作出一种选择，阻力将降到最小。于是用户就会专一停留在任务自己。

2. 简化错误处理

当用户填写一个较小的表格时，一旦犯错可以早发现早处理。若是只有一件事，修复错误会变得很容易，这下降了用户放弃填写表格的概率。

即便有好几个错误发生，Kidly 的地址表单修改起来仍很简便。

3. 加快页面加载

当页面设计上听从“小”的原则，页面加载速度会更快。快速加载的页面下降了用户等不及而离开的风险，在服务上获得了用户的信任。

4. 简化行为追踪

页面内容越多，越难分析用户为何会离开页面。这里要弄清楚：用户行为分析并不该该做为页面设计的主导，但它做为副产品仍是不错的。

5. 简化进度查看和返回上一步操做

若是用户频繁提交信息，咱们能够将信息以更细化的方式保存起来。好比当有用户在中途放弃订单，咱们能够发邮件以推进他们完成订单。

6. 减小滑动操做

不要搞错了噢，滑动操做也没什么大不了 —— 用户指望网页以滑动的方式运做。可是一旦页面变小了，用户没必要再滑动屏幕。并且推广召集活动通常都在折叠面板最顶端，强化了需求，也简化了操做流程。

7. 分支操做更便捷

有时候咱们咱们会根据用户上一步的操做而决定下一步进入不一样的分支操做。举个简单的例子，假设咱们有两个下拉选择菜单。用户在第二个菜单看到的选项取决于他在第一个菜单的选择。

每一页只作一件事使其更简单：当用户在第一个下拉菜单选好并点击提交，服务器响应并返回给用户第二个菜单的内容，简单易行。

咱们可使用 JavaScript，但其实构建界面，并保证用户界面能够访问比想象的要复杂。假若 JavaScript 出错，用户可能会有很很差的用户体验。并且加载页面全部可能的选项也是一笔重量级开销。

咱们可使用 AJAX 代替，但这其实并无把咱们从渲染新页面（模块）中解放出来。更严峻的是，AJAX 也没有减小服务器端的传输开销。

这还不是所有，咱们须要发送更多的代码以发送 AJAX 请求，处理错误并显示加载指示器。再强调一下，这些都会使网页加载得更缓慢。

自定义加载进度条也很棘手，和浏览器原生实现的进度条不一样，它每每是不许确的。并且每一个网站都有本身特定的展示方式，用户对它们并不熟悉。然而，用户的熟悉程度是一个用户体验的公约，在非必需的状况下咱们最好不要破坏它。

另外，在单一页面上动态更新两个甚至多个字段，这须要用户按前后顺序交互。虽然咱们能控制显示隐藏输入框，但这仍是过于复杂。

最后，用户可能会更改他所填写的内容。内容更改可能须要后续面板隐藏，或者后续面板内容也更改。这些也很使人困惑。

8. 阅读模式友好

若是页面上内容少，阅读模式下用户没必要再迷失于大量的无关信息。用户能够迅速定位标题以与表单更快速地交互。

9. 简化细节修正

想象下某个用户正在肯定订单，忽然他在付款信息看到一个严重的错误。返回到上一页远比返回一页中的某一部分简单得多。

点击“编辑”按钮把用户带回到付款方式页面，页面上有专有标题和相关表单字段。

浏览页面中途有其余内容，这是很迷惑的事情。记住噢，点击连接去完成某些操做，这种在页面上作其余事情的交互将会让用户分心。

并且这里面有不少潜在工做。好比说，若是你想在同一个页面上显示隐藏模块，须要额外逻辑来处理。

每一页只作一件事的话，这些问题就会烟消云散啦。

10. 用户能够控制其数据受权

用户不可能只让浏览器加载一半页面，要么所有，要么什么都没有。若是用户想要更多的信息，它能够点击连接，拥有选择的权利。只要每一步能让他们更接近目标，用户一点都不介意多点一下鼠标。

11. 解决性能问题

若是全部内容融合成一个庞大的怪物 —— 最极端的的例子就是单页应用 —— 那性能问题是很难解决的。究竟是运行时间问题呢？仍是内存泄漏？或者 AJAX 调用？

咱们很容易想到 AJAX 改善了用户体验，可是代码量的增长应该不会加快用户感觉吧。

客户端的复杂性掩盖了服务器端的根本问题。若是一页只作一件事，性能出问题的可能性很小。一旦有了问题，也很容易查找出来。

12. 增长用户感知进度

因为用户不断的移动到下一步，这种进展感给用户积极的感受，好像在填写表格同样。

13. 减小信息丢失风险

一个长表格须要更多填写的时间。若是花费时间过久，页面可能超时致使信息丢失，给用户带来巨大的挫败感。

又或者，电脑死机，像 我是 Daniel Blake 的主角 Daniel 遇到的状况那样。他健康情况日益恶化，从没有使用过电脑，常常遭受电脑死机数据丢失的痛苦，最后只得放弃。

14. 提高老用户体验

若是咱们能保存用户的快递地址和付款信息，能够跳过这些页面，引导客户直接到“检查无误确认提交”的页面。这减小了用户阻力，增长用户转化。

15. 补充移动优先设计

移动优先设计激励咱们设计出小屏幕中相当重要的元素。一页只作一件事就遵循了这样的方法。

16. 设计流程更简单

当咱们设计一个复杂的工做流时，将其分解成原子性的单个页面多个模块，有助于问题的理解。

切换屏幕改变顺序很容易，分析问题的范围也变得容易，正如用户一次只作一件事情那样简单。

这种用户受益模式的很好的副产品，这样还减小了设计精力。

这种模式适合全部情景么？

并非。Caroline Jarrett 在 2015 年第一次写过一篇一样标题的文章每一页，一件事。她讲到用户研究会很快显示“一些问题最好归类在一块儿在长页面中显示”。

然而，相反的是，她也解释说天然地“走到一块儿”的问题们每每是从设计师的角度来看的，从用户角度来看，这些问题并不须要放在一块儿。

她举了一个启发性的例子。当为 GOV.UK 作认证时，他们测试将“建立用户名”放在一页，而将“建立密码”放在下一页。

像大多数设计师同样，Caroline 认为将上述两个表单字段放在单独页面上是矫枉过正的。但现实是，用户并无对此感到太困扰。

关键在于，至少开始于“每一页，一件事”，随着用户研究，找出适合的字段来进行合并分组以优化用户体验。

这并不意味着，最终你总会以把全部页面都合并在一块儿。在我经验看来，最好的结果每每是将事情拆分。固然了，若是你有更好的经验，我也愿意倾听。

总结

这种低调不起眼的 UX 模式也能够设计地具有灵活性，高性能，包容性。它迎合网络大众，使得全部用户群体都能从容应对。

在同一页面上摆放太多内容（甚至所有内容）可能会带来简洁的错觉。但就像代数方程那样，复杂的代数方程若是不分解开来，实际上更难解答。

若是咱们把一项任务看做是用户想要完成的交易，将这个流程分步骤处理是很合理的。就好像咱们使用网络传输的形式做为逐渐展示页面的形式，这种“One Thing Per Page”背后的隐喻给用户提供了潜意识里的前进感。

至今我还未见到过比“每一页，一件事”更好的设计模式。这就是这个时代：简单，就是这么简单。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、React、前端、后端、产品、设计 等领域，想要查看更多优质译文请持续关注 掘金翻译计划。