表单计划：一页只做一件事

一页只做一件事，并不是必然要在一个页面上只展示单一的元素或组件（固然也可以这么做）。

2008年的时辰，我在*Boots.com*事变。他们想做一个单页的结账页面，运用谁人年月最新潮的技能，包罗手风琴组件、AJAX和客户端验证。

每个步调（寄送地点、寄送选项、名誉卡具体信息）都收在一个手风琴面板中。而每个面板都通过AJAX提交。提交乐成后，这个面板就会收起，而且通过滑动动画睁开下一个面板。

看起来就像这样：

Boots的单页结账页面，行使了手风琴面板揭示每一个步调。

用户历尽艰辛才完成了下单进程。错误难以矫正，由于上下转动并不利便。手风琴面板让人很是疾苦和分心。不行停止地，客户要求我们作出改变。

我们举办了改版，让每个面板单独成为一个页面，也就不必要手风琴和AJAX了。不外，我们照旧保存了客户端验证，防备不须要的处事器哀求。

看起来就像这样：

Boots的结账页面：每一步都是单独的一个页面。

这个版本的转化率许多几何了。固然我不记得详细数字了，我知道客户较量满足。

6年后（2014年），我在*Just Eat*事变，产生了同样的工作。我们计划了一个单页结账流程，个中每个部门都有独立页面。这一次，我记下了相干数据。

功效是每年能增进2百万订单。要清晰，这是订单量，不是利润。这个数据是基于新版本至少一周后，结账转化率晋升的比例得出的。这部门转化成了订单，数目激增52倍。

这是我们的移动端优先的计划：

Just Eat的结账分为多个页面。我们还在计划中进一步简化了付出页面：用户先选择“现金付出”或“银行卡付出”，然后才会转到相干的页面。痛惜我们并没有对这项优化举办测试。

两年后（2016年），GDS的Robin Whittleton汇报我，把每一步分为单独页面，是一种独立的计划模式，叫做“一页只做一件事”。除了它发生的数据结果，这种模式的背后尚有充实的公道性，这部门我们很快就会讲到。

不外在这之前，我们来细心看看这种模式到底是什么。

一页只做一件事，并不是必然要在一个页面上只展示单一的元素或组件（固然也可以这么做）。好比说，很也许如故会保存页头和页尾。

相同的，也不是说每个页面上只能有一个输入框（虽然，这么做也是可以的）。

这种模式是指把伟大的流程解析成多个小碎片，把每个小碎片独立一页展示。

好比说，与其把地点输入表单放在寄送选项和付出表单页面，倒不如把地点输入放在一个专用页面。

地点输入表单有很多输入框，但它对付用户来说，现实上是个单一的、独立的题目。在专用页面里答复这个题目是有原理的。

我们看看这种模式到底亏得那边。

固然这种模式经常能结出硕果（着实就是指订单和转化率了），我们最好照旧要相识它背后的道理。

正如Ryan Holiday在《The Obstacle Is The Way》中所说：

追念一下你第一次看到伟大代数式时的景象。这整个就是一团紊乱的未知标记。可是当你将它解析，独立成各个部门，谜底便水落石出。

一步步解析等式，就能轻松办理题目。

用户在填写表单时也是一样的原理，可能其他任何重要的工作都一样。假如屏幕上元素镌汰，只有独一的选择，阻碍就降到最低。因此，用户会专注于完成使命。

当用户填写小型表单时，错误可以很轻易被觉察，并尽早泛起出来。假如只有一个错误要批改，那就很轻易，能低落用户放弃的也许性。

纵然有多个错误，Kidly的地点填写表单也很轻易矫正。

假如页面的计划很简朴，加载就会更快。更快的加载速率能低落用户分开的风险，为我们的处事成立起信赖。

一页上内容越多，就越难以相识用户由于什么分开。不要误会我的意思：页面数据说明不能阁下计划，但这是个很不错的副产物。

假如用户必要频仍提交信息，我们可以把它们以更细的颗粒来生涯。举个例子，假如用户半途退出，我们还可以发送邮件，勉励他们完成订单。

不要误会我的意思：转动不是什么大题目——用户的祈望中，网页就是这么用的。但假如页面短小，用户就没须要转动了。主操纵项就更轻易呈此刻屏幕视野内，能夸大它的重要性，易于使命完成。

偶然辰，我们必要按照之前的谜底，给用户提供一条差异的路径。举个简朴的例子，两个联动的下拉菜单，用户在第一个菜单里的选择，会影响第二个菜单中的内容。

一页只做一件事可以轻松处理赏罚这种环境：用户作出选择并提交，处事器来抉择用户接下来看到什么——自然具有简朴和海涵的特点。

我们也可以用JavaScript。不外无论是构建照旧确保界面的可用性，都必要更高的本钱。假如JavaScript堕落，用户的体验也就被粉碎了。并且，按照全部这些分列组合选项来加载页面，会明显加重页面承担。

可能，我们可以行使AJAX，但这并没有停止渲染新页面（可能部门）。更要害的是，它并没有减轻处事端的数据来回压力。

还不止这些。我们必要发送更多代码量，而且提倡AJAX哀求，还要处理赏罚错误、表现加载指示器。这又让页面加载变慢了。

自界说加载指示器是有题目的，由于它们并禁绝确，不像赏识器的原生加载进度。用户也不认识它们——相对付整个网站来说，它们黑白凡的存在。无论怎样，相似性是用户体验的老例，除非真有须要，不然不要冲破它。

并且，页面上有两个动态更新的联动输入项，这会必要用户凭证必然次序来操纵。我们也可以通过可用/禁用和表现/潜匿来节制这些输入项，但这样也越发伟大。

最后，用户的某些变动，也许会导致随后的元素消散可能变革，这也让人疑惑。

假如页面上内容镌汰，屏幕阅读器就不必远程跋涉穿过很多多余的次要信息。用户可以直接前去第一个问题，然后敏捷开始操纵表单。

想象一下或人正要确认订单。要害时候，他发明付出信息里有一处错误。此时回到专用页面比找到页面*傍边*的某个部门更轻易。

用户点击“编辑”，会前去付出信息页面，内里有专用的问题和相干的表单项目。

深陷一个长页面中是会令人迷失偏向。记着，用户点击链接代表他们要执行特定的操纵——页面上的其他对象都是滋扰信息。

长页面还也许会加重事变量。好比说，假如想要在一个页面中睁开和收起面板，你就必要更多特另外逻辑思索。

一页只做一件事，这些题目都获得了办理。

用户不会只加载一半的页面。要么所有，要么没有。假如他们必要更多信息，就会点击链接，他们有选择手段。只要每一步都更靠近方针，用户并不介怀点击。

假如每件事都伟大无比——单页应用就是一个极度例子——机能题目就很难办理。是由于执行时刻题目？内存走漏？照旧AJAX哀求导致的？

人们很轻易以为AJAX能晋升用户体验，但增进代码量很少环境能缔造更快的体验。

伟大性转移到客户端，会袒护处事端的基础题目。但假如页面只做一件工作，机能题目就不轻易发生。假如然产生了题目，排查缘故起因也很轻易。

由于用户在不断地前去下一步，会发生一种正在提高的感受，在用户填写表单时给他们一种起劲的感觉。

长表单必要更长时刻来完成。假如所花时刻太长，页面超时也许导致信息丢失，发生严峻的挫败感。

又可能，电脑也许卡死，*《我是布莱克》*里的主角Daniel就是这样的例子。他的康健每况愈下，并且第一次用电脑就碰着了死机，然后数据丢失。最终他放弃了。

好比，假设我们储存了用户的付出信息，我们可以直接跳过那一页，直接带他们去“结账确认”页面。这会镌汰阻碍，晋升转化率。

移动优先的计划，倡导在小屏幕上只泛起最重要的信息。一页只做一件事，也遵循着沟通的方法。

当我们计一律套伟大流程时，解析成微小页面和组件，可以让人更轻易领略这些题目。

还可以利便地变更页面来改变次序。我们一次只研究一件事，这点和用户一样，能让我们更轻松地说明题目。

这可以减轻计划承担——这种模式让用户受益的同时，还能有这样的附加福利。

也不完满是。Caroline Jarrett在2015年写过一篇文章《一页只做一件事》，内里讲得很清晰。她表明道，用户调研“会汇报你某些题目组合起来放在长页面里更吻合”。

可是反过来，她也提到了“对付计划师来说‘属于一组’的题目……对付用户而言，并不必然要放在一个页面上”。

她提出了一个颇具开导性的例子，GOV.UK的验证页面中，他们实行把“建设用户名”和“建设暗码”先后放在两个页面上。

就像很多计划师以是为的，Caroline认为把这两者放在差异页面有点过分了。现实上，用户对此一点也不介怀。

要害在于，以一页只做一件事为起点，然后通过用户研究，验证把个中一些项目编组归并，是否能进一步改进用户体验。

这并不代表最终功效必然是把页面归并——在我履历中，最好的功效每每是把工作拆分隔来，仅此罢了。虽然，我也但愿听听你的履历。

这种低调不起眼的用户体验计划模式很机动、高机能、有海涵性。这是真正拥抱互联网的方法，对付自信满满和警惕翼翼的用户而言都很简朴。

一个页面上揭示许多（可能所有）内容也许会营造一种简朴的幻象，但就像代数式题目一样，除非把它们解析，不然很难处理赏罚。

假如把使命看作是用户想要完成的一笔买卖营业，把它解析为多个小步调很有须要。这就像我们在用网页的一砖一瓦来搭建渐进式表单。每一页背后的隐喻，都给潜意识营造一种正在提高的感受。

我还没有碰着过哪种其他的计划模式，能具备这么多的利益。这就是那种真理时候——谜底老是最简朴的。

原文作者：Adam Silver

原文地点：https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/

可乐橙，微信公家号：可乐橙（colachangreen）。UI/UX计划师，存眷互联网，存眷科技。现居杭州，与小搭档们正在创业途中。或者不是一名优越的计划师，至少是个快乐的计划师。

本文翻译宣布于大家都是产物司理，未经容许，不得转载。

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!