用戶是如何瀏覽你的網(wǎng)站的
事實(shí)上,互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁(yè)的習(xí)慣和顧客瀏覽商店中物品的習(xí)慣沒(méi)有多大差別。用戶打開一個(gè)新的頁(yè)面,掃視一些文字,并點(diǎn)擊第一個(gè)引起他興趣的鏈接。在這過(guò)程中,頁(yè)面上有大量的區(qū)域用戶甚至完全沒(méi)有看過(guò)。大部分用戶在頁(yè)面上尋找他感興趣且可點(diǎn)擊的內(nèi)容,一旦發(fā)現(xiàn)目標(biāo),點(diǎn)擊行為就會(huì)發(fā)生,但如果頁(yè)面不符合期望,后退或關(guān)閉按鈕也將馬上被點(diǎn)擊。
用戶是如何瀏覽你的網(wǎng)站的
1. 大部分時(shí)候用戶并非在閱讀屏幕上的內(nèi)容,而是在掃視。
用戶習(xí)慣掃視和快速尋找頁(yè)面上一些能夠引導(dǎo)他理解內(nèi)容的關(guān)鍵點(diǎn)。
2. 不要考驗(yàn)用戶的耐心
當(dāng)一個(gè)頁(yè)面不能滿足用戶的期望時(shí),離開就在所難免。希望通過(guò)添加相關(guān)內(nèi)容來(lái)豐富頁(yè)面和留住用戶往往效果不佳甚至適得其反。一屏頁(yè)面上承載的信息越多,認(rèn)知的負(fù)擔(dān)就會(huì)越重,就需要花費(fèi)更多的時(shí)間去處理信息,如果這些信息中還有些不是用戶期望的,那就還要花額外的精力將這些多于信息從注意力中剝離。Jakbo Nielsen 的研究結(jié)論也表明:一個(gè)頁(yè)面上的認(rèn)識(shí)負(fù)擔(dān)越重,導(dǎo)航和瀏覽就會(huì)越困難,用戶離開并尋找其他替代品的可能性就越大。
3. 用戶并不做最佳選擇
用戶并不是在搜尋找到最佳選項(xiàng)的最快途徑,他們也并非用線性的方式來(lái)閱讀屏幕上的內(nèi)容(有順序地從一個(gè)模塊到另一個(gè)模塊)。當(dāng)用戶找到第一個(gè)合理的選項(xiàng),或者一旦找到了可能的目標(biāo)內(nèi)容,立即點(diǎn)擊的可能性會(huì)非常大。其實(shí),用戶是在尋找能讓他們覺(jué)得夠用或者合適的內(nèi)容,而非尋找最佳的選擇,理由也很直觀,讓用戶自己去做最佳選擇需要花費(fèi)不少時(shí)間和精力,那已經(jīng)在考驗(yàn)用戶的耐心了(選擇即成本)。
來(lái)自?eyetools 的圖片,可以看出用戶瀏覽時(shí)的關(guān)注點(diǎn)和非線性的瀏覽軌跡。
Jakbo Nielsen的F形瀏覽熱區(qū)
Jakbo Nielsen曾對(duì)232位用戶瀏覽幾千個(gè)頁(yè)面的過(guò)程中的眼動(dòng)情況進(jìn)行追蹤,發(fā)現(xiàn)用戶在不同站點(diǎn)上的瀏覽行為有明顯的一致性,將瀏覽熱點(diǎn)可視化后呈現(xiàn)出類似F形的圖案。這種瀏覽行為有三個(gè)特征:
1. 用戶首先會(huì)在內(nèi)容區(qū)的上部進(jìn)行橫向?yàn)g覽。
2. 用戶視線下移一段距離后在小范圍內(nèi)再次橫向?yàn)g覽。
3. 最后用戶會(huì)在內(nèi)容區(qū)的左側(cè)做快速的縱向?yàn)g覽。
PS.顯然,用戶的瀏覽行為并非精確的包含這個(gè)三個(gè)過(guò)程,有時(shí)候,在這三個(gè)過(guò)程之后,還會(huì)在底部有橫向?yàn)g覽的熱點(diǎn),使得整個(gè)瀏覽熱區(qū)圖看上去更像E而不是F。也有時(shí)候,用戶瀏覽時(shí)只反應(yīng)了上述的行為1和行為3,使得瀏覽熱區(qū)圖像一個(gè)倒寫的L。但從所有數(shù)據(jù)整體上來(lái)看,用戶的屏幕瀏覽熱區(qū)圖還是較一致地反應(yīng)出了F圖像。
如何運(yùn)用F形閱讀行為進(jìn)行設(shè)計(jì):
1. 用戶并不會(huì)瀏覽頁(yè)面上的所有內(nèi)容(F形之外的大片空白區(qū))
2. 將最重要的信息放在頭兩段(F熱區(qū)中的兩個(gè)橫向熱區(qū))
3. 在后續(xù)的內(nèi)容中,將關(guān)鍵詞和信息放在段首,使用戶在左側(cè)縱向?yàn)g覽時(shí)能更容易關(guān)注到。
總結(jié)和啟示
1. 用戶習(xí)慣掃視,而不是閱讀
2. 用戶并不會(huì)關(guān)注到頁(yè)面上的所有內(nèi)容
3. 不要考驗(yàn)用戶的耐心,不要增加用戶的認(rèn)知負(fù)擔(dān)
4. 用戶并不做最佳選擇
5. 用戶在屏幕上的瀏覽熱區(qū)整體上符合“F形”
6. 針對(duì)F形瀏覽行為,將最重要的信息放在上部,將相關(guān)的關(guān)鍵內(nèi)容和信息放在內(nèi)容區(qū)左側(cè)。
參考文獻(xiàn):
1. F-Shaped Pattern For Reading Web Content, by Jakbo Nielsen
2. Common Email Layouts: B2C Electronics Template, by Teresa Hernandez
3. But What Does It All Mean? Understanding Eye-Tracking Results, by Teresa Hernandez
- (本文出自Tencent CDC Blog,轉(zhuǎn)載時(shí)請(qǐng)注明出處)
- 目前還沒(méi)評(píng)論,等你發(fā)揮!