用户体验设计 — “无限滚动”与“分页”设计的使用(上)

“我应该选择“无限滚动”还是“分页”的形式来展示我的内容呢?”这是不少设计师存在的困扰。其实,两种方法展现形式都有各自的优点和缺点,在本专题内容中我们将概述这两种方法并决定我们的项目应该使用哪一种。

无限滚动

无限滚动是一种允许用户通过滚动浏览大量内容而不刷到页面最底层的技术。当你向下滚动页面时,这种技术将会持续地刷新页面。这虽然听起来很诱人,这种技术并不是一种适用于各种网站和app的万能解决方式。

无限滚动方案

优点:

1.用户参与和内容发现

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

无限滚动几乎是所有探索界面的必备功能。当用户没有定向搜索某一特定的内容时,他们就需要通过查看大量的条目才能够找到他们感兴趣的东西。

Pinterest内容的海洋

以Facebook新闻feed流为例,你可以以此来衡量无限滚动的益处。通过非口头协议,用户意识到他们无法查看Feed流上的所有内容,因为内容更新地过于频繁。而Facebook正在尽最大努力通过无限滚动向用户展示尽可能多的信息,并确保他们正在查阅和消费这些信息流。

用户通过滚动Facebook新闻feed流获得更多内容更新

2.“滚动”比“单击”效果更佳

用户能够通过滚动获得比“单击”或“点击”更好的体验。鼠标滚轮或触摸屏的形式使滚动速度比点击来的更简单、快捷。对于连续且冗长的内容,比如说教程,滚动提供的可用性,比将文本分割成几个单独的屏幕或页面的体验更棒。

对于单击或点击:每个内容更新都需要额外的点击操作和等待页面加载时长。滚动:单一操作滚动时,使内容更新。

3.“滚动”对移动设备更友好

屏幕越小,滚动时间越长。移动端浏览的普及是另一种持续性滚动的重要因素。移动端的手势控件使滚动直观且易于使用。因此,用户无论使用哪种设备,都可以享受到真正的快速响应体验。


缺点:

1.页面性能和设备资源

页面加载速度是影响用户体验的重要因素。多项研究表明,缓慢的加载时间会导致人们离开你的网站或删除你的应用程序,致使形成低转化率。对于那些习惯使用无限滚动的用户来说,这无疑是个坏消息。因为用户向下滚动页面越多,页面上承载的内容就越多,最终会导致页面性能越来越慢。

另一个问题是用户设备的资源有限。在许多无限滚动网站上,尤其是那些有大量图片的网站中,资源有限的设备(如iPad)可能由于其已加载的内容信息过多而开始降速。

2.项目搜索和位置

无限滚动的另一个缺点是,当用户浏览到某个节点时,他们无法标记该位置,也就意味着用户无法在离开后回到该位置。如果他们离开了该网站,他们将丢失所有的加载数据,并且只能通过再次向下滚动才能返回相同的位置。滚动的形式使位置无法确定,这不仅会给用户带来烦恼和困惑,而且还会不利于整体用户体验。

在2012年,Etsy花了很多时间来实现一个无限的滚动界面,却发现新的界面表现并不如分页的表现形式出色。尽管购买量大致保持不变,但用户参与度却大大下降——现在人们不再那么频繁地使用搜索了。

Etsy的无限滚动搜索界面(当前版本有分页)


正如Dmitry Fadeyev所指出的那样:“人们会希望回到搜索结果列表中,查看他们刚才看到的项目,并将其与他们在列表中其他位置发现的其它项目进行比较。

无限滚动不仅会打破这种动态,还会使列表上下移动变得十分困难,特别是当你又一次返回页面时,发现自己回到顶部,然后被迫再次向下滚动列表并等待加载结果。通过这种方式,无限滚动界面实际上比分页界面更低效。

3.滚动条无法展示真实数据量

另一个让人恼火的事情是滚动条无法展示真实数据量。当你逐渐接近滚动条底部时,你会兴奋地继续向下滚动,结果是在刷新后,发现滚动条又增加了一倍。对于用户来说,这无疑是一种非常糟糕的体验。

滚动条应该反映真实页面的长度

4.页脚缺失

页脚存在的原因是:它们包含用户有时需要的内容—如果用户找不到某些内容或他们需要的其它信息,他们通常会去页脚寻找。但是,由于Feed流无限滚动的特性,一旦用户到达底部,就会加载更多的数据,每次都将页脚再次推出视图之外。

当LinkedIn在2012年推出无限滚动功能时,用户会设法抓取加载新内容之前的屏幕信息

那些使用无限滚动的网站,其实应该使页脚更具用户粘性,又或者将链接放在顶部或侧边栏来使页脚更易于访问。

Facebook将页脚中的所有链接(例如'Legal','Careers')移至右侧栏。

另一种解决方案是根据用户需求使用“ 加载更多”的按钮加载内容。即新内容不会自动加载,直到用户点击“更多”的按钮。这时候用户就可以轻松到达页脚,而无需去追踪它。

Instagram使用“加载更多”按钮,使用户达到访问页脚的目的。

本期讲解了“无限滚动”设计的优、缺点,下期将给大家继续概述“分页”设计。

敬请期待,下期见~

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,781评论 1 92
  • -好多以前没见过的术语。果然还是翻译渣-看到出错的地方,请简信我。这个应该可以使用吧……(猜想 无限滚动 (Inf...
    lyzhie阅读 6,846评论 12 21
  • 无限滚动 无限滚动技术,简单地向下滚动就可以不断刷新页面加载更多的内容,现在很多移动端使用的方式。 一、优点 1....
    wen4e阅读 738评论 0 1
  • 一、无线下拉滚动 无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内...
    三达不留点gpj阅读 2,132评论 2 19
  • 祖国母亲 请允许我 把一颗愤怒的子弹射进 侵略者的胸膛 那些忧郁恐惧的眼神 在布满鲜血的天空 麻木爬行 这是我所做...
    宏展奇谈阅读 362评论 0 1