无限滚屏、分页亦或加载更多，到底怎么选？【UXRen译#139】

作者：Christian Holst（翻译：xiuxiu  审校：Gogi）

电商网站里展示商品的最佳交互形式是什么？是分页、“加载更多”按钮还是无限滚屏？我们在Baymard机构开展了几项持续整年的大规模可用性测试，研究了50多家主流电商网站。我们测试了这3个设计形式在PC端和移动端的效果（以及一些其他问题）。

由于分页功能在几乎所有电商平台上都可以默认设置，它仍然是加载新商品最普遍的方法。然而我们的可用性测试发现：“加载更多”按钮与延迟加载机制（指当真正需要数据的时候，才执行数据加载操作，避免无谓的性能开销）相结合是一个更优秀的实施方案，它能够带来更无缝的用户体验。

我们发现在可用性上，无限滚屏简直糟透了——尤其是在搜索结果页和在移动端上。然而这些结果不是非黑即白的，每一种商品展现形式的优劣取决于当前页面的情境。

我们将在本文中详细说明Baymard机构对“加载更多”按钮、无限滚屏和分页这三种形式的可用性研究结论，包括移动端和PC端。我们还会理解，为什么搜索结果页与分类导航的解决方案要有所不同，顺带介绍一些主流电商网站的案例和可能误区。

一、测试的发现

我们对电商网站的商品列表和筛选列表页进行了大规模可用性测试，用户们对翻页样式怨声载道。测试用户普遍认为翻页功能速度慢，并且展示很多页码的链接经常令用户不愿浏览整个商品列表。更重要的是，我们观察到测试用户在翻页功能下，浏览的商品数量比“加载更多”按钮或无限滚屏这两种形式浏览的商品数量要少得多。另一方面，翻页的好处是用户在第一页商品上浏览的时间相对更长。

图注：很多测试用户会根据页码的数量（例如上图Macy’s网站展示的）来估算搜索结果页的商品总数。尽管页码可以让用户自由地跳转到任何一页，但测试中很少用户会这样做。相反，他们几乎只使用“下一页”和“上一页”这两个按钮。

在无限滚屏（或叫无止境滚屏）的状态下，大部分用户会觉得页面所有商品在瞬间加载完成（不管他们实际上有没有看到所有商品），而不会产生数百商品同时加载的负面效应。

因此，如果好好应用无限滚屏机制，将会产生非常流畅的无缝体验。用户能在不被打断的情况下滚动商品列表，而不需要额外的交互操作——用户滚动屏幕即可看到商品。

这样一来，测试结果就不意外了：用户在无限滚屏的状态下，浏览的商品数量比翻页或“加载更多”按钮都要多很多。不过，无限滚屏显示的第一屏结果比较少，因此更适合快速展示某个品类的范围。由于正常情况下，用户不会滑着滑着突然停止，他们想要浏览更多商品，因此不会对列表中的单个商品过于纠结。

图注：请注意滚动条的长度。在提供无限滚屏的网站上，测试用户经常浏览100个甚至更多商品，这个数量在提供翻页的页面上是绝对达不到的，在提供“加载更多”按钮的页面上达到这个数量的情形也极为个别。尽管对前50-150个商品来说，无限滚屏让用户的浏览更有效率，但如果列表没有结束的话，一些用户会继续滚动列表而不去关注任何一件商品，这就使无限滚屏的好处变为坏处了。

有时候，无限滚屏也会让用户无法看到页面底部。这是无限滚屏最大的设计难题，即，一旦用户到达列表底部，页面会持续加载新的结果，用户看到页脚的时间只有一两秒，然后下一批搜索结果加载完成，突然出现，页脚随之消失。在搜索结果页和一级品类列表页中，通常列表中有很多商品，无限滚屏实际上让用户永远也到不了页面底部。这可能是一个大问题，因为页面底部能用户跳转到帮助页，还提供了交叉导航、关联品类，以及关于用户服务、配送和退货的信息。

我们测试的网站中只有很少一部分使用了“加载更多”按钮，但它们的用户接受度很好。实际上，当我们对标TOP50美国电商网站时，发现只有8%的网站使用“加载更多”的方法。“加载更多”是很简单的设计，它不需要用户去想该去哪页，因此不给用户造成负担，它仅仅询问“你是否要看更多结果”，这使得交互界面非常简单，它按用户需要加载更多商品，带来的认知负荷可能是最小的。在“加载更多”状态下，用户总体上浏览的商品数量比翻页页面更多，但因为加载更多商品仍需要用户做出主动选择和点击，用户会比无限滚屏时更仔细地查看商品。

图注： 在提供了“加载更多”按钮的网站，例如American Eagle Outfitters上面，用户比提供翻页功能的网站浏览了更多商品，但他们不像在无限滚屏的情境下那么快地扫描商品。不仅如此，商品探索变得简单了很多，因为用户能够直接在当前列表中插入更多商品。

“加载更多”和无限滚屏的好处之一是商品列表可以增加而不是被替换。“加载更多”允许用户在整个列表中更方便地比较商品。拥有一个整合的商品列表令用户更容易地评估哪些商品值得点击，从而提升了商品的总体发现率。

那么，你应该使用哪种加载方法？按照理想情况，根据测试结果，你应该使用“加载更多”的多种变体。测试显示没有哪一种方法在所有情境下都是完美的，不同的情境要求使用“加载更多”的三种变体之一。我们将在本文剩余部分讲到这三种变体：

1. 对分类列表页，结合使用“加载更多”和延迟加载。

2. 对搜索结果页，使用“加载更多”，最好是让展示商品的数量基于相关度灵活可变。

3. 在移动端，使用“加载更多”，但默认展示的商品数量要比PC端少一些。

注意：这些发现是居于对电商网站的测试。三种交互形式的表现在其他类型网站上会有不同。

二、在分类列表页使用“加载更多”

在对电商网站首页和分类导航的大规模可用性研究当中，我们发现，加载新商品的最佳方式是结合使用“加载更多”按钮和以延迟加载方式实现的无限滚屏：第一页商品列表上展示10-30个商品，延迟加载另外10-30个商品；一旦用户点击“加载更多”按钮，再加载10-30个商品，并恢复延迟加载，直到接下来的50-100个商品加载完成，这时再次显示“加载更多”按钮。“加载更多”按钮控制的50-100个商品决定了用户的浏览何时被打断，而延迟加载仅仅是为减少加载时间和负担所实施的优化策略。

注意，这里所说的商品加载数量仅作为一个范围参考。测试显示最理想的数量取决于你的网站情境以及行业。对于更细节导向的商品列表（大部分电子消费品、硬件、部件和配件），加载数量应该少一些。相反，测试显示当商品列表包含更多依靠视觉审美的商品（服饰、家具、装饰品等等）时，用户能一次处理更多商品（对延迟加载，有很多可用的基础性代码和插件，其中两个是Mika Tuupola针对jQuery的Lazy Load，以及LazyLoad XT）。

图注：Crutchfield运用了“加载更多”按钮与延迟加载相结合的方式。首先，默认加载20个商品；一旦用户滚动到第10个商品，Crutchfield延迟加载另外20个商品。到达第40个商品时，用户面前出现“加载更多”按钮。

用以上方法，页面能够快速加载，因为只有很少数量的商品是最初加载完成的。更重要的是，对小型和中型品类来说，延迟加载会允许用户在不被打断的情况下浏览完整个商品列表。实际上，当用户使用筛选功能时，对于大部分准确定义的品类来说，“查看全部”就像是可实现的一样。对于更长的列表，用户会遇到“加载更多”按钮，它使得有意愿的用户能够很轻松地继续浏览，并为用户在滚动间隙提供了良好的休息，让用户很容易到达页面底部，并让他们有时间考虑使用筛选功能是否比继续滚动浏览上百个商品要更好。

延迟加载和无限滚屏（尤其是后者）的缺陷之一是页面高度持续加长；如果用户把滚动条拖拽到底部，他们会到达页面底部，但只看见底部1或2秒钟，然后下一个商品就又加载出来了。新商品被填加到列表中，页底被推到下面，滚动栏被拉长。在测试中，这导致了参差不齐的页面体验。使用“加载更多”和延迟加载的混合形式，上面的问题大体上被解决了，因为用户跳跃一两次后页面就间断了。然而，如果你要寻求完美的交互方式，考虑用单个商品的高度乘以列表页的总行数（在“加载按钮”出现之前）来“伪造”页面高度吧——即便列表中剩下的商品行还没加载完成。这个人工伪造的页面高度能让滚动条从页面顶部开始就占据恰当的空间，因此它更准确地体现了页面实际高度。这种方式也能让用户不用跳跃就能来到页底。延迟加载会和之前一样继续加载商品——只是现在这些商品占据的是为它们预留的空间，而不是延长页面长度。

三、在搜索结果页使用“加载更多”

由于搜索的开放性，搜索结果页通常比分类列表页的商品多很多。在我们对电商网站搜索体验的可用性研究中，搜索结果包含数百个商品并不少见，在大型零售电商网站上，搜索请求通常返回数千个商品。

此外，搜索结果是根据相关性排序的。因此，第5个搜索结果对用户的相关程度通常比第100个要高许多。这意味着用户在搜索的情境中不应该需要扫描100个商品——网站应该鼓励用户仔细查看前几个商品。因此，搜索结果页应该默认加载25-75个商品，并且在这类页面无限滚屏永远也不该被使用。（有趣的是，Etsy著名的A/B测试记录了搜索体验中许多使用无限滚屏的例子）翻页或者“加载更多”按钮更适合搜索结果页，因为这两种形式不鼓励用户快速扫描大量商品，而是提醒用户将更多注意力放在查看头一批商品当中。实际上，由于展示的搜索结果少，延迟加载也不是一个必须项（但如果已经用在分类页了，在这里不妨也使用）。

图注：L.L. Bean这里使用了“加载更多”，由于结果的相关性递减，用户得以有一个自然的停顿（不像无限滚屏），但他们仍然有将第一批加载的商品和第二批进行比较的机会（不像翻页）。

更进一步，默认加载的商品数量可能是根据搜索结果的相关性得分进行动态调整的。大部分搜索引擎根据相关度得分对每个结果（商品）排序，并优先返回那些得分最高的结果。这些分数可以用来决定加载商品数量的动态边界。根据网站是鼓励用户仅仅快速扫描前几个商品，还是浏览更多商品，动态边界增加或减少。

动态调整商品数量可以通过监测搜索结果的相关度得分突然下降的节点来实现。基于这些下降的节点就可以确定某个搜索请求应该返回的最佳商品数量。举例来说，如果在前28个商品之后，相关度得分开始大幅下降，那么加载的商品数量可以适当减少来增加用户对前面商品的注意力。如果前100个商品的相关度得分都很高，那么加载的商品数量可以适当增加来鼓励用户发现更多商品。

四、在移动端使用“加载更多”按钮

图注：由于页码链接排放的很紧密，它们经常很难点击中。此外，移动端用户厌恶等待页面重加载，更倾向于避免翻页操作。

图注：商品列表很长的情况下，无限滚屏的形式会使新的搜索结果不断加载进来，持续把页底推到下面，因此用户触达不到页底。

在我们持续整年的移动电商研究中，我们发现页码链接很难被准确地点击到，因此通常会导致多余的页面加载。而无限滚屏则被证明在帮助用户探索很多商品时非常有效（实际上，测试用户在提供无限滚屏的网站上滚动浏览的商品数量是他们在提供翻页功能的网站的2倍多）。然而，正如前面提到的，无限滚屏让用户到不了页底。在移动端的测试中，这个弊端使得一些至关重要的页底链接——例如“PC端”网站、“常用问题”以及“配送”、交叉导航和类似的要素不能被用户触达，而用户对能够触达页底的这些链接都有着明确的期望。

图注：如Lowe’s网站这样提供一个“加载更多结果”按钮，为用户提供了很多无限滚屏能提供的好处，而又让页底可触达。

因此，最佳解决方案是在列表底部有一个大大的“加载更多”按钮。然而移动端有一些独特的限制：

4.1 更小的屏幕尺寸

移动端屏幕比PC小得多，列表中的商品占据的屏幕空间比例相对来说很大，通常在列表显示模式下一屏只显示2-3个商品。因此，50个商品在移动设备上占据的视图高度比台式机上要高很多。从另一个角度说，数量相近的商品列表，用户在移动设备上比在PC端需要更多的交互操作（例如滚屏）。

4.2 滚屏限制

在可触摸设备上，用户通常只能依靠用手指拖拽和滑动完成滚屏。PC端的操作模式比这丰富得多，比如鼠标滚轮滑动（或者在触控板上滑动）、可拖动的滚动条以及许多种键盘快捷输入（上下箭头、Page Up和Page Down按键、空格键等等）。

4.3 慢速滚屏

更严重的是，在测试中，用户对持续不断地滚动商品列表展现出了更低的控制度。一方面，一些用户因为需要不断用手指在屏幕上拖拽，滚动的速度很慢；在这种情况下，一个仅包含50个商品的列表都需要很长时间才能浏览完毕。另一方面，另一部分用户会滚动得特别快，原因是他们在快速连续的滑动操作中不小心激活了自动滚屏；在这种情况下，商品嗖嗖地从用户眼前掠过，用户却看不清任何一个。

4.4 JavaScript事件

最后，JavaScript事件在大部分触摸屏设备上驱动的方式意味着动态的延迟加载技术经常无法实现。JavaScript事件只能在用户滚屏结束时开始，因此当用户在滚屏的时候商品无法被系统取到，只能等待滚屏结束。

出于上述原因，我们建议移动设备上仅加载15-30个商品，然后放置一个“加载更多”按钮，用户点击后把剩下的商品同时加载完成（而不用延迟加载）。

五、关键细节：通过history.pushState支持后退操作

在长达7年的可用性测试中，我们持续观察到电商网站上，加载新页面的技术实现方式和用户对新页面加载的期望并不总是匹配的。诸如覆盖层、抽屉导航、筛选项以及AJAX加载的商品等动态加载的内容常常颠覆了用户对后退按钮逻辑的期望。（请查看我们对用户对后退按钮期望的全部研究结论）

“加载更多”的方式需要仔细考虑用户后退的操作行为。当用户从商品列表进入一个特定的商品详情页后，当他们点击浏览器的后退按钮时需要回到列表原来的入口位置，这是至关重要的。我们检查的所有有“加载更多”按钮的电商网站中，超过90%没有这样做。这必然妨碍了用户在同一个浏览器标签下，在列表页和详情页来回跳转的行为——这是一个严重的导航限制。

图注：Skechers网站处理后退按钮的逻辑问题的方法是，给用户每次点击“加载更多”出现的页面都写一个URL。这样做的结果就是，用户从详情页点击后退按钮后，他们会回到列表页的正确位置。

HTML5的历史API使我们能够重视用户的期待。特别是history.pushState()功能允许我们不用重新加载页面就发起一次URL变更，从而将浏览器的后退操作与用户期待相匹配。浏览器会记住用户滚动到的位置，不过我们仍然需要确保当用户回到列表页时，之前点击过的“加载更多”都会被默认加载。

注意，如果你没有能够支持合理的后退逻辑的技术资源，我们建议压根就不要尝试使用“加载更多”，而是保留稍差一些的翻页模式。

六、“加载更多”不应该成为你的最优选择

虽然“加载更多”、无限滚屏和分页模式的优劣已经被争论很多年了，商品的加载方法不应该是大部分电商网站分配开发资源的最高优先级事项。过去7年当中，我们在绝大部分电商网站上记录了大量严重的UX问题。我们挑选了这些问题中的一部分，关于它们的文章可以在Smashing Magazine上找到，包括电商搜索、分类导航、筛选、结算以及移动端体验。这些问题中有许多对用户体验有同样程度的影响，但对设计和技术资源的要求没有开发一个完善的“加载更多”模式那么高。

这不是说加载方法不重要。它很重要，而且我们在测试中发现加载方法能够显著改变用户浏览商品的方式。只是它不应该是大部分网站改版优化中最最优先的事项，因为这些网站还有好多具有更高投资回报率和更容易实现的优化项目。“加载更多”因此应该是那些追求完美用户体验的网站所考虑的问题。

七、“加载更多”按钮Vs.无限滚屏Vs.分页

总而言之，在我们的可用性测试中，“加载更多”按钮解决了分页功能的问题（分页状态下，用户在商品列表页浏览的数量较少，并且在不同页面之间很难进行商品），也解决了无限滚屏带来的一些严重问题（无限滚屏时，用户草草地扫描商品，而且经常不能到达页底）。然而，只有当浏览器的后退逻辑被处理好，例如通过history.pushState()语句，并且实现方法根据用户的情境合理调整后，“加载更多”按钮才会比另外两种形式表现得更好。具体来说，以下三种基于情境的调整是成功的关键：

• 对于分类导航来说，结合使用“加载更多”按钮和延迟加载。将“加载更多”按钮出现的时机设定在50-100个商品之后。
• 对搜索结果页，使用“加载更多”按钮，但是出现的时机应该是25-75个商品结果之后。理想的情况是，你能够根据每个独特的搜索结果列表以及结果相关度得分突然下降的节点动态调整商品数量。
• 在移动端，使用“加载更多”按钮，但考虑滚屏操作和屏幕大小的限制，把它出现的时机设定在15-30个商品之后。此外，由于JavaScript事件在移动端启动方式的问题，以及初始加载的商品数量较少，建议一次加载全部商品而不使用延迟加载。

有关商品列表的全部93项可用性研究结果可以在《商品列表和筛选》这篇报告中找到。

作者：Christian Holst

译者：xiuxiu     审校：Gogi

原文链接：https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/

标题：Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce

发布日期：March 1st, 2016

头图素材来源：http://cmsdude.org

版权声明：

• 本文版权归：UXRen翻译组 所有；
• 转载带有“UXRen译”抬头的翻译文章，文章标题必须保留“UXRen译”字样；
• 转载文中必须保留：“UXRen翻译组”、“作者”、“译者”及“审校者”信息；
• 转载文末必须保留本译文网页链接地址；
• 如未遵照上述规则转载，视为侵权，UXRen社区保留随时追责的权利。

UXRen翻译组更多干货译文：

神乎其神的搭档设计（Pair Design）到底怎么玩？

电商成功的10个用户体验考核指标

Facebook设计副总裁：如何规划你的职业生涯

移动优先：做好手机APP的6个最佳实践原则

来自互联网巨头的46个用户体验面试问题（谷歌，亚马逊，facebook及微软）

全部130+篇译文>>

申请加入UXRen翻译组>>

::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::12