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