如何優(yōu)化頁面布局?先掌握這5種常見的用戶瀏覽模式!
眾所周知,我們大部分的用戶群體閱讀習(xí)慣,從左到右,從上至下,這跟西方文化是差不多的,接下來將從瀏覽模式、瀏覽路徑、頁面布局進(jìn)行分析,優(yōu)化頁面布局,提升閱讀效率和體驗。
早在 2006 年,尼爾森團(tuán)隊發(fā)表過一篇關(guān)于《眼睛軌跡的研究》報告,提到了"F"型瀏覽模式,為大眾所知且影響深刻的瀏覽模式,除了剛剛說的"F"型的瀏覽模式,那是否還有哪些模式?有的,經(jīng)過相關(guān)資料的查詢,總結(jié)了以下瀏覽模式。
一、 "F"型瀏覽模式
"F"型模式通常在網(wǎng)頁或手機(jī)端瀏覽長篇文本時形成,眼球運(yùn)動是掃描頁面而非閱讀。具體表現(xiàn)為:
- 用戶首先在水平移動中瀏覽,通常是在內(nèi)容區(qū)域的上部,形成了 F 的頂欄;
- 接下來,用戶將頁面向下移動一點,然后在第二次水平移動中掃描,該移動通常覆蓋比上一次移動更短的區(qū)域,形成了 F 的下橫線;
- 最后,用戶垂直掃描內(nèi)容的左側(cè),可能是一個緩慢、概要性的掃描,在眼動追蹤熱圖上顯示為實心條紋;有時眼球移動得很快,創(chuàng)建了一個更多斑點的熱圖,最后一個元素構(gòu)成了 F 的詞干。
這是眼動實驗的追蹤熱圖,紅色是關(guān)注最多和最長的區(qū)域,黃色次之,紫色是關(guān)注最少的區(qū)域,沒有顏色的部分,是測試參與者沒有注視過。
大部分的用戶習(xí)慣是從左往右,從上至下的瀏覽的模式,某些特定的用戶是從右往左的瀏覽方式,不管怎么樣的,都是會形成類似于"F"的瀏覽路徑,從右往左的用戶形成的是水平對稱的"F"。
手機(jī)端的瀏覽同樣也是適用"F"型瀏覽模式,因為手機(jī)屏幕較小,可視區(qū)域也就更小,比 PC 端更簡潔。
1. "F"型瀏覽的設(shè)計要點:
- 用戶是掃描屏幕,不會仔細(xì)地一個字一個字閱讀頁面內(nèi)容,有可能會錯過某些關(guān)鍵信息。
- 頁面的頭兩段非常重要,用戶基本上最關(guān)注這個部分。這兩段的好壞能直接影響用戶是否有興趣繼續(xù)瀏覽。
- 將關(guān)鍵詞盡可能地提前在標(biāo)題、副標(biāo)題和段落的前部顯示給用戶。
"F"型瀏覽模式是用戶常用的瀏覽模式,適用于大部分場景,在瀏覽電腦或手機(jī)屏幕的時候,快速掃碼且不會逐個閱讀上面的每一個字,通過一種掃描的形式快速瀏覽,尋找關(guān)鍵信息,以提高效率,減少時間和精力的花費。
二、"Z"型瀏覽模式
顧名思義,追蹤人們?yōu)g覽屏幕眼動的路徑,從左到右,從上到下,形成類似字母"Z"形狀,通常適用于不以文本段落展示為主要內(nèi)容的頁面。
正常來說,用戶會按照紫色的路徑進(jìn)行瀏覽(遵循古騰堡原則),將重要的信息放置在 1 和 4 的位置,若 2 沒有信息,會自然而然跳過,形成綠色的瀏覽路徑(如下圖)。設(shè)計時采用"Z"型布局,將重要的信息放在視覺自然落到的地方,并且增強(qiáng)視覺強(qiáng)點,從而達(dá)到用戶體驗自然的瀏覽方式。
三、專注瀏覽模式(Commitment pattern)
這種模式已不是掃描,而是仔細(xì)閱讀,用戶會閱讀文本大部分或所有的字句,花在閱讀上的時間和精力也是最多的,但閱讀所有內(nèi)容能收集更多信息,相比"F"型瀏覽不會錯過關(guān)鍵信息。通常在任務(wù)或興趣的驅(qū)使下才會發(fā)生,比如要考試了學(xué)習(xí)、上級分配了任務(wù)等。
四、斑點瀏覽模式(Marking pattern)
在瀏覽的時候,用戶會關(guān)注的某些特定的關(guān)鍵字,如字體加粗、顏色突出的位置,感興趣的關(guān)鍵詞等,就會特別關(guān)注該區(qū)域的內(nèi)容,從而在頁面中形成類似斑點的熱圖。
從這張圖可以了解到,用戶在瀏覽的時候,左側(cè)是正常的 F 型瀏覽,瀏覽到感興趣的信息,就會在該區(qū)域停留。
五、分層蛋糕瀏覽模式(Layer-cake pattern)
當(dāng)一篇文章中包含標(biāo)題/副標(biāo)題,或者加粗字體等突出的地方,用戶就會專注突出的位置,然后快速描述正文,就會形成類似了分層蛋糕那樣的圖。
從上圖分析可知,用戶會重點關(guān)注藍(lán)色字體,也是作者想要傳達(dá)給讀者的信息,通過瀏覽重點信息,能快速理解文案內(nèi)容,是除了專注模式外,也是用戶掃描頁面的最有效方式。
六、思考
下面我們看一下"Z"型和對齊排版這兩種布局方式(也是我們常用的設(shè)計排版方式),對我們設(shè)計的影響。
大家可以先想一下,這 2 種排版方式,用戶的瀏覽軌跡是怎么樣的呢?
下面是經(jīng)過眼動實驗的兩張圖(上面的"點"次數(shù)表示用戶注視的次數(shù),"點"大小表示用戶停留的時間長短)。
兩種排版方式,用戶都從一開始就被第一行中引人注目的產(chǎn)品圖片所吸引,發(fā)現(xiàn)對于了解產(chǎn)品信息是有幫助,下面瀏覽到圖片的時候都會查看,除此之外,他們的眼睛在文本和圖像之間多次移動,并根據(jù)最先引起他們注意的內(nèi)容引導(dǎo)到下一行。因此,這兩種布局排版差別不大。
若我們換成裝飾性的圖片,圖片包含的信息有限,會有什么樣的結(jié)果呢?
事實上,圖 1 用戶剛開始瀏覽會關(guān)注上面的圖片和文字,發(fā)現(xiàn)圖片上沒有價值的信息,只是裝飾使用,就會忽略下面看到的圖片從而跳過。圖 2 是對齊方式布局,從而更方便跳過,圖 1 按照"F"型的瀏覽習(xí)慣,視線會短暫停留在左側(cè)的圖像,無法完全跳過。
所以,頁面中若圖片是裝飾性的,用戶會選擇忽略,左對齊的排版對用戶瀏覽會更友好點。"Z"型的排版,圖片對眼睛來說很像障礙物,他的目光引導(dǎo)到一張圖片上后,他立即將目光從圖片上移開,轉(zhuǎn)向文字。
另外,按照我們的瀏覽習(xí)慣,自然而然地會關(guān)注頁面的左側(cè),當(dāng)如果右側(cè)的內(nèi)容或圖像明顯突出的時候,會優(yōu)先關(guān)注突出部分內(nèi)容。
還有個有趣的現(xiàn)象,大多數(shù)用戶瀏覽頁面滾動到了底部,會向上滾動,返回查看幾眼圖片,再離開頁面。
七、總結(jié)
- "F"型瀏覽適用于文本頁面,"Z"型瀏覽適用常規(guī)的頁面,瀏覽模式之間可能存在嵌套,需根據(jù)實際的場景進(jìn)行布局設(shè)計。
- 包含圖片的頁面比單純的文本更能獲得用戶的興趣,同時含信息的圖片比裝飾性圖片更能吸引用戶關(guān)注。當(dāng)然也沒必要為了布局使用無意義的圖片,使用圖片布局都是有目的的,包括輔助說明、品牌宣傳等。
- 若排版是包含信息的圖片,可以采用對齊或"Z"型排版,對用戶的影響差別不大。
- 對于裝飾性的圖像,可以采用對齊的方式排版,用戶可選擇性忽略這些圖片,將更多視線花在文案上,體驗上會友好一點。而"Z"型的排版能一定程度上增加圖像曝光度,用戶很難跳過。
- 通常頁面中的第 1 張圖像所包含的信息很重要,從而讓用戶覺得接下來的圖像是否有價值,是否值得花時間查看圖像??梢詫⑿畔⒘看蟮膬?nèi)容放在第一行的左側(cè),裝飾性的圖片盡量不要頂部或者左側(cè),避免吸引用戶眼球,發(fā)現(xiàn)沒意義后重新定向視線,增加用戶困擾。
- 對于帶有裝飾性圖片的文本對齊,圖片不要超過文本頂部對齊,或者視覺區(qū)域比文本更大,可以將它們與相應(yīng)的文本水平對齊,以避免吸引眼球,導(dǎo)致用戶重新定向。
- 用戶瀏覽完頁面后,大部分用戶會返回再次查看,可以適當(dāng)考慮在底部新增「回到頂部」的功能,方便用戶返回查看。
參考鏈接:
- https://www.nngroup.com/articles/zigzag-page-layout/
- https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/
歡迎關(guān)注團(tuán)隊微信公眾號:兆日 UCD
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)