你的產品正在無限滾動 Infinite scrolling 嗎？
我先介紹一下我自己，我是Ayden，目前在軟體產業擔任Product Designer，業餘時間喜歡做side project，擁抱學習，開放的心胸，經常性的思考科技如何改變生活，喜歡彼此分享交流。
— — —
近期做產品的時候研究到無限滾動 ( Infinite scrolling ) 的設計體驗，因此想藉此文章紀錄一下我學習的過程，用一句話說明 Infinite scrolling 目前遇到的狀況：The content is endless, but user patience is not. ( 你的內容是無盡的，但使用者的耐心卻不是 )。
無限滾動 ( Infinite scrolling )
當用戶向下滾動頁面時，無限滾動體驗會不斷加載內容給用戶，從而提供不斷增長且看似永無止境的資料，所以又稱：惰性滾動、懶載入 ( lazy loading ) 、瀑布流等名稱。
無限滾動也因Twitter、Facebook、Pinterest 等社交媒體平台上的成功而廣受歡迎，但此體驗並不適用於所有類型的內容，如果你的產品是結構相對扁平的內容來說是很適合的。
— — —
無限滾動在設計上要注意的
01.道德設計 ( Ethical Design )
2019的時候，美國參議員 Josh Hawley 提到社交成癮減少技術 ( Social Media Addiction Reduction Technology ) 簡稱為 SMARTA ，他提到許多大型公司的商業模式都依靠著用戶的成癮性，除了許多知名社交平台上的無限滾動外還有像是 Youtube 的自動播放以及 Snapchat 要求用戶在每天都要上傳一張照片帶來的用戶無意識上癮行為。
他說道：「許多產品的“創新”不是為了創造更好的產品，而是利用讓人難以移開視線的心理技巧和設計來吸引更多的注意力。」
社交媒體成癮的普遍性和道德影響問題到現在仍有辯論的空間，需要更多的研究來得出關於更有說服力的設計，例如無限滾動，如何做出明確的貢獻以及結論。
— — —
02.無障礙規範 ( Accessibility Guidelines )
無限滾動是不符合無障礙設計規範的，也對殘障者是不友善的，像是常常依靠輔助科技來進入下一頁的用戶。無限滾動導致網站上的側邊欄和其他相關頁面可能會在不斷加載內容的界面上受到阻礙，此過程違反了 Web 內容可訪問性指南 ( Web Content Accessibility Guidelines )。
- 只用鍵盤的用戶：僅鍵盤用戶無法訪問無限滾動中的內容，當從一個內容跳轉到另一個內容時，重點從最後一個內容移動到下一個內容。
- 語音識別：自然使用 Dragon 或任何其他語音識別軟體的用戶無法完全享受無限滾動體驗。
- 螢幕閱讀器用戶：雖然在瀏覽/閱讀模式下螢幕閱讀器用戶可以使用無限滾動，但只有那些非常熟悉屏幕閱讀器的用戶（或高級用戶）才能識別這些物件。一些經驗不足的屏幕閱讀器用戶可能認為頁面很長，可能會完全錯過補充/頁腳區域。
- 使用開關設備的用戶（行動不便的人）：想像一下，如果您是開關控制用戶，被迫使用無限滾動來訪問內容，您會遇到多大的壓力和努力。如果您只能通過一系列點擊進行導航，那麼無止境的導航將非常耗時且難以有效導航。
- 不使用開關設備的運動障礙用戶：想像一下，您是一個運動障礙者，被迫在無限滾動中瀏覽一組內容並找到您想要結帳的項目。如果您有顫抖並且您是鼠標用戶，您可能會不小心將鼠標移過項目，導航會觸發更多內容加載。
- 低視力用戶：低視力用戶傾向於使用螢幕閱讀器、螢幕放大軟件或 windows 高對比度模式。低視力用戶很難訪問無限滾動中的內容。作為一個低視力用戶，我可以肯定地說，使用無限滾動對我來說非常非常困難，因為我傾向於使用帶有螢幕放大功能的鼠標。我的手和眼一直處於協調狀態，因為我的螢幕被放大了 6 倍。當內容不斷加載時，在螢幕上找到正確的內容對我的眼睛來說非常緊張。
- 有認知障礙的用戶：多動症、短期記憶喪失等在設計和開發中經常被遺忘。無限捲軸具有很高的認知負荷，這對於有認知困難的人來說是非常費力的。
- Web/本機移動可用性：在響應式 Web 或本機移動應用程序上無限滾動可能導致永無止境的滑動或滾動。由於較小的螢幕空間充滿了許多控件，無限滾動的內容為可用體驗增加了一層難度。
資料參考
— — —
03.無限滾動與CLS ( Cumulative Layout Shift )
Google評分當中的網站使用體驗核心指標報告指出 LCP, FID, CLS這三大指標，而其中的累計版面配置轉移 CLS(Cumulative Layout Shift)是三項核心指標裡的「頁面穩定性」代表，當中又分為可預期和不可預期的位移。
計算方式為
元件移位分數(layout shift score) = 影響範圍(impact fraction) * 移動距離 (distance fraction)。
可預期的版面配置轉移 ( Expected layout shifts )
不會影響到分數，這時候頁面因為有明顯的收合/展開按鈕，而導致的版面配置轉移是可以預期的。因此， Google不會將此判定為是頁面的不穩定性。
不可預期的版面配置轉移 ( Unexpected layout shifts )
會影響到分數，不可預期的版面配置轉移通常是因為網頁內的元素載入順序不同而造成的。你是不是曾有過某一個網站版面會不斷的跳來跳去，導致你按下去之後導到錯誤的頁面當中，評分範圍從 0 到正數，其中 0 表示沒有任何位移，而數字越大表示網頁上發生的位移越多。這項指標的重要性在於如果網頁元素在使用者嘗試與網頁互動時移動了位置，會對使用者體驗造成負面影響。
無限滾動跟 CLS 的關係呢？
如果你的用戶是沈浸於無限滾動的設計當中的，你可能需要注意到，避免載入後導致頁面中的內容移動，確保所有圖片和元件都必須保留一定的空格給物件，拿捏好物件與物件之間的距離，或是使用像 CSS Aspect Ration Boxes 預留所需要的空間，確保所有的圖片或影片元件上使用尺寸屬性。
以 nike.com 為案例，我試圖想要點到無限滾動下方的標籤頁腳，卻永遠無法點到，因為畫面當中不斷加載新內容給我，這讓我很惱怒。
這邊推薦幾個檢測工具，幫助你檢測自己的網站分數
參考資料
- 累積版面配置轉移CLS– 頁面體驗為2021年GOOGLE演算排名SEO重點
- web.dev/cls
- Google網站核心指標Core web vitals(LCP、FID、CLS)是什麼？5大SEO UX重點優化項目
- 網站使用體驗三大核心指標 — LCP, FID, CLS
— — —
04.無限滾動導致返回上一頁的位置偏移或錯誤
你是否曾經有過使用無限滾動的產品上，點了某樣產品進到下一個分頁，但是返回上一頁的時候，卻不是你當初點擊前離開的位置，而是回到最上方或者是錯誤位移的情況發生，導致你必須重新向下滾動到原始位置去繼續瀏覽。
— — —
以 nike.com 的這個案例，當使用者按下上一頁的時候，最後雖然有回到原本的位置，但是出現了許多會讓使用者分心的位移情況。
— — —
以 ZALORA.com.tw 為例，當你沈浸在無限滾動的體驗當中，看到一個你喜歡的男裝點進去之後，發現不適合，當你返回上一頁時，網頁竟然帶你直接回到最上面，你必須重新往下滑動才能到達你當初離開的位置，這實在是太瘋狂了。
— — —
平常也使用了許多無限滾動設計的產品，像是 Dribbble, behance，他們都是點擊之後會在視窗內彈出一個比較小一點的視窗，而不是切換整個頁面。我想這是採用 Modal 的形式，在返回互動上與無限滾動當中取一個平衡的設計手法。
不過這邊也要注意到產品的性質來決定你的設計模式，一種模式沒辦法套用到所有的產品上，當你希望使用者專注在這頁的時候，你可能就會採用切換整個頁面的設計模式。
Modal引文推薦
05.無限滾動不適合目標導向用戶
記憶點
由於無限瀏覽的產品通常數據量很大，因此用戶是以目標導向 ( Drive-goal user ) 搜尋某種訊息，無限滾動的形式對他們來說是沒有幫助的，也相對Pagination的設計來說，沒有頁數概念的記憶點去更有效率地找到他們的資料，離開之後下次要找到相同產品時，有頁數的記憶點遠勝過無限滾動。
人們要將返回搜索結果列表，以查看他們剛剛看到的項目，並將其與列表中的其他地方發現的其他項目進行比較。具有分頁的介面使用戶可以保持商品的心理位置。他們可能不一定知道確切的頁碼，但是他們會大致記住那是什麼，而分頁的形式使他們更容易到達位置。而無限滾動不僅破壞了這種形式，而且還使列表上移和下移變得困難，尤其是當您在另一時間返回頁面並回到頂部時，使用者被迫再次下向滾動，並花更多時間等待內容加載。這樣對於用戶體驗來說，無限滾動設計實際上比分頁的介面來的還要慢。 -Dmitry Fadeyev，當無限滾動不起作用時
使用者控制權
當使用者搜索時，有頁碼的設計 ( Pagination ) 讓他們知道搜索結果的確切數量。使用者可以明智的決定在哪裏停止或細讀多少結果，因為他們看得到終點，也根據人機交互領域進行的研究，達到終點提供的一種控制感，使用者知道所有相關結果，並看到尋找該結果的框架，有助於用戶做出更明智的決定，而不任使用者去無限滾動這些內容。
- User Goals and How They Influence Information Design Decisions
- Designing for Goals
- Start designing with goals in mind
— — —
無限滾動的替代方案
Pagination 分頁
分頁可能是組織 Web 內容最明顯的方法。它涉及將內容架構分成不同的頁面，每個頁面都限定住數量的項目。顯而易見搜尋的結果，並帶給使用者他們所期望的，缺點應該就是沒有任何驚喜。
也為用戶清楚的提供了物品所在位置。例如，一個電子商務網站上購買帽子的用戶可能會看到第四頁，並意識到挑選的東西越來越少，回想一下他們最喜歡的帽子可能在第二頁上面或附近，返回到第二頁對於使用者來說是一個很簡單的任務。
Load more button 加載更多按鈕
加載更多按鈕通常放置於內容下方，明確的指引用戶是否想要查看更多結果。與無限滾動不同，他不假設使用者行為，給了用戶一個自然的停止點，給了用戶更多的控制權，也讓使用者在這時候可以訪問頁腳內容或是加載更多。
與分頁不同地方是，加載更多按鈕不會將內容架構分成不同的頁面呈現，加載更多的設計體驗與無限滾動是略有相似的，當使用者多次按下加載更多後，也有可能會遇到無限滾動的一些缺點或是使用者找不到目標的情況發生。
— — —
總結
- 無限滾動設計可以多加考量到無障礙使用者之間的互動行為，雖然說無法滿足所有人，但這些可以幫助產品或品牌再一些少數族群的使用獲得良好的聲譽。
- 實施無限滾動時，先了解你的產品提供什麼樣的價值給用戶，如果是想要不斷地瀏覽和到處觀看，那你的產品很適合用無限滾動的形式，反之，如果你的產品帶有用戶目標導向的搜索，或許Pigination的設計互動會更適合你的產品。
- 別對用戶做出太多假設，給用戶多一點產品的控制權，並以測試為上。
- 無限滾動模式不適合在下方放頁腳，如果要放頁腳，或許可以混合搭配載入更多按鈕來解決。
- 企業面臨到的挑戰其中一項也是「道德設計」，當用戶成癮於你的產品時，相對帶來很可觀的收入，不過長時間的探索真的對用戶是好的嗎？
- 當用戶返回上一頁的時候，他們希望返回到當前滾動離開的點擊位置，而不是回到最頂部，或是造成其他錯誤位移的情況發生。
- 無限滾動在手機的體驗上是相當好的，使用者無需點擊，靠滑動的方式即可獲取更多內容，可以參考 Google 再 2021 為無限滾動在手機上的測試：Google is reportedly testing out the infinite scrolling feature for mobile search results。
覺得內容有幫助的話也可以給小弟拍手鼓勵，這次的分享就到這邊，謝謝觀看。
