发布时间：2020-5-20 分类： 电商动态
一页只做一件事。没有必要在单个页面上仅显示单个元素或组件（尽管可以完成）。
2008年，我在* Boots.com *工作。他们希望制作一个单页结帐页面，该页面使用当时的最新技术，包括手风琴组件，AJAX和客户端验证。
每个步骤（邮寄地址，运送选项，信用卡详细信息）都放在手风琴小组中。每个面板都是通过AJAX提交的。提交成功后，面板将崩溃，下一个面板将通过滑动动画进行扩展。
它看起来像这样：
Boots的单页结帐页面使用手风琴面板显示每个步骤。
用户已经努力完成订单处理。错误很难纠正，因为上下滚动不方便。手风琴组非常痛苦，令人分心。客户不可避免地要求我们做出改变。
我们重新设计了每个面板成为一个页面，因此我们不需要手风琴或AJAX。但是，我们仍然保留客户端验证以防止不必要的服务器请求。
它看起来像这样：
Boots checkout页面：每个步骤都是一个单独的页面。
此版本的转换率要好得多。虽然我不记得具体的数字，但我知道客户很满意。
六年后（2014年），我在* Just Eat *工作，同样的事情发生了。我们设计了一个单页结帐流程，其中每个部分都有一个单独的页面。这一次，我记录了相关数据。
结果是每年增加200万个订单。要明确，这是订单数量，而不是利润。此数据基于新版本后至少一周后结帐转换率增加的百分比。这部分被转换为订单，数量激增了52倍。
这是我们的移动优先设计：
Just Eat的结账分为多个页面。我们进一步简化了设计中的支付页面：用户在进入相关页面之前首先选择“现金支付”或“银行卡支付”。不幸的是，我们还没有测试过这种优化。
两年后（2016年），GDS的Robin Whittleton告诉我，将每一步划分为单独的页面是一种独立的设计模式，称为“一页只有一件事”。除了它产生的数据效果之外，这个模型背后还有足够的合理性，我们将在稍后介绍。
但在此之前，让我们仔细看看这个模型是什么。
“一页只做一件事“究竟是什么意思？
一页只做一件事。没有必要在单个页面上仅显示单个元素或组件（尽管可以完成）。例如，页眉和页脚很可能仍会保留。
同样，这并不意味着每页只能有一个输入框（当然，这很好）。
此模式是指将复杂过程分解为多个小块，并在单独的页面上显示每个小块。
例如，不是将地址输入表单放在发货选项和付款表单页面上，最好将地址输入放在专用页面上。
地址输入表单有许多输入框，但它实际上是用户的一个独立问题。在专门的页面中回答这个问题是有意义的。
让我们看看这个模型的好处。
它在哪里？
虽然这种模式通常可以见效（事实上，它指的是订单和转换率），但我们更好地理解它背后的原理。
1.减少认知负担
正如Ryan Holiday在《The Obstacle Is The Way》中所说：
回想一下第一次看到复杂代数时的情况。整个是一堆乱七八糟的未知符号。但是当你把它拆分并成为独立的部分时，答案就会出现。
逐步分解等式，就可以轻松解决问题。
用户在填写表格或任何其他重要事项时也是如此。如果屏幕上的元素减少，则只有一个选择，并且障碍被最小化。因此，用户将专注于完成任务。
2.处理错误更容易
当用户填写小表格时，可以容易地检测并尽早呈现错误。如果只有一个错误需要修复，则很容易并且可以减少用户放弃的可能性。
即使有多个错误，Kidly的地址填写表格也很容易纠正。
3.页面加载速度更快
如果页面设计简单，加载速度会更快。更快的加载速度可降低用户离开并建立对我们服务的信任的风险。
4.易于跟踪行为
页面上的内容越多，理解用户离开的内容就越难。不要误会我的意思：页面数据分析无法设计，但它是一个很好的副产品。
5.轻松跟踪流程并返回上一步
如果用户需要经常提交信息，我们可以将它们保存在更精细的粒子中。例如，如果用户中途退出，我们也可以发送电子邮件以鼓励他们完成订单。
6.减少甚至消除滚动
不要误会我的意思：滚动不是一个大问题——在用户的期望中，网页就像这样使用。但是如果页面很短，则用户不必滚动。主要操作项更有可能出现在屏幕视图中，强调其重要性并且易于完成。
7.易于生产分支
有时我们需要根据之前的答案为用户提供不同的路径。举一个简单的例子，两个链接的下拉菜单，用户在第一个菜单中的选择，将影响第二个菜单的内容。
一个页面可以轻松地做一件事来处理这种情况：用户做出选择并提交，服务器决定用户接下来会看到什么——自然具有简单和包容的功能。
我们也可以使用JavaScript。但是，无论是构建还是确保接口的可用性，都需要更高的成本。如果JavaScript出错，则会破坏用户体验。此外，基于所有这些排列选项加载页面会显着增加页面负担。
或者，我们可以使用AJAX，但这不会避免渲染新页面（或部分）。更重要的是，它并没有减轻服务器端的数据往返压力。
不仅。我们需要发送更多代码并启动AJAX请求，以及处理错误和显示负载指标。这反过来会使页面加载速度变慢。
自定义负载指示器存在问题，因为它们不准确，与浏览器的本机加载进度不同。用户也不熟悉它们——它们相对于整个代购源码网站而言是特殊存在的。在任何情况下，相似性是用户体验的惯例，除非确实有必要，否则不要破坏它。
此外，页面上有两个动态更新的链接条目，这将要求用户以特定顺序操作。我们还可以通过可用/禁用和显示/隐藏来控制这些输入，但这也更复杂。
最后，对用户的一些更改可能会导致后续元素消失或更改，这会让人感到困惑。
8.屏幕阅读器更加用户友好
如果页面上的内容减少，则屏幕阅读器不必通过大量冗余的辅助信息长途跋涉。用户可以直接转到第一个标题并快速开始处理表单。
9.易于更改细节
想象一下有人即将确认订单。在关键时刻，他发现付款信息有误。此时返回专用页面比查找页面的一部分更容易*。
用户点击“编辑”，用户将转到具有专用标题和相关表单项的付款信息页面。
被困在一个长页面可能会分散注意力。请记住，用户点击链接表示他们想要执行特定操作——页面上的其他内容都是干扰。
长页面也可以增加工作量。例如，如果要在页面中展开和折叠面板，则需要更多额外的逻辑思维。
一页只做一件事，这些问题就解决了。
10.用户可以更好地控制数据
用户不只是加载了一半的页面。全部或全部。如果他们需要更多信息，他们将点击链接，他们可以选择。只要每个步骤更接近目标，用户就不介意点击。
11.解决了性能问题
如果一切都很复杂——单页应用程序是一个极端的例子——性能问题很难解决。是由于执行时间问题？内存泄漏？或者它是由AJAX请求引起的？
很容易认为AJAX可以改善用户体验，但添加少量代码可以创建更快的体验。
复杂性转移到客户端，这将模糊服务器的基本问题。但如果页面只做一件事，性能问题就不容易产生。如果出现问题，可以很容易地解决问题。
12.它有前进的感觉
因为用户不断地移动到下一步，所以有一种向前移动的感觉，在填写表格时给予用户积极的感觉。
13.降低丢失信息的风险
长表单需要更长时间才能完成。如果所花费的时间太长，页面超时可能会导致信息丢失和严重挫折。
或者，计算机可能卡住，*《我是布莱克》*中的主要字符Daniel就是这样的例子。他的健康状况变得越来越糟，他第一次用电脑坠毁，数据丢失了。最后他放弃了。
14.第二次使用经验更顺畅
例如，如果我们存储用户的付款信息，我们可以跳过该页面并将其直接带到“结帐确认”页面。这将减少障碍并提高转换率。
15.这是移动优先设计的补充
移动优先设计仅在小屏幕上提供最重要的信息。一个页面只做一件事，它遵循相同的方式。
16.设计过程很简单
当我们设计一个复杂的流程时，它会分解为小页面和组件，使其更容易理解。
更改页面以更改顺序也很方便。我们一次只研究一件事，就像用户一样，我们更容易分析问题。
这可以减轻设计负担——这种模式对用户有益，同时还具有其他优势。
这种模式适合所有情况吗？
不完全是。 Caroline Jarrett在2015年写了一篇文章《一页只做一件事》，非常清楚。她解释说用户研究< ;;会告诉你，长页面中的一些问题更合适。
但反过来，她也提到“对于设计师来说，‘属于一个群体’问题……对于用户来说，不必放在一个页面上”。
她提出了一个鼓舞人心的例子。在GOV.UK的验证页面上，他们试图在两个页面上添加“创建用户名”，“现状”和“创建密码”。
正如许多设计师所认为的那样，卡罗琳认为将两者放在不同的页面上有点太多了。事实上，用户根本不介意这一点。
关键是从一个页面开始，然后验证用户研究和验证可以进一步改善用户体验。
这并不意味着最终结果必须是合并页面——根据我的经验，最好的结果往往是把事情分开，仅此而已。当然，我也想听听你的经历。
总结
这种低调，不引人注目的用户体验设计模式具有灵活性，高性能和包容性。这是真正拥抱互联网的方式，对于自信和谨慎的用户来说很容易。
在页面上显示许多（或全部）内容可能会产生一种简单的错觉，但是像代数问题一样，除非它们被分解，否则很难处理。
如果您将任务视为用户想要完成的事务，则必须将其分解为多个小步骤。这就像我们正在用一块砖和一块网页构建一个渐进式表格。每一页背后的隐喻都为潜意识创造了一种进步的感觉。
我还没有遇到任何其他设计模式，我有很多优点。这是一种真理时刻——答案永远是最简单的。
原作者：Adam Silver
原始地址：https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/
