無(wú)限滾動(dòng):徹底了解它

無(wú)限滾動(dòng) (Infinite scrolling) 承諾給用戶(hù)更好的體驗(yàn)??墒牵@個(gè)好處通常又伴隨一些壞處。一旦我們了解無(wú)限滾動(dòng)的好處和弱點(diǎn),我們就可以用它來(lái)提升界面質(zhì)量。
人類(lèi)的天性是想要用層級(jí)關(guān)系、架構(gòu)來(lái)更好地導(dǎo)航。但無(wú)限滾動(dòng)有時(shí)會(huì)讓用戶(hù)迷失方向,因?yàn)轫?yè)面沒(méi)有盡頭。
好處
長(zhǎng)列表已經(jīng)不是新鮮事物,但是由于手機(jī)界面的到來(lái),怎么去滾動(dòng)這些列表已經(jīng)從根本上發(fā)生改變。由于手機(jī)屏幕很窄,列表里面的元素都成豎直排列,這需要經(jīng)常去滾動(dòng)它。
無(wú)限滾動(dòng)在頁(yè)面、列表的交互中是十分流行的?;竟δ芫褪牵?dāng)用戶(hù)劃過(guò)內(nèi)容時(shí),更多的內(nèi)容自動(dòng)加載進(jìn)來(lái)。隨著社交媒體的流行,大量的數(shù)據(jù)等著被消化;無(wú)限滾動(dòng)提供了一個(gè)高效的方式去流量海量信息,而不需要等待頁(yè)面加載。當(dāng)然啦,用戶(hù)更喜歡一個(gè)真實(shí)地響應(yīng)體驗(yàn),不管他們?cè)谑褂檬裁丛O(shè)備。
分頁(yè)VS無(wú)限滾動(dòng)
充斥很多用戶(hù)生成的內(nèi)容的網(wǎng)站,現(xiàn)在都使用無(wú)限滾動(dòng)來(lái)處理每時(shí)每刻產(chǎn)生的內(nèi)容。有個(gè)不成文的共識(shí),用戶(hù)已經(jīng)意識(shí)到他們根本看不完所有的內(nèi)容,因?yàn)閮?nèi)容更新的太快了。有無(wú)限滾動(dòng)的話,社交網(wǎng)站盡可能地展現(xiàn)更多的信息給用戶(hù)。
Twitter?有效地整合無(wú)限滾動(dòng)。它的饋送 (feed) 符合這樣的條件:大量的數(shù)據(jù)和一個(gè)實(shí)時(shí)平臺(tái)。從用戶(hù)的角度看,所有的 tweets 都同等重要,這就意味著它們都有可能被喜歡或不被喜歡;所以,用戶(hù)瀏覽所有的 tweets。作為一個(gè)事實(shí)平臺(tái),Twitter經(jīng)常更新,即使用戶(hù)不注意他們的饋送。無(wú)限滾動(dòng)是為 Twiter 這類(lèi)網(wǎng)站而生。
無(wú)限滾動(dòng)似乎是找到在網(wǎng)站上的合理用途。然而,在評(píng)估它的價(jià)值之前,也有一些缺點(diǎn)需要考慮。
壞處
有那么多數(shù)據(jù)要去瀏覽,用戶(hù)要專(zhuān)注于他們需要的信息。(還記得目標(biāo)導(dǎo)向 (goal-oriented) 么?)用戶(hù)總是想要永不停止的數(shù)據(jù)流嗎?有分析表明,當(dāng)用戶(hù)使用 Google 搜索時(shí),只有6%的看到第二頁(yè)。那么,94%的用戶(hù)只要需要10個(gè)結(jié)果,這就是說(shuō) Google 結(jié)果的排序很重要。
點(diǎn)擊或不點(diǎn)擊
Google 在圖片搜索上使用了無(wú)限滾動(dòng),但是尚未在搜索結(jié)果上使用。這樣做會(huì)消除點(diǎn)擊第二頁(yè)的需求。Google 可能繼續(xù)使用分頁(yè),因?yàn)樗膱D案很符合它的商標(biāo)。如果它換成無(wú)限滾動(dòng),那用戶(hù)又會(huì)在什么時(shí)候停止?jié)L動(dòng)?20的結(jié)果的時(shí)候?50個(gè)?什么時(shí)候一個(gè)方便的瀏覽體驗(yàn)變得這么復(fù)雜?
查看最佳的搜索結(jié)果需要1秒,還是1小時(shí),這都取決于你調(diào)查。但在 Google 現(xiàn)在的版本中,當(dāng)你決定停止搜索的時(shí)候,你知道搜索結(jié)果的確切頁(yè)數(shù)。你可以對(duì)“在哪里停止或要仔細(xì)閱讀多少個(gè)結(jié)果”做出明知決定,因?yàn)槟阒辣M頭在哪?根據(jù)這個(gè)研究在人機(jī)交互方面的分析,觸及盡頭提供一種控制感;你知道你已經(jīng)收到所有的相關(guān)結(jié)果,和你知道某個(gè)結(jié)果是不是你想要的。知道結(jié)果的數(shù)量能提供控制感,幫助用戶(hù)做出更明智的覺(jué)得,而不是讓用戶(hù)去瀏覽一個(gè)無(wú)限滾動(dòng)的列表。
分頁(yè)是點(diǎn)擊的障礙
當(dāng)元素分布在網(wǎng)頁(yè)的頁(yè)面里面,他們被結(jié)構(gòu)化、放入索引中,有開(kāi)頭、有結(jié)尾。信息被清晰、有序地呈現(xiàn)。如果我們從分頁(yè)列表中選取元素,然后就會(huì)被帶到那個(gè)頁(yè)面,我們知道點(diǎn)擊「后退」就會(huì)返回到之前的頁(yè)面(甚至回到之前的滾動(dòng)條位置)。我們的搜索頁(yè)面會(huì)回到剛剛離開(kāi)的地方。
如果你滾動(dòng)同樣結(jié)果的無(wú)限滾動(dòng)列表,你對(duì)離開(kāi)沒(méi)有控制感,因?yàn)槟闼鶟L動(dòng)的列表是無(wú)限的。如果你是那94%只讀 Google 搜索中第一頁(yè)的人(也就是,10個(gè)結(jié)果)。當(dāng)列表變成無(wú)限滾動(dòng)時(shí),第一頁(yè)從本質(zhì)上來(lái)說(shuō)就會(huì)變成沒(méi)有盡頭??吹巾?yè)面結(jié)尾就是不復(fù)存在,你決定在10個(gè)結(jié)果的地方停止。這就是無(wú)限滾動(dòng)的一個(gè)問(wèn)題,因?yàn)榈?1個(gè)結(jié)果也出現(xiàn)在視線之中。用分頁(yè)列表的話,你就看不見(jiàn)第11個(gè)結(jié)果,很容易就能停止瀏覽。然而,當(dāng)下一個(gè)結(jié)果已經(jīng)出現(xiàn)了,你可能會(huì)繼續(xù)滾動(dòng),滾動(dòng),滾動(dòng)……
Dmitry Fadeyev指出:
“人們想要回到搜索結(jié)果的列表去查看已經(jīng)已點(diǎn)擊的項(xiàng)目,和他們?cè)诹斜硐旅婵吹降臇|西作比較。”分頁(yè)界面讓用戶(hù)對(duì)項(xiàng)目的位置有記憶。他們可能不需要知道具體的頁(yè)碼,但他們會(huì)大致記得是什么內(nèi)容,分頁(yè)鏈接可以讓他們更容易回到那。
無(wú)限滾動(dòng)不僅打破這種動(dòng)態(tài),還讓上下翻閱列表變得更困難,特別是你再次返回頁(yè)面,發(fā)現(xiàn)自己在頁(yè)面頂端,再一次專(zhuān)注于滾動(dòng)列表,等待結(jié)果加載。在這種情況下,無(wú)限滾動(dòng)界面就比分頁(yè)慢。
——Dmitry Fadeyev,?無(wú)限滾動(dòng)不起作用
無(wú)限滾動(dòng)的衰弱
最好的公司會(huì)和他們的用戶(hù)持續(xù)測(cè)試、研究新的交互。越來(lái)越多的研究表明,土國(guó)不能達(dá)到用戶(hù)的目的,無(wú)限滾動(dòng)不能與之產(chǎn)生共鳴。
誘惑
當(dāng)你尋找最佳搜索結(jié)果、被誘惑去繼續(xù)去看不相關(guān)的結(jié)果,時(shí)間就會(huì)被浪費(fèi)。最佳結(jié)果有機(jī)會(huì)出現(xiàn)在前10的項(xiàng)目中。因此,無(wú)限滾動(dòng)僅僅是誘惑你繼續(xù)閱讀、浪費(fèi)時(shí)間、降低生產(chǎn)率。
樂(lè)觀
更煩人的是滾動(dòng)條不能反映真實(shí)的數(shù)據(jù)位置。你可以很開(kāi)心地往下滾動(dòng),以為自己接近底部,這只會(huì)誘惑你多滾動(dòng)一點(diǎn),然后當(dāng)你到達(dá)那的時(shí)候就會(huì)結(jié)果又多了兩倍。
精疲力竭
無(wú)限滾動(dòng)刺激著用戶(hù)。就像在玩游戲那樣,你永遠(yuǎn)不能贏,不管你滾得多快,你都不會(huì)到達(dá)盡頭。誘惑和樂(lè)觀的結(jié)合體是使用戶(hù)精疲力竭的主要原因。
Pogosticking(中文真得譯不出來(lái)。就是點(diǎn)擊瀏覽器上面的「前進(jìn)」「后退」按鈕。)
譯者注釋?zhuān)?/p>
- 舉個(gè)例子,如果從 Google 搜索結(jié)果點(diǎn)擊條目進(jìn)到某個(gè)網(wǎng)站,然后又后退返回Google查看其他搜索結(jié)果。如果很多用戶(hù)這樣做的話,這個(gè)網(wǎng)站評(píng)級(jí)就會(huì)降分。因?yàn)楹苊黠@大家都不滿(mǎn)意這個(gè)搜索結(jié)果,才返回去看其他。(這個(gè)算是對(duì) SEO 的影響吧。應(yīng)該有很多人設(shè)定成新頁(yè)面打開(kāi)搜索結(jié)果吧,不知道這些又怎么算?)
- 其實(shí)下面要說(shuō)的跟 SEO 沒(méi)關(guān)系
- 如果有說(shuō)錯(cuò)的地方,懇請(qǐng)指正。
無(wú)限滾動(dòng)會(huì)導(dǎo)致丟失你在頁(yè)面中的位置?!癙ogosticking”·發(fā)生在當(dāng)你離開(kāi)一個(gè)無(wú)線滾動(dòng)的列表是,當(dāng)你點(diǎn)擊「后退」來(lái)返回頁(yè)面,會(huì)被帶到上一頁(yè)面的頂部,而不是你離開(kāi)的地方。這是因?yàn)樵跓o(wú)限滾動(dòng)頁(yè)面上做導(dǎo)航,滾動(dòng)位置丟失,強(qiáng)迫你每次都要向下滾動(dòng)。
失去控制
無(wú)限滾動(dòng)讓你感到迷失在信息之中。你繼續(xù)滾動(dòng),因?yàn)榻Y(jié)果就在那。你會(huì)感到不堪重負(fù),因?yàn)槟闶?duì)大量信息涌現(xiàn)的控制。頁(yè)碼就會(huì)有好處,內(nèi)容的數(shù)量都是固定的,你可以很舒服地選擇是否點(diǎn)擊查看更多,或停止操作。無(wú)限滾動(dòng),你不能控制大量的數(shù)據(jù),這會(huì)變成很大負(fù)擔(dān)。
分心
Etsy,一個(gè)電商網(wǎng)站,使用無(wú)限滾動(dòng),但只會(huì)導(dǎo)致更少的用戶(hù)點(diǎn)擊。無(wú)限滾動(dòng)不成功,因?yàn)橛脩?hù)會(huì)迷失在數(shù)據(jù)中,很難去分類(lèi)相關(guān)和不相關(guān)的信息。無(wú)限滾動(dòng)提供更快、更多的結(jié)果,用戶(hù)不愿意去點(diǎn)擊它們,目的失敗。
不可到達(dá)
你最近試過(guò)到達(dá) Facebook 的頁(yè)腳 (footer) 沒(méi)?頁(yè)腳就在 news feed 下面,但由于饋送 (feed) 無(wú)限下滾了,數(shù)據(jù)在你到達(dá)底部時(shí)及時(shí)跟新了,頁(yè)腳就又在視線外了。頁(yè)腳存在的理由:他們包含用戶(hù)有時(shí)需要到的內(nèi)容。在 Facebook 中,用戶(hù)達(dá)到不了。到達(dá)其他地方的鏈接就很難發(fā)現(xiàn)了,無(wú)限滾動(dòng)把重要信息變得難以接近,以至于妨礙用戶(hù)。
Facebook 自動(dòng)載入 news feed 使頁(yè)腳不可到達(dá)
頁(yè)腳其實(shí)就是最后的求助手段。如果用戶(hù)有什么找不到、他們有問(wèn)題想要解決、需要更多的資訊、解釋?zhuān)麄兙蜁?huì)去那。如果用戶(hù)發(fā)現(xiàn)去不了頁(yè)腳,他們可能會(huì)直接離開(kāi)整個(gè)網(wǎng)站。使用無(wú)限滾動(dòng)的公司應(yīng)該使用固定頁(yè)腳、或者把他們放在側(cè)欄,讓頁(yè)腳變得可以訪問(wèn)。
非專(zhuān)屬性
Pinterest?就沒(méi)有頁(yè)腳,所以也會(huì)遇到 Facebook 那種問(wèn)題(指頁(yè)腳的功能缺失)。通過(guò)無(wú)限滾動(dòng),Pinterest 強(qiáng)調(diào)從網(wǎng)絡(luò)中獲取海量的數(shù)據(jù)、無(wú)止境的靈感。
Pinterest 的海量 pin
圖片比文字更快、更容易滾動(dòng),所以 Pinterest 和 Gooogle 圖片在一定程度上使用無(wú)限滾動(dòng)。然而網(wǎng)絡(luò)上有上億張圖片用戶(hù)更希望看到最好的一部分。關(guān)于「專(zhuān)屬性」,Pinterest 貌似就缺乏專(zhuān)屬性。
通過(guò)「編輯精選」「最熱門(mén)」來(lái)限制 Pinterest 首頁(yè)的圖片數(shù)量,讓網(wǎng)站更吸引人。當(dāng)相似的pin都放在一起的時(shí)候,某個(gè) pin 又怎么彰顯專(zhuān)屬性?
Pinterest 使用無(wú)限滾動(dòng)的策略是為了應(yīng)對(duì)過(guò)載的、淹沒(méi)用戶(hù)的數(shù)據(jù)。看似有限的,但卻是令人絕望的巨大,瀏覽它都覺(jué)得浪費(fèi)時(shí)間?;旧?,Pinterest 嘗試給用戶(hù)無(wú)限的靈感,但卻破壞了人們對(duì)控制的需求。大量的數(shù)據(jù)變得嚇人,用戶(hù)會(huì)帶著各種情緒離開(kāi)。
可用性為王
像之前說(shuō)的,Twitter 有效地整合無(wú)限滾動(dòng)。用戶(hù)瀏覽一個(gè)無(wú)限增長(zhǎng)的 tweets 列表時(shí),可以點(diǎn)擊某條 tweet,讓它原地?cái)U(kuò)展,防止頁(yè)面刷新。結(jié)果就是,保持用戶(hù)的位置。
Twitter 中分割 feed
在手機(jī)版本中,Twitter 甚至添加「分割頁(yè)面」的標(biāo)記,指引用戶(hù)從哪里繼續(xù)閱讀。這個(gè)微妙而又簡(jiǎn)單的方案讓用戶(hù)上下滑動(dòng)列表的同時(shí)也能返回到一個(gè)可辨認(rèn)的位置。心理上,該標(biāo)記通過(guò)分割已讀和未讀的內(nèi)容來(lái)消除讀者疑慮。這樣的標(biāo)記給用戶(hù)控制感、更好的內(nèi)容深度感知、快速地投入內(nèi)容中。
Twitter 不是唯一一個(gè)這樣做的。Discourse,一個(gè)新興的討論平臺(tái),也使用無(wú)限滾動(dòng)。這間公司考慮到無(wú)限滾動(dòng)對(duì)他們用戶(hù)體驗(yàn)的重要性,使用一個(gè)既吸引人又獨(dú)特的進(jìn)度指示器。這個(gè)指示器只在有需要的時(shí)候和停止?jié)L動(dòng)的時(shí)候出現(xiàn)。指示器的數(shù)字代表當(dāng)前閱讀的條目數(shù)。這是個(gè)讓用戶(hù)有控制感的好方法,即使是面對(duì)大量數(shù)據(jù)時(shí)。
Discourse 中智能的進(jìn)度指示器
雜交
在很多案例中,無(wú)限滾動(dòng)和分頁(yè)的雜交也是一個(gè)好選擇。在這個(gè)方案中,你會(huì)在分頁(yè)的最后看到一個(gè)「加載更多」的按鈕,點(diǎn)擊它就會(huì)加載更多。就像無(wú)限滾動(dòng)中的自動(dòng)加載,這個(gè)按鈕也可以不點(diǎn)擊的。這樣的界面既有無(wú)限滾動(dòng)的部分好處,而沒(méi)有其壞處。
由于無(wú)限滾動(dòng)需要網(wǎng)站有很多內(nèi)容,這樣的雜交方案可用于控制數(shù)據(jù)加載。在 Facebook 的 news feed 和 Google 的圖片搜索中,先是自動(dòng)地?zé)o限滾動(dòng),但是一次性請(qǐng)求確定數(shù)量的條目。這在保持界面的同時(shí)限制從服務(wù)器的加載內(nèi)容。(就是有限次數(shù)地使用自動(dòng)滾動(dòng)加載)
Google 圖片中,無(wú)限滾動(dòng)與分頁(yè)的雜交
無(wú)限的頁(yè)面
無(wú)限的頁(yè)面把無(wú)限滾動(dòng)的概念帶到一個(gè)新高度。網(wǎng)站在「一頁(yè)」中使用這一概念。完全不需要點(diǎn)擊下一頁(yè),把整個(gè)網(wǎng)站長(zhǎng)長(zhǎng)的一頁(yè)。例子:Unfold?和?Lost World’s Fairs。
在這些一頁(yè)的網(wǎng)站中,所有的場(chǎng)景都是垂直展開(kāi),一個(gè)接一個(gè)。這讓網(wǎng)站難以理解,也更難使用。盡管這可以提供創(chuàng)造性的交互,但它使用戶(hù)迷失,不知道哪里才是下一條信息。很多網(wǎng)頁(yè)隱藏滾動(dòng)條,讓用戶(hù)感到失落,因?yàn)樗麄兿胍ㄟ^(guò)滾動(dòng)條的位置來(lái)追蹤自己的進(jìn)度。隱藏滾動(dòng)條剝奪用戶(hù)的救命稻草。用戶(hù)不應(yīng)該被丟到無(wú)助的境地;界面應(yīng)該清晰地導(dǎo)航。
沒(méi)有滾動(dòng)條讓人迷失位置
UX設(shè)計(jì)師設(shè)計(jì)無(wú)限的頁(yè)面時(shí)需要特別小心。要考慮它的可訪問(wèn)性要;通過(guò)頁(yè)面長(zhǎng)度和閱讀比例,告訴用戶(hù)他們的位置。有以下一些方案:固定菜單、頁(yè)面地圖、進(jìn)度滾動(dòng)條。
還有一招是視差滾動(dòng),憑借不同的圖層以不同的速度在頁(yè)面上滾動(dòng),創(chuàng)造出景深(如:Andrew McCarthy’s website)。這有助于創(chuàng)造漂亮、革新的體驗(yàn)。有時(shí)它會(huì)被過(guò)度使用,用戶(hù)會(huì)困惑于究竟要滾動(dòng)多久,還是它會(huì)自動(dòng)滾動(dòng)。明知的做法是用它來(lái)提升內(nèi)容,而不是用它作為內(nèi)容.
徹底了解它
無(wú)限滾動(dòng)是一個(gè)革新的功能,通過(guò)高效地展示內(nèi)容來(lái)改善界面。但是它需要被正確使用。
要避免以下的坑以達(dá)到極致的無(wú)限滾動(dòng)體驗(yàn)
- 用戶(hù)想要立刻查閱專(zhuān)屬的數(shù)據(jù)
用戶(hù)不想自己探索所以的網(wǎng)絡(luò)數(shù)據(jù)。使用無(wú)限滾動(dòng)時(shí),要區(qū)分哪些是你的網(wǎng)站獨(dú)家內(nèi)容,把它們置頂,過(guò)濾無(wú)關(guān)信息。 - 用戶(hù)想要控制感
無(wú)限滾動(dòng)妨礙控制體驗(yàn)。添加一個(gè)智能進(jìn)度指示器、固定菜單或地圖。 - 在滾動(dòng)的時(shí)候,用戶(hù)通常都在尋找標(biāo)記
當(dāng)滾動(dòng)一個(gè)長(zhǎng)列表是,用戶(hù)希望可以輕易分辨新的、已讀的數(shù)據(jù)。在界面上添加一個(gè)標(biāo)記作為導(dǎo)向。 - 不要用含糊的界面來(lái)提供好的內(nèi)容
只有當(dāng)用戶(hù)覺(jué)得值得的時(shí)候,使用永無(wú)盡頭的列表才符合邏輯。 - 用戶(hù)希望看到頁(yè)腳
如果頁(yè)腳信息是功能性的,他就應(yīng)該出現(xiàn)在頁(yè)面底部。固定的頁(yè)腳通常和無(wú)限滾動(dòng)在一起。 - 無(wú)限列表依然是一個(gè)列表
無(wú)限滾動(dòng)也需要符合界面標(biāo)準(zhǔn)。不管用戶(hù)是不看屏幕了,或是點(diǎn)擊某個(gè)鏈接再按「后退」,他們希望能回到他們之前的那個(gè)地方。無(wú)論是什么界面,確保它符合用戶(hù)期望。 - 特效很好,但不是必須的
很多無(wú)限滾動(dòng)界面都有很多不同的特效來(lái)展示數(shù)據(jù)(不管是側(cè)滑,還是其他什么)。要記住,不要過(guò)分追求特效。
正確使用之
用戶(hù)是目標(biāo)導(dǎo)向 (goal-oriented),查閱到盡頭會(huì)讓他們很滿(mǎn)意。無(wú)限滾動(dòng)有必要解釋一點(diǎn);沒(méi)什么是真正的無(wú)限,即使是我們見(jiàn)過(guò)的無(wú)限滾動(dòng)列表。用戶(hù)應(yīng)該了解他們的位置,哪怕內(nèi)容還沒(méi)加載完。他們有必要知道數(shù)據(jù)的總量,還可以輕易游歷整個(gè)列表。無(wú)限滾動(dòng)應(yīng)該以最佳方式被使用,用戶(hù)才能找到路。
來(lái)源:smashingmagazine?/ May 3rd, 2013
作者:Yogev Ahuvia
翻譯:lyzhie
無(wú)限滾動(dòng)是一個(gè)革新的功能