[譯] 從 2010 到 2018，你不知道的關於網頁滾動和使用者注意力的變化
- 原文地址： ofollow,noindex">Scrolling and Attention
- 原文作者：Therese Fessenden
- 譯文出自： 掘金翻譯計劃
- 本文永久連結： github.com/xitu/gold-m…
- 譯者： Ivocin
- 校對者： Moonliujk , CoderMing
摘要：人們比以前更多地縱向滾動網頁，但是新的眼動追蹤資料表明：注意力沒有變化，人們仍然更關注首屏上的內容，而非首屏以下的內容。
人們的行為相當的穩定， 可用性指南一直鮮有變化 。但是，從網路出現早期至今，有一個使用者行為發生了變化，那就是滾動網頁的趨勢。一開始，很少有人縱向滾動網頁，但 到了 1997 年，隨著長頁面的普及 ，大多數人學會了滾動網頁。然而，首屏上的資訊仍然受到了最多的關注：我們的眼動追蹤研究表明，即使早在 2010 年，使用者 80% 的頁面瀏覽時間都花在了首屏上面。
自 2010 年以來，隨著響應式設計和極簡主義的出現，許多設計師轉向了具有負空間的長頁面（覆蓋幾個“螢幕”）設計。現在是時候再次探究由於這些網頁設計趨勢的普及，使用者行為是否發生了變化。
眼動追蹤資料
關於本研究
為了回答這個問題，我們分析了 1920×1080 解析度螢幕上超過 130,000 個凝視點（eye fixations）的 x, y 座標。這些凝視點來自 120 名參與者，他們是我們最近的眼動追蹤研究的一部分，該研究涉及來自各行各業的數千個網站。在本研究中，我們重點分析了廣泛的使用者任務，這些任務涵蓋各種頁面和行業，包括新聞，電子商務，部落格，常見問題解答和百科全書頁面。我們的目標不是分析某個網站，而是總結出使用者行為的一般性。
我們將這些近期資料與我們之前在眼動追蹤研究中獲得的資料進行了比較，之前的資料是在 1024×768 解析度螢幕上獲得的。
研究結果
我們的前後兩次研究之間發生了兩處變化：（a）更大的螢幕，（b）使用者可能已經適應了的新的網頁設計趨勢。我們無法單獨考慮某一變化所帶來的影響。但沒有關係，因為兩者都是由於時間的流逝造成的變化。即使我們想要，我們也無法撤消任何一個。
在我們最近的一項研究中，使用者將大約 57% 的頁面瀏覽時間用於首屏。74% 的瀏覽時間花費在前兩個螢幕上 ，瀏覽的長度最高可達 2160px。（本分析不關心頁面的最大長度 —— 結果可能是由於頁面長度較短或者是使用者在瀏覽了前兩個螢幕內容後就放棄了閱讀。）
這些發現與我們在2010 年的發表的文章完全不同：在那篇文章中，使用者 80% 的頁面瀏覽時間花費在了首屏。然而 首屏後頁面關注度急劇下降 的現象在 2018 年和 2010 年相同。
首屏上的內容在瀏覽時間中佔據比最高。大約 74% 的時間花費在前兩個螢幕內容中（首屏加上首屏下方的螢幕資訊）。剩餘的 26% 部分隨著頁面長度的增加少量遞減。
能夠理解的是，並非每個頁面的長度都相同。為了確定人們如何在頁面上分配他們的注意力（無論頁面有多長），我們將頁面分成 20％ 的分段（即每頁的五分之一）。在一般網站上，超過 42% 的瀏覽時間花在了頁面的前 20% 區域上，超過 65% 的瀏覽時間花在頁面的前 40% 區域上。在搜尋結果頁面（SERPs）上，結合我們在 2010 年的調查結果，47% 的瀏覽時間花費在頁面的前 20% 區域上（超過 75% 的瀏覽時間花在了頁面的前 40% 區域上）—— 可能反映了使用者更願意檢視熱門搜尋結果的現象。
人們花費更多時間瀏覽頁面的前 20% 區域。
如果我們只關注首屏的內容 —— 在第一個螢幕中 —— 螢幕頂部的資訊比底部資訊更受關注。使用者超過 65% 的瀏覽時間集中在視窗的上半部分。在 SERP 上，首屏超過 75% 的瀏覽時間花費在了第一個螢幕的上半部分。（這是一個古老的事實，但也是老生常談：你在谷歌的搜尋結果要麼是前兩名，要麼就在網際網路上幾乎不存在。“輕信谷歌”的現象至今依然強烈，和我們 10 年前發現這種使用者行為時一樣。）
即便在首屏上，注意力也集中在頁面頂部 —— 尤其是 SERP。
瀏覽和閱讀模式
我們已經發現首屏上的內容得到了最多的關注（佔瀏覽時間的 57%），第二屏內容瀏覽時間約佔三分之一（佔瀏覽時間的 17%），剩餘的 26% 瀏覽時間表現為長尾分佈。換言之，一條資訊離頁面頂部越近，它被閱讀的可能性就越大。
個人閱讀模式證實了這一發現。許多使用者在掃描內容結構不合理的頁面時會使用 F 模式閱讀 —— 他們傾向於更仔細地檢視靠近頁面頂部的文字（文字的前幾段），頁面越往下閱讀資訊的時間越少。
即使網頁是列表形式或資訊以結構化的方式呈現，人們也會在頁面頂部投注更多的目光（即閱讀時間），因為他們需要了解頁面的組織方式。一旦他們這樣做，他們傾向有效地關注與手頭任務相關的資訊，因此在遠離頂部的內容上投注更少的目光（即閱讀時間）。
這是一個典型的凝檢視，圖中顯示大多數使用者的凝視點都集中在頁面的頂部，但並不總是位於最頂部。凝視點的實際分佈取決於頁面的具體設計和使用者訪問頁面的目標。如果資訊看起來很有趣，使用者有時可能會閱讀一點點，但總體而言，瀏覽會在頁面的下方逐漸消失。
2010 年 vs 現在
2010 年，使用者 80% 的瀏覽時間都花在了首屏上。今天，這個數字只有 57% —— 可能是由於長頁面普遍流行的結果。這意味著什麼？
首先，總的來說，設計師們很好地創造了指示符以抵消頁面完整的錯覺，並引導人們滾動頁面。換言之，他們瞭解了長頁面的缺點並在一定程度上緩解了這些缺點。其次，它可能意味著使用者已經習慣了滾動閱讀 —— 需要滾動閱讀的頁面的流行讓滾動頁面植入到了使用者的行為中。
至少在某種程度上。人們仍然不會滾動很多 —— 他們幾乎不會滾動到三屏之外。基本上，首屏的界限已經被推到了第三個螢幕 —— 8 年前，使用者瀏覽網頁時間的 80％ 的停留在了在第一個螢幕資訊中（首屏）；而今天，使用者瀏覽網頁時間的 81％ 停留在了前三個螢幕上。
我們總是說人們會在有理由的情況下滾動頁面。人們的注意力仍然停留在頁面頂部 —— 頁面頂部是網頁內容中最易發現且可能被使用者檢視的部分。滾動頁面的互動成本使使用者幾乎不會閱讀較長頁面下游部分的內容。
有趣的是，螢幕解析度的增加並沒有像人們預期的那樣導致滾動的減少。原因可能是設計師和開發者沒有利用更大的螢幕來減少滾動，而選擇將內容進一步分散。無論好壞，現在鼓勵使用者滾動網頁比過去更多 —— 但不能更多了。在網路的早期，資訊密度可能太高了（這導致了擁擠和雜亂的佈局），但現在的頁面設計絕對是太稀疏了。
啟示
鑑於使用者在頁面的頂部花費了更多的閱讀時間，特別是在首頁上，這裡有一些你需要記住的事情：
- 將高優先順序內容放到頁面頂部：關鍵業務和使用者目標 。頁面的下半部分可以放置次要資訊或相關資訊。將主要的 CTA 放到首屏。
- 重要的內容使用合適的字型樣式來引起使用者注意 ：使用者根據標題和粗體文字等元素來識別資訊的重要程度，並且定位新的內容片段。確保這些元素在視覺上與眾不同，並在整個網站中保持風格統一，以便使用者可以輕鬆地找到它們。
- 注意不要使用“假地板” ，這在現代簡約設計中越來越常見。完整性的錯覺可能會干擾滾動。包括指示符（例如截斷的文字），告訴人們下面還有內容。
- 通過使用者代表測試您的設計 ，以確定“理想的”頁面長度，並確保使用者能夠輕鬆地檢視到他們想要的資訊。