本篇讨论的「分页」和「无限滚动」从实现上看,无论在移动端还是 PC 端,无论选无限滚动还是分页的交互形态,数据层都是「分页」来获取数据,所以对后端来说这两者展示形式的实现没差别。
“我应该为内容使用无限滚动或分页吗?”一些设计师仍然不确定为他们的项目选择哪种方法。每种方法都有其优点和缺点,在本文中,我们将概述这两种方法,并确定在项目中应使用哪种方法。
无限滚动
无限滚动是一项技术,它允许用户滚动显示大量内容而看不到终点线。向下滚动时,此技术只是保持刷新页面。听起来很诱人,但该技术并不是针对每个站点或应用程序的万能解决方案。
无限滚动
优点1:用户参与度和内容发现
当您使用滚动作为浏览数据的主要方法时,它可能会使用户在您的网页上停留更长的时间,从而增加用户的参与度。随着社交媒体的普及,海量数据正在被消耗。无限滚动提供了一种浏览大量信息的有效方法,而无需等待页面预加载。
无限滚动几乎是发现界面的必备功能。当用户不搜索特定内容时,他们需要查看大量项目以找到他们喜欢的一件事。
Pinterest的销路海洋
您可以使用Facebook新闻提要的示例来衡量无限滚动的好处。根据保密协议,用户知道他们不会看到提要上的所有内容,因为内容更新得太频繁了。通过无限滚动,Facebook会尽力向用户公开尽可能多的信息,而用户正在扫描和使用这种信息流。
Facebook新闻提要使用户越来越多地滚动内容更新
优点2:滚动胜于点击
与滚动/点击相比,用户拥有更好的滚动体验。鼠标滚轮或触摸屏使滚动比单击更快,更容易。对于连续而冗长的内容(例如教程),滚动提供的可用性比将文本分割成几个单独的屏幕或页面还要好。
对于单击/点击:每个内容更新都需要执行额外的单击操作,并需要等待时间才能加载页面。对于滚动:用于内容更新的单个滚动操作。
优点3:滚动对移动设备有益
屏幕越小,滚动越长。移动浏览的普及是长滚动的另一个重要支持者。移动设备的手势控件使滚动操作直观且易于使用。因此,无论使用什么设备,用户都可以享受真正的响应式体验。
资料来源:Dribbble
缺点1:页面性能和设备资源
页面加载速度是获得良好用户体验的一切。多项研究表明,缓慢的加载时间会导致人们离开您的网站或删除您的应用,从而导致转化率降低。对于那些使用无限滚动的人来说,这是个坏消息。向下滚动页面的用户越多,必须在同一页面上加载更多的内容。结果,页面性能将越来越慢。
另一个问题是用户设备的资源有限。在许多无限滚动的站点上,尤其是那些具有很多图像的站点,由于加载的资产数量巨大,诸如iPad之类资源有限的设备可能会开始变慢。
缺点2:物品搜索和位置
无限滚动的另一个问题是,当用户到达流中的某个点时,他们无法为自己的位置添加书签,以后再回到该位置。如果他们离开该站点,他们将失去所有进度,并且必须再次向下滚动才能回到同一位置。这种无法确定用户的滚动位置的方法不仅给用户造成烦恼或困惑,而且因此损害了总体用户体验。
在2012年,Etsy花了一些时间实现无限滚动界面,并发现新界面的性能不及分页。尽管购买量大致保持不变,但用户参与度却下降了-现在人们不再那么频繁地使用搜索了。
Etsy的搜索界面具有无限滚动。当前版本有分页。
正如德米特里·法捷耶夫(Dmitry Fadeyev)指出的那样:“人们希望返回搜索结果列表,以查看他们刚刚看到的项目,并将其与列表中其他地方发现的其他项目进行比较。无限滚动不仅破坏了这种动态,而且还使列表上移和下移变得困难,尤其是当您在另一时间返回页面并回到顶部时,被迫再次向下滚动列表并等待结果加载。这样,无限滚动界面实际上比分页的界面要慢。”
缺点3:无关的滚动条
另一个烦人的事情是,滚动条不能反映实际可用的数据量。假设您已接近底部,那么您将愉快地向下滚动,这本身会诱使您进一步滚动一点,却发现到到达该位置时结果只是翻了一番。从可访问性的角度来看,中断用户滚动条的使用是非常糟糕的。
滚动条应反映实际页面长度
缺点4:页脚不足
页脚之所以存在是有原因的:它们包含用户有时需要的内容-如果用户找不到某些内容或想要其他信息,他们通常会去那里。但是因为提要无限滚动,所以一旦用户到达底部,就会加载更多数据,从而每次都将页脚移出视图。
当LinkedIn在2012年推出无限滚动功能时,用户设法在加载新故事之前抓取了一个屏幕。
实施无限滚动的站点应通过使页脚具有粘性来使页脚可访问或将链接重新定位到顶部或侧边栏。
Facebook将所有链接从页脚(例如“法律”,“职业”)移至右侧栏。
另一种解决方案是使用“ 加载更多”按钮按需加载内容。在用户单击“更多”按钮之前,不会自动加载新内容。这样,用户可以轻松进入页脚,而不必追逐它。
Instagram使用“加载更多”按钮以使用户可以访问页脚
分页
分页是一种用户界面模式,可将内容分为单独的页面。如果滚动到页面底部并看到数字行,则该数字行是网站或应用程序的分页。
分页
优点1:良好的转换
当用户在搜索结果列表中特别是某些内容时,而不是仅扫描和使用信息流时,分页效果很好。
您可以使用Google搜索示例衡量分页的好处。根据您的研究,寻找最佳搜索结果可能需要一秒钟或一个小时。但是,当您决定停止以Google当前的格式进行搜索时,您会知道搜索结果的确切数量。您可以决定在何处停止或仔细阅读多少结果。
Google搜索结果数据
优点2:控制感
无限滚动就像是无尽的游戏 -不管滚动多远,您都感觉永远都无法结束。当用户知道可用结果的数量时, 他们可以做出更明智的决定,而不必寻找无限滚动列表。根据David Kieras 在人机交互中的研究心理学:“ 到达终点可提供控制感 ”。该研究还明确指出,当用户获得有限但仍然相关的结果时,他们可以轻松确定所寻找的内容是否确实存在。
同样,当用户看到结果总数时(当然,当数据总量不是无限时),他们将能够估计找到实际所需内容的时间。
优点3:物品位置
具有分页的界面使用户可以保持商品的心理位置。他们可能不一定知道确切的页码,但是他们会大致记住那是什么,而分页的链接将使他们更容易到达那里。
使用分页,用户可以控制导航,因为他们知道单击哪个页面可以返回到原位置。
分页对生态商业网站和应用程序很有用。当用户在线购物时,他们希望能够返回到他们停下来的地方并继续购物。
MR Porter站点对项目使用分页
缺点:额外动作
要进入分页的下一页,用户必须找到链接目标(例如“下一步”),将鼠标悬停在其上,单击它,然后等待新页面加载。
点击内容
这里的主要问题是,大多数网站仅在一个页面上向用户显示非常有限的内容。通过在不影响加载速度的情况下延长页面的长度,用户将获得每页更多的内容,而不必单击或轻按分页按钮。
何时使用无限滚动/分页?
在极少数情况下,无限滚动有效。它最适合作为用户生成的内容流(Twitter,Facebook,Pinterest,Instagram)流的网站和应用。另一方面,分页非常适合面向目标的网站和应用程序。
Google的经验很好地说明了这一点。Google图片使用无限滚动,因为用户能够比文本更快地扫描和处理图片。读取搜索结果需要更长的时间。这就是为什么他们的Google搜索结果仍使用更传统的分页技术的原因。
结论
设计师在选择一个之前,应权衡无限滚动和分页的利弊。选择取决于设计的上下文以及内容的交付方式。通常,无限滚动可很好地适用于Twitter之类的应用,如Twitter,用户无需查看特别的内容就可以实时消费无休止的实时数据流,而分页界面则适合人们在其中寻找特定项目以及在何处查找的搜索结果页用户查看的所有项目的位置都很重要。
作者: Thanos Dimitriou
译者: CANAAN
来源: https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1