设计师的抉择:无限滚动和分页

对于很多相似条目需要展示的页面,可以用无限下拉也可以使用分页形式展示内容。但很多设计师分不清什么时候用无限滚动,什么时候使用分页,二者有什么异同,优劣势分别是什么,本文将给大家一一说明。

无限滚动(Infinite Scrolling)

无限滚动是指用户可以不断,有不间断的内容展现,看不到终点线。当你向下滚动页面时,就会一刷新下面的内容。虽然听起来有点诱人,但这种不是对所有网站或应用都是一个万能的解决方

优势#1:用户参与和内容发现

当使用滚动作为内容展示的主要交互形式,可能会使用户在你对网页上停留更长时间,从而提高参与度。随着UGC和社交媒体的普及,大量的数据和内容正在产生,无限滚动提供了一种有效浏览信息海洋的方式,而无需等待页面预加载。

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

配图2 pinterest的网页

我们以Facebook新闻为例来说明无限滚动的好处。约定俗成的,用户意识到他们不会看到Feed上的所有内容,因为内容更新太频繁。通过无限滚动,Facebook正在尽最大努力向用户公开尽可能多的信息,用户浏览并消化这些信息。

实际上,Facebook将好友或者关注对象作为信息源(news feed),以提供用户源源不断的内容。而这个“news feed” 模块如今已经能给Facebook每天带来上千万美元的收入。

随着内容爆发和用户时间的挤压,为了满足用户高效获取特定内容需求,feed流应运而生。Feed流顾名思义,feed译为喂养,就是给用户不断“喂”他想要的内容,抖音在这个方面做得最好,基于大数据和头条系的算法,总能抓住用户的眼球,这就是为什么抖音一刷一天就过去了,真的不怪你,谁刷谁知道。


与之相对的是瀑布流,它不像Feed流那样精准,一般就只是不断的给用户提供内容,这一点跟传统网页的无限滚动很相似。花瓣和pinterest应用就是采用的瀑布流展现内容。

优点#2:滚动比点击更好

用户使用滚动比点击的交互体验更好。滚动或触摸屏使滚动比单击更快捷更容易。对于连续且冗长的内容,如教程,连续滚动比分屏或分段的文本浏览使用体验更好。

缺点#1:页面和设备性能降低

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

另一个问题是用户设备的资源有限。很多多图的网站或者产品,由于内容加载产生占内存空间较多的缓存,会导致机器性能整体下降。

缺点#2:物品搜索和位置

无限滚动的另一个问题是,当用户到达信息流中的某个点时,他们无法为标记其当前的位置以便稍后返回再看。如果他们离开网站,他们再回来时需要从头看起,如果想找到上次的位置,需要再次滚动。无法确定用户的滚动位置不仅会引起用户的烦恼或混淆,而且还会损害整体用户体验。

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

为了解决这个问题,很多网站会自动给用户标记“上次看到的地方”

缺点#3:不相关的滚动条

另一个令人讨厌的事情是虽然网站两侧有滚动条但却不能反映可用的实际数据量。当你看到滚动条靠近底部,以为没有信息了,可一滚动,进度条又回到中间或上部。从易用性角度来看,这些逆天的滚动条,是非常糟糕的存在。


缺点#4:缺少页脚

页脚存在的原因有:它们包含用户有时需要的内容 - 如果用户无法找到某些内容或者他们想要其他信息,他们通常会去那里。但由于Feed无限滚动,一旦用户到达底部就会加载更多数据,只能在加载停留的那几秒钟看到页脚。

有些无限滚动的网站意识到了这一点通过使页脚粘贴或将链接重新定位到顶部或侧边栏来使页脚可访问。

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

分页(Pagination)

分页将内容划分为单独的页面显示。滚动到页面底部会看到数字指示 - 该行数字是网站或应用程序的分页。



优点#1:良好的转换

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

我们用Google搜索示例来说明分页的好处。根据研究,寻找最佳搜索结果可能需要一秒钟或一小时。当Google停止搜索时,我们就能知道搜索结果的确切数量。你也可以决定停止的位置或细读的结果数量。

优点#2:控制感

无限滚动就像一场无尽的游戏 - 无论你滚动多远,你都觉得你永远不会走到尽头。分页可以让户知道可用结果的数量,他们能够做出更明智的决定,而不是留下无限滚动列表。根据David Kieras研究人机交互心理学:“达到终点为用户提供了一种控制感”。该研究侧面例证了,当用户明确相关结果的数量时,他们能够轻易地确定他们所寻求的是否真实的存在。

此外,当用户看到结果总数时(当数总量不是无限时),他们将能够估算找到所需内容的时间。

优点#3:项目位置

分页数字还能帮用户明确所在位置。他们可能不一定知道页面的确切页面编号,但他们会大致记住它的内容,而分页链接会让他们更容易找到之前浏览的内容。

分页特别适合电子商务网站和应用。当用户在线购物时,他们希望能够回到他们离开时的地方并继续购物。


缺点:附加的活动

要进入分页中的下一页,用户必须找到对应的页数(例如“下一步”),将鼠标悬停在其上,单击它并等待加载新页面。


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

什么时间使用无限滚动/分页?

只有少数情况下才推荐使用无限滚动。它最适合UGC(Twitter,Facebook,Pinterest,Instagram)的网站和应用。另一方面,分页非常适合目标导向的网站和应用程序。

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

结论

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



©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容