天天看點

(翻譯)無限滾動最佳實踐

  無限滾動是一種使用者界面趨勢,很多網站都在使用該功能。有了無限滾動功能,使用者不用點選分頁并等待新頁面,恰恰相反,使用者隻需滾動到頁面底部,新的内容就會自動加載到目前頁面。

  無限滾動功能不僅降低了滑鼠點選量,也避免了加載新的頁面。這種有效浏覽内容的新技術有很多優點,但是,在沒有最佳實踐的情況下,難以實作無限滾動功能。可以參考下面一組最佳實踐,使你的無限滾動功能能滿足使用者的期望。

導航欄始終可見

  當在正常頁面中向下滾動時,導航欄會逐漸消失。但是在支援無限滾動的頁面上,最好保持導航欄始終可見,讓使用者能導航到新的目錄、搜尋新内容或随時登入網站。如果導航欄不是始終可見,當使用者深入浏覽頁面内容後,他們得将頁面復原回去才能看到導航欄。保持導航欄始終可見,便于使用者跳轉到網站的其它位置。

(翻譯)無限滾動最佳實踐
加載新内容時要有回報

  頁面加載新内容時,需要給使用者明确的辨別,指明網站正在做内容加載操作。讓使用者知道頁面正在加載新内容,使他們做好準備面對更長的頁面及新内容。最不想看到的情況是使用者感到困惑或奇怪,是以采用進度訓示器,告知使用者正在加載新内容并将很快出現在頁面上[1]。

(翻譯)無限滾動最佳實踐
顯示内容加載量及剩餘量

  使用無限滾動功能,使用者會在頁面中加載大量内容,是以,最好是讓使用者知道已經加載了多少内容以及還有多少内容沒有加載。這樣有利于使用者了解浏覽進度,下次再浏覽時能夠找到上次浏覽的位置。這也讓使用者了解網站的内容容量、已經浏覽了多少内容以及何時停止滾動。通過了解目前位置及終點,讓使用者有安全感和舒适感,使他們覺得自己在不斷進步。

(翻譯)無限滾動最佳實踐
在頁腳處使用“更多内容”按鈕

  如果網頁有頁腳,且準備支援無限滾動功能,最好使用“更多内容”按鈕加載新内容。使用者點選“更多内容”按鈕後才加載新内容,這樣他們不用緊趕慢趕就能輕松地通路頁腳内容。如果沒有“更多内容”按鈕,使用者隻有很短的時間通路頁腳内容,之後頁腳就會被新内容沖下去了,這導緻很難通路頁腳内容。有了“更多内容”按鈕,使用者可以輕松掌控頁面内容和頁腳。

(翻譯)無限滾動最佳實踐
使用者點選後退時能回到之前的位置[2]

  使用者點選後退時,他們不止是想回到之前的頁面,最好是能回到頁面上之前的位置[3]。在不斷的浏覽内容後,丢失頁面上的位置迫使使用者不得不持續的翻過已經看過的内容,給使用者帶來了不便,使得使用者退出網站[4]。如果能讓使用者回到頁面上之前的位置,他們可以不費力地接着浏覽後續内容。頁面角上的退回連結也可以使點選後退變得簡單友善。

(翻譯)無限滾動最佳實踐

  無限滾動功能用得好會有好處。上述最佳實踐将引導你朝着正确的方向前進,讓使用者滿意你提供的無限滾動功能,不會讓他們産生疑惑。無限滾動功能作為新興的使用者界面技術,上述最佳實踐對于提供友好的浏覽體驗至關重要[5]。

原文位址:https://uxmovement.com/navigation/infinite-scrolling-best-practices/

[1]原文:The last thing you want is a confused or surprised user. Keep them informed by using a progress indicator to show that new content is loading and will soon appear on the page.

[2]原文:Bring users back to their previous spot when they click back

[3]原文:When users click back they not only expect to land on their previous page, but their previous spot on the page.

[4]原文:After endlessly scrolling through content, losing their spot on the page forces users to have to endlessly scroll through content they have already seen. This inconveniently gives users more work than they need. It can cause users to give up on your site and move on.

[5]原文:With an interface technique as new as this, these best practices are crucial for delivering a friendly browsing experience.