用户体验：无限滚动与分页

来源：Medium网站

作者：尼克·巴比奇

翻译：奥创

阅读时长：8min

图片来源：smashingmagazine

“我应该为我的内容使用无限滚动或分页吗？”一些设计师仍然不确定为他们的项目选择哪种方法。每种方法都有自己的优点和缺点，在本文中我们将概述这两种方法，并决定我们应该为项目使用哪种方法。

无限滚动

无限滚动是一种技术，允许用户滚动大量内容，看不到终点线。当您向下滚动页面时，此技术会简单地刷新页面。虽然听起来有点诱人，但这种技术对于每个站点或应用程序来说都不是一个万能的解决方案。

  无限滚动

优点1：用户参与和内容发现

当您使用滚动作为探索数据的主要方法时，它可能会使用户在您的网页上停留更长时间，从而提高参与度。随着社交媒体的普及，正在消耗大量数据; 无限滚动提供了一种有效的方式来浏览信息海洋，而无需等待页面预加载。

无限滚动几乎是发现接口的必备功能。当用户没有搜索特定的东西时，他们需要看到大量的项目才能找到他们喜欢的东西。

  Pinterest的针脚海洋

您可以使用Facebook新闻源的示例来衡量无限滚动的好处。通过未说明的协议，用户意识到他们不会看到Feed流上的所有内容，因为内容更新太频繁。通过无限滚动，Facebook正在尽最大努力向用户公开尽可能多的信息，并且他们正在扫描并消费这些信息流。

  Facebook新闻提要让用户越来越多地滚动以进行内容更新

优点2：滚动比点击更好

用户拥有更好的滚动体验，而不是单击/点击。滚动或触摸屏使滚动比单击更快更容易。对于连续且冗长的内容，如教程，滚动提供了比将文本切片到几个单独的屏幕或页面更好的可用性。

  对于单击/点击：每个内容更新都需要额外的单击操作和等待页面加载的时间。用于滚动：用于内容更新的单个滚动操作。

图片来源：designbolts

优点3：滚动对移动设备有利

屏幕越小，滚动越长。移动浏览的普及是长滚动的另一个重要支持者。移动设备的手势控制使滚动直观且易于使用。因此，无论用户使用何种设备，用户都可享受真正的快速响应体验。

  资料来源：Dribbble

缺点1：页面性能和设备资源

页面加载速度是获得良好用户体验的一切。多项研究表明，加载时间较慢会导致人们离开您的网站或删除您的应用，导致转化率较低。对于那些使用无限滚动的人来说，这是个坏消息。用户向下滚动页面越多，必须在同一页面上加载更多内容。因此，页面性能将越来越慢。

另一个问题是用户设备的资源有限。在许多无限滚动网站上，特别是那些拥有许多图像的网站，由于其加载的资产数量庞大，iPad等资源有限的设备可能会开始放慢速度。

缺点2：物品搜索和位置

无限滚动的另一个问题是，当用户到达流中的某个点时，他们无法为其位置添加书签并稍后再返回。如果他们离开网站，他们将失去所有进度，并且必须再次向下滚动才能回到同一地点。这种无法确定用户的滚动位置不仅会引起用户的烦恼或混淆，而且还会损害整体用户体验。

2012年，Etsy花了一些时间实现无限滚动界面，发现新界面的表现不如分页。尽管购买量大致保持不变，但用户参与度却下降了 - 现在人们并没有那么多地使用搜索。

  Etsy的搜索界面具有无限滚动。当前版本有一个分页。

正如德米特里·法德耶夫（Dmitry Fadeyev）所指出的那样：“人们会想回到搜索结果列表中查看他们刚才看到的项目，将它们与他们在列表中其他地方发现的其他内容进行比较。无限滚动不仅打破了这种动态，它还使得难以在列表中上下移动，特别是当你在另一个时间返回页面并发现自己回到顶部时，被迫再次向下滚动列表并等待结果加载。通过这种方式，无限滚动界面实际上比分页界面慢。”

缺点3：不相关的滚动条

另一个令人讨厌的事情是滚动条不能反映可用的实际数据量。假设你靠近底部，你会高兴地向下滚动，它本身就会诱使你再滚动一点，只是发现你到达那里时结果只增加了一倍。从可访问性的角度来看，为用户打破滚动条的使用是非常糟糕的。

  滚动条应反映实际页面长度

缺点4：缺少页脚

页脚存在的原因有：它们包含用户有时需要的内容 - 如果用户无法找到某些内容或者他们想要其他信息，他们通常会去那里。但由于Feed无限滚动，一旦用户到达底部就会加载更多数据，每次都会将页脚推出视图。

  当LinkedIn在2012年引入无限滚动时，用户在加载新故事之前就设法抓住了一个屏幕。

实现无限滚动的网站应该通过使页脚粘贴或将链接重新定位到顶部或侧边栏来使页脚可访问。

  Facebook将所有链接从页脚（例如“法律”，“职业”）移动到右侧栏。

另一种解决方案是使用“ 加载更多”按钮按需加载内容。在用户单击“更多”按钮之前，新内容不会自动加载。这样，用户可以轻松地访问您的页脚，而无需追逐它。

  Instagram使用“加载更多”按钮，以便为用户提供页脚

分页

分页是一种用户界面模式，它将内容划分为单独的页面。如果您滚动到页面底部并查看数字行 - 该行数字是网站或应用程序的分页。

  分页

优点1：良好的转换

当用户在结果列表中特别搜索某些内容时，分页是好的，而不仅仅是扫描和消费信息流。

您可以使用Google搜索示例来衡量分页的好处。根据您的研究，寻找最佳搜索结果可能需要一秒钟或一小时。但是当您决定停止使用Google当前格式进行搜索时，您就会知道搜索结果的确切数量。您可以决定停止的位置或细读的结果数量。

  Google搜索结果数据

优点2：控制感

无限滚动就像一场无尽的游戏  - 无论你滚动多远，你都觉得你永远不会走到尽头。当用户知道可用结果的数量时， 他们能够做出更明智的决定，而不是留下无限滚动列表。根据David Kieras研究人机交互心理学：“ 达到终点提供了一种控制感 ”。该研究还阐明，当用户具有有限但仍然相关的结果时，他们能够容易地确定他们所寻求的是否实际存在。

此外，当用户看到结果总数时（当然，当总数据量不是无限时），他们将能够估计找到他们实际寻找的内容所需的时间。

优点3：项目位置

具有分页界面允许用户保持项目的心理位置。他们可能不一定知道页面的确切页面编号，但他们会大致记住它的内容，而分页链接会让他们更容易到达。

  通过分页，用户可以控制导航，因为他们知道要点击哪个页面以回到原来的位置。

分页对于电子商务网站和应用程序很有用。当用户在线购物时，他们希望能够回到他们离开的地方并继续购物。

  MR Porter网站使用物品分页

缺点：额外行动

要进入分页的下一页，用户必须找到链接目标（例如“下一步”），将鼠标悬停在其上，单击它并等待加载新页面。

  单击内容

这里的主要问题是大多数网站使用单个页面向用户显示非常有限的内容。通过在不影响加载速度的情况下延长页面使用时间，用户每页将获得更多内容，而无需点击或点击分页按钮。

何时使用无限滚动/分页？

只有少数情况下无限滚动才有效。它最适合用户生成内容流（Twitter，Facebook，Pinterest，Instagram）的网站和应用。另一方面，分页非常适合面向目标的网站和应用程序。

对于这一点，Google体验就是很好的例证。Google图片使用无限滚动，因为用户能够比文本更快地扫描和处理图像。阅读搜索结果需要更长的时间。这就是他们的Google搜索结果仍然使用更传统的分页技术的原因。

结论

设计师在选择之前应该权衡无限滚动和分页的优缺点。选择取决于您的设计环境以及如何提供内容。一般来说，无限卷轴适用于类似Twitter的用户，其中用户消费实时生成的无穷无尽的数据流，而无需特别查找任何内容，而分页界面适用于人们正在寻找特定项目的搜索结果页面以及用户查看的所有项目的位置都很重要。

---------------------------------

喜欢请点赞分享并关注哦~~