- 我們的專業(yè)品牌服務(wù)商：網(wǎng)站建設(shè)、品牌策劃設(shè)計(jì)、網(wǎng)站優(yōu)化、網(wǎng)站推廣等業(yè)務(wù)
首頁-新聞中心-
搜索結(jié)果頁（SERP）之：不要被F型瀏覽忽悠了
什么是F型瀏覽？
2006年4月，美國長期研究網(wǎng)站可用性的著名網(wǎng)站設(shè)計(jì)師杰柯柏·尼爾森（Jakob Nielsen）發(fā)表了一項(xiàng)《眼球軌跡的研究》報(bào)告（原文：F-Shaped Pattern For Reading Web Content）。報(bào)告中提出，大多數(shù)情況下瀏覽者都不由自主的以“Ｆ”形狀的模式閱讀網(wǎng)頁，這種基本恒定的閱讀習(xí)慣決定了網(wǎng)頁呈現(xiàn)F形的關(guān)注熱度。
研究者用了幾種不同的頁面做眼動(dòng)儀測(cè)試，得到了3張熱度圖，用顏色來表示瀏覽者眼光聚集的熱度，分為最熱（紅色）、較熱（黃色）、不熱（藍(lán)色）和基本不關(guān)注（灰色）4種。其中圖3搜索結(jié)果頁因SERP中網(wǎng)站標(biāo)題、網(wǎng)頁摘要較寬，第二條線會(huì)隨之加長，但仍然是F形狀。
研究人員這樣詮釋F型瀏覽：
第一步：水平移動(dòng)
瀏覽者首先在網(wǎng)頁最上部形成一個(gè)水平瀏覽軌跡。
第二步：目光下移，短范圍水平移動(dòng)
瀏覽者會(huì)將目光向下移，掃描比上一步短的區(qū)域。
第三步：垂直瀏覽
瀏覽者完成上兩步后，會(huì)將目光沿網(wǎng)頁左側(cè)垂直掃描；這一步的瀏覽速度較慢，也較有系統(tǒng)性、條理性。
F型瀏覽背后的問題
F型瀏覽模式這個(gè)理論已經(jīng)推出很久了，我在很多網(wǎng)站和BLOG上也看到過這樣的分享。我在思考幾個(gè)問題：
1. 出現(xiàn)F型瀏覽模式的原因是什么？它的背后是什么樣的用戶需求？
2. F型瀏覽會(huì)受到網(wǎng)站內(nèi)容、用戶需求影響而發(fā)生改變嗎？會(huì)出現(xiàn)別的形狀嗎？
3. F型瀏覽模式能夠給我們什么啟示？如何指導(dǎo)我們進(jìn)行SERP的設(shè)計(jì)？
帶著這些問題，我進(jìn)行了一些資料的發(fā)掘和嘗試，進(jìn)而有了更多的疑問，“瀏覽者都不由自主的以“Ｆ”形狀的模式閱讀網(wǎng)頁”，這句話，尤其值得質(zhì)疑。因?yàn)槲野l(fā)現(xiàn)，瀏覽者并未是無意識(shí)形成了某種瀏覽行為，而是受到網(wǎng)站設(shè)計(jì)與自身需求的雙重影響而造成的。
什么造成了F型瀏覽？
Jakob Nielsen花費(fèi)的苦心用三種不同的網(wǎng)頁進(jìn)行測(cè)試，目的是為了告訴我們，F(xiàn)型瀏覽在不同的網(wǎng)站上都是通用的，用戶的F型瀏覽行為并不會(huì)受到網(wǎng)站內(nèi)容和設(shè)計(jì)出現(xiàn)太大的不同。
但是他并未進(jìn)一步分析出現(xiàn)F型瀏覽的原因，結(jié)果讓很多人誤認(rèn)為這真的是一種“不由自主”的行為。
也正因?yàn)槿绱耍現(xiàn)型瀏覽也很容易被看出很多漏洞來。比如：
為什么不是E而是F？因?yàn)槲覀兛吹胶芏嘌蹌?dòng)儀測(cè)試的圖片F(xiàn)下面并未一只有一個(gè)水平瀏覽線，而是多個(gè)。
為什么下面的一個(gè)水平瀏覽線要短于上面的一條，而實(shí)際上我們看到的很多眼動(dòng)儀圖片卻是下面的水平瀏覽線要長于上面的一個(gè)？
而進(jìn)一步的研究也發(fā)現(xiàn)，當(dāng)考慮到網(wǎng)頁豐富的內(nèi)容元素，比如圖片時(shí)，F(xiàn)型瀏覽很容易就被打破。如圖，你能看到一個(gè)典型的F嗎？
用戶體驗(yàn)
那么，研究人員又來補(bǔ)充F型瀏覽了，他們說，當(dāng)有了圖片元素影響后，用戶的瀏覽行為發(fā)生了改變，不再呈現(xiàn)F型瀏覽，而是出現(xiàn)了一個(gè)E字：
我想，再這么推下去，還是避免不了漏洞百出，E出來了，F(xiàn)出來了，將來還會(huì)有L，I,C，Z……
還是早早透過現(xiàn)象去分析本質(zhì)，讓我們?cè)琰c(diǎn)接觸F型瀏覽背后的原因更好。
我認(rèn)為，F(xiàn)型或者是E型瀏覽方式，絕對(duì)不是無意識(shí)的“不由自主”的行為，而是網(wǎng)站內(nèi)容、設(shè)計(jì)，用戶需求和用戶習(xí)慣多重因素作用下的結(jié)果。
用戶的習(xí)慣：從左向右，從上到下，這也是傳統(tǒng)閱讀習(xí)慣在網(wǎng)絡(luò)上的延伸。
互聯(lián)網(wǎng)用戶的閱讀習(xí)慣：有些像我們閱讀黃頁或者產(chǎn)品目錄的方式：快速掃描的方式，捕捉關(guān)鍵點(diǎn)，讀短句子，忽視長篇大論——這些是可以有定論的。
用 戶的需求：這種習(xí)慣是如何養(yǎng)成的？我想是因?yàn)榛ヂ?lián)網(wǎng)用戶心中有個(gè)需求：尋找某個(gè)東西。這個(gè)東西可能是具體的，比如搜索某個(gè)產(chǎn)品。也可能是模糊的，比如瀏覽 新聞網(wǎng)站，我們是想掃描一下看看有沒有“激發(fā)興趣”的關(guān)鍵詞。當(dāng)發(fā)現(xiàn)這些“關(guān)鍵詞”后，我們會(huì)閱讀更多的輔助信息以幫助決斷：這究竟是不是我要找的東西， 當(dāng)發(fā)現(xiàn)是的時(shí)候，會(huì)產(chǎn)生到詳情頁面的點(diǎn)擊，當(dāng)然發(fā)現(xiàn)不是的話，就會(huì)繼續(xù)向下閱讀，繼續(xù)又一次循環(huán)。
用戶的耐心是有限度的，所以隨著掃描的進(jìn)行，頁面長度的拉伸，他們?nèi)粽也坏教嗯d趣點(diǎn)，興趣自然會(huì)逐漸消減，因此就可能形成了所謂的F型或者金三角熱區(qū)。用戶在瀏覽的時(shí)候，大腦里出現(xiàn)了三個(gè)詞語：也許是，是，否。
當(dāng)詞語是“也許是”的時(shí)候，用戶水平瀏覽以獲取更多信息，當(dāng)答案是否時(shí)，用戶放棄水平瀏覽，下移閱讀下一段或者下一個(gè)搜索條目。當(dāng)答案是是時(shí)，一般會(huì)產(chǎn)生一個(gè)點(diǎn)擊。如圖所示:
這是我心中的F型瀏覽模型：
縱向掃描用以對(duì)比：信息為第一維度要關(guān)注的信息，用戶尋找的是最重要而且有差異化的信息，用戶掃描的速度非常快。用戶對(duì)比中會(huì)產(chǎn)生“定位”，從而產(chǎn)生水平閱讀。
橫向閱讀用以判斷：信息為第二維度信息，信息可以沒有差異化，用戶會(huì)降低掃描的速度以獲取更多有用的信息，幫助自己做判斷，要不要點(diǎn)擊到詳情頁。
用 戶的對(duì)比需要有差異化的信息,因此當(dāng)用戶做了一次過濾后,原本差異化的信息變?yōu)槔淄瑫r(shí),F的縱向條開始轉(zhuǎn)移到另外一組信息處，比如在淘寶上搜索mp3，當(dāng) 我經(jīng)過過濾，篩選出一組均是米奇的MP3時(shí)，圖片的差異化就沒有了，我的F縱向直接過渡到標(biāo)題或者其他信息。在以下的圖片無差異化的list上，我甚至有 可能直接將F的縱向?yàn)g覽轉(zhuǎn)移到價(jià)格或者地區(qū)上。
因此，我們可以把F型理解得更加寬泛一些，這樣就不用去糾結(jié)上面一橫長還是下面一橫長或者是兩橫中間的距離，當(dāng)然也不會(huì)糾結(jié)為何F會(huì)有多條水平橫線。
非典型性F型瀏覽——用戶需求、網(wǎng)站設(shè)計(jì)等因素的影響
上面出現(xiàn)一張摻雜了一張圖片的搜索結(jié)果頁（圖2），那么我想，當(dāng)出現(xiàn)多張圖片時(shí)，效果又是如何呢？
剛好，這幾天我想買個(gè)電腦包，去淘寶上搜索電腦包，然后不做任何篩選，直接看搜索到的結(jié)果。我有意識(shí)觀測(cè)自己的行為（當(dāng)然，做研究不用采用我的方式），然后發(fā)現(xiàn)：
1. 我首先只看圖片——圖片能夠幫助我快速?zèng)Q斷，這個(gè)包的顏色、款式、風(fēng)格是否是我所要尋找的（因此快速出現(xiàn)了一條長長的垂直瀏覽線）。
2. 當(dāng)圖片滿足需求后，我會(huì)橫向閱讀該包的說明（標(biāo)題）。——如果標(biāo)題中包含了諸如“二手”，“18寸”等字眼，我就會(huì)放棄橫向?yàn)g覽，直接用一個(gè)斜線過渡到下一個(gè)產(chǎn)品圖片。
3. 當(dāng)快速掃描標(biāo)題未出現(xiàn)讓我say no的字眼時(shí)，我將視線落到了價(jià)格上。請(qǐng)看倒數(shù)第二個(gè)紅色的包包，圖片通過，標(biāo)題通過，然而價(jià)格超出預(yù)算，于是我放棄用斜線過渡到下面的產(chǎn)品。
我們假設(shè)有一個(gè)同樣和我在買電腦包的人，假設(shè)他不關(guān)心顏色，不關(guān)心款式，只關(guān)心價(jià)格（很多做批發(fā)的也許是這樣的）——那么他一來這個(gè)搜索結(jié)果頁，會(huì)不會(huì)首先從價(jià)格所在的列開始縱向?yàn)g覽，排除，選擇，橫向研究并下決策——放棄還是點(diǎn)擊？這是完全有可能的。
在電子商務(wù)網(wǎng)站上，因?yàn)閳D片大多數(shù)是第一選擇要素，它有天然的優(yōu)勢(shì)能夠幫助做選擇，因此我們的瀏覽視線從左上方開始，先縱向再橫向，縱向和橫向的意圖是有著微妙的差異的。這個(gè)稍后再說。
我們?cè)倏纯纯诒W(wǎng)，同樣設(shè)計(jì)的搜索結(jié)果頁的瀏覽視線：
我，代表著一個(gè)普通的來找租房的用戶。普通的找租房的用戶關(guān)心什么？
他第一關(guān)心的是戶型和地段。其次是價(jià)格。
因此，他的瀏覽視線即有可能是這樣的——
1. 越過了圖片先看標(biāo)題，因?yàn)闃?biāo)題一般會(huì)包含小區(qū)名稱，戶型等重要因素。
2. 當(dāng)標(biāo)題里有讓他say no的字眼時(shí)，其他的信息（圖片、價(jià)格、更多介紹等）統(tǒng)統(tǒng)都會(huì)視而不見。快速縱向?yàn)g覽到下面的列表。
3. 當(dāng)標(biāo)題里有字眼滿足需求后，用戶會(huì)橫向掃到價(jià)格字眼，做第二次判斷。
4. 當(dāng)價(jià)格超出心理預(yù)期時(shí)（或過低時(shí)），用戶放棄此列表，視線出現(xiàn)Z型的下移，下移到下一條列表的標(biāo)題。
5. 當(dāng)價(jià)格同時(shí)滿足期望時(shí)，一般會(huì)產(chǎn)生一個(gè)到詳情頁面的點(diǎn)擊（兩個(gè)黃色區(qū)域）。在下面的例子中，同樣是圖片，卻僅僅起到一個(gè)輔助的作用，當(dāng)用戶通過標(biāo)題或者價(jià)格掌握的信息不足以判斷時(shí)，才會(huì)做為參考因素。
再看看網(wǎng)站設(shè)計(jì)，是如何影響用戶瀏覽行為的。
而，在以相冊(cè)方式展示的SERP頁面，用戶的行為又是怎么樣的呢？
比如，在淘寶商城，切換成gallery形式。我的需求是尋找一個(gè)雙肩的電腦包，圖片仍然是第一維度要關(guān)注的，因此我的視線很有可能呈現(xiàn)Z狀，當(dāng)我發(fā)現(xiàn)了有合適的款式和顏色的包包后，我才會(huì)掃描第二維度的信息：價(jià)格或者標(biāo)題等。
但 是，我又發(fā)現(xiàn)，除非我有意識(shí)，才能夠保證是一個(gè)Z型瀏覽，大多數(shù)情況，我在Gallery形式展示的list上，視線呈現(xiàn)放射狀的，散亂的，沒有規(guī)律的， 我也許會(huì)被其中的某張圖片先吸引到——這張圖片也許是居中的而不是左上角的圖片，然后再由這張圖片開始，向上或者向下瀏覽。
這種galley的設(shè) 計(jì)，雖然能夠突出圖片的影響，但是實(shí)際上倒并不方便用戶做“對(duì)比和篩選”，會(huì)漏掉一些信息，因此可能會(huì)出現(xiàn)上上下下的重復(fù)瀏覽——這也許也是國外主流的電 子商務(wù)網(wǎng)站沒有把這種形式作為主要的list設(shè)計(jì)的原因，當(dāng)然，這是我個(gè)人的猜測(cè)。——如果有機(jī)會(huì)，我們會(huì)利用gallery做一下眼動(dòng)儀的測(cè)試，來驗(yàn)證 這個(gè)結(jié)論。
一個(gè)tips是，當(dāng)以gallery方式呈現(xiàn)產(chǎn)品時(shí)，同一行的產(chǎn)品不宜過多。
F型瀏覽給我的啟示
我認(rèn)為，F(xiàn)型瀏覽不是絕對(duì)的，也不是無意識(shí)的，而是受到網(wǎng)站設(shè)計(jì)、用戶需求、用戶習(xí)慣多重因素影響。那么，我們的SERP設(shè)計(jì)，尤其是List items設(shè)計(jì)，要遵循什么原則呢？
只所以寫這篇文章，我也由于近期在項(xiàng)目里遇到了一個(gè)問題：
list頁面如何承載多種曝光需求？
鑒 于這個(gè)頁面的重要性，很多業(yè)務(wù)部門都希望能夠在list頁面做一些曝光，僅一個(gè)產(chǎn)品列表而言，有部門希望能夠放出公司或者產(chǎn)品的認(rèn)證信息，有的部門或許覺 得沒必要讓用戶點(diǎn)擊到詳情頁，可以放出更多信息，比如公司的聯(lián)系方式，產(chǎn)品運(yùn)營方，或許希望list能夠包含供應(yīng)商的更多信息，比如規(guī)模，主營產(chǎn)品，設(shè)備 和加工能力，工藝等。
但是，list一個(gè)豆腐塊狀的大小，怎么能夠包含那么多信息呢？
所以，我們需要說服各個(gè)業(yè)務(wù)方：list頁面設(shè)計(jì)的 目的不是讓用戶閱讀，做決策，而是快速尋找，定位，判斷，而真正的決策是需要用戶到了詳情頁甚至是與供應(yīng)商聯(lián)系過才能做出的。list頁面的設(shè)計(jì)目的需要 單純，才不至于顧此失彼，忽略了最主要的目的，堆積了大量的信息，反而降低了用戶的瀏覽、對(duì)比、定位的效率。
我們能做什么？
1. 信息優(yōu)先級(jí)的劃分
就電子商務(wù)網(wǎng)站而言，我認(rèn)為可以劃分三個(gè)優(yōu)先級(jí)。
第一步：對(duì)比和快速篩選。
第二步：獲取更多信息以幫助判斷。
第三步：研究并決策——下一步動(dòng)作或者放棄。
嚴(yán)重聲明一點(diǎn)：以 上的信息優(yōu)先級(jí)要視網(wǎng)站性質(zhì)、受眾需求而有不同，不能適應(yīng)任何類型的SERP。比如，同樣是電子商務(wù)網(wǎng)站，淘寶和alibaba就有很大的不一樣。淘寶面 向的個(gè)人買家，而alibaba.com面向的是全球的批發(fā)商、中小型的企業(yè)采購。用戶類型差異比較大，采購類型差異比較大，因此需求就不一樣，關(guān)注的信 息維度就不一樣。
對(duì)于批發(fā)商來講，因?yàn)橐粋€(gè)產(chǎn)品要采購大量，一般也都是來樣加工訂制，不像是淘寶的現(xiàn)貨采購，也比較注重長期的供貨關(guān)系，因此對(duì)單品細(xì)節(jié)的關(guān)注就稍微要偏弱一些，更關(guān)心供應(yīng)商本身的信用、供貨能力、主營產(chǎn)品等。
而且，行業(yè)不同，采購類型也不一樣，關(guān)注的信息維度也不一樣。上周去上海建材展訪談的客戶，都能夠明確幫我們確認(rèn)一個(gè)事實(shí)：行業(yè)特征對(duì)于SERP設(shè)計(jì)的差異化需求凸顯。——這個(gè)話題以后再說。
Heidi想要表達(dá)的意思就是：根據(jù)你的網(wǎng)站的用戶需求和產(chǎn)品特征，你腦子里需要出現(xiàn)這樣一個(gè)表格——里面的內(nèi)容需要調(diào)整為最適合的優(yōu)先級(jí)。
如果設(shè)計(jì)師或者產(chǎn)品經(jīng)理沒有傳達(dá)出信息優(yōu)先級(jí)的概念，那么市場研究人員很可能提供出一個(gè)大雜燴，用戶關(guān)心什么信息，產(chǎn)品圖片，描述，認(rèn)證，信用，價(jià)格，物流，供應(yīng)商資質(zhì)…………我知道他們當(dāng)然什么都關(guān)心，但是——在什么階段關(guān)心什么是要區(qū)分的。
2.幫助用戶更快完成任務(wù)
當(dāng)我們腦子里已經(jīng)有了這張表，并且和項(xiàng)目組達(dá)成共識(shí)后——達(dá)成共識(shí)比較不容易，但是我們可以靠用戶調(diào)研、訪談、行業(yè)研究提供足夠的proof來得出一個(gè)比較合理的信息優(yōu)先級(jí)，那么剩下的任務(wù)就是如何更好表現(xiàn)這些內(nèi)容。
同樣的餃子餡，不同的包法顯然能夠給用戶不同的感官感受，包得不好，不但有礙于觀瞻，也極有可能破掉，破壞了一鍋湯不說，還進(jìn)了水，導(dǎo)致餃子沒有味道。
既然用戶在SERP頁面的目標(biāo)很清晰——找到它！
用戶在SERP的任務(wù)又是可以被我們預(yù)測(cè)的——他有三個(gè)步驟需要完成（參見表格）
每個(gè)任務(wù)的目標(biāo)同樣也是相對(duì)比較清晰的，那么我們?cè)O(shè)計(jì)的任務(wù)就是在每個(gè)階段讓他能夠更加有效率完成子任務(wù)目標(biāo)。
當(dāng)然你可以說：那我們干嘛要分成三步呢？既然要簡化工作量，干脆讓他一步完成不更好嗎?
但是事實(shí)上，用戶的這三步也是一個(gè)時(shí)間軸，不是在同時(shí)存在的需求，而且當(dāng)我們把所有的信息都同時(shí)呈現(xiàn)時(shí)，反而會(huì)極大降低他完成第一步的效率。
我認(rèn)為，SERP能夠滿足前兩個(gè)級(jí)別的需求就可以了，第三步可以放到詳情頁去完成。
如google的搜索list：
想一下：如果標(biāo)題字?jǐn)?shù)太多，或者沒有和下面的描述區(qū)分開來，沒有做關(guān)鍵詞的加粗，是不是會(huì)導(dǎo)致用戶第一步篩選效率降低？
再對(duì)比兩個(gè)網(wǎng)站的list items：
去哪兒——酒店搜索列表頁：
口碑網(wǎng)——餐館搜索列表頁：
兩者相比，我個(gè)人認(rèn)為去哪兒的表現(xiàn)要優(yōu)于口碑網(wǎng)。
去哪兒信息層級(jí)非常明確——地段以及酒店品牌第一維度。
價(jià)格單獨(dú)成列——非常易于二級(jí)篩選。
圖片相對(duì)不重要，因此只給出數(shù)量和鏈接。
給出了非常有幫助做選擇的促銷信息。而口碑網(wǎng)的表現(xiàn)：
圖片非常不重要，但是仍然占據(jù)了黃金位置。
由于標(biāo)題位于圖片上部，用戶在縱向?yàn)g覽時(shí)，經(jīng)常被圖片因素干擾，不利于快速瀏覽。
地圖、周邊等信息，我認(rèn)為屬于第三優(yōu)先級(jí)，卻出現(xiàn)在這里，導(dǎo)致每個(gè)item非常復(fù)雜。
評(píng)論：口碑給出了單個(gè)用戶的評(píng)論，有失客觀和公正性，會(huì)誤導(dǎo)客戶。
……
幾個(gè)值得嘗試的行動(dòng)：
1. 信息區(qū)塊劃分——遵循用戶習(xí)慣和F型瀏覽，F(xiàn)型瀏覽反應(yīng)了用戶的瀏覽習(xí)慣，從上至下，從左至右。
2. 加粗、顯化能幫助用戶提高效率的關(guān)鍵詞或者信息
例如SERP搜索關(guān)鍵詞的加粗，主要的目的就是讓用戶快速抓住字眼，然后判斷：這是不是我要找的產(chǎn)品。
另外，降低噪音。上面這張圖，個(gè)人認(rèn)為將那個(gè)跳動(dòng)的旺旺圖標(biāo)轉(zhuǎn)移到右下角的位置能夠幫助用戶提升對(duì)圖片和標(biāo)題的瀏覽對(duì)比。
像價(jià)格這樣的字段，一般來說比較重要（第二優(yōu)先級(jí)），那么處理方式有兩種：
單獨(dú)成列——用戶很容易縱向?qū)Ρ龋@也是很多網(wǎng)站的做法。
單獨(dú)成列的時(shí)候，我們可以不對(duì)價(jià)格進(jìn)行太多視覺上的強(qiáng)化。
但是若做成不單獨(dú)的列，就需要著重加粗，以幫助用戶縱向快速跳躍式的對(duì)比。
——不然，就會(huì)是這樣的：
3. 條目設(shè)計(jì)的拓展性
很有可能你的三段論會(huì)受到產(chǎn)品團(tuán)隊(duì)的贊賞，但是他們需要更多的信息表現(xiàn)出來。因此他們并不認(rèn)為只有前兩個(gè)優(yōu)先級(jí)的信息才能夠被放到SERP頁面上，其他的只能到詳情頁查看。
而且，他們的觀點(diǎn)也很有sense：
為什么要用戶一個(gè)一個(gè)點(diǎn)開去判斷這到底是不是他要找的東西呢？那不是無效的點(diǎn)擊嗎？
那么，即使已經(jīng)有了優(yōu)先級(jí)劃分，list items設(shè)計(jì)還要考慮一定的拓展性——可以不展示，在用戶有需求的時(shí)候展開。
還有更多行動(dòng)需要你參與：
提出更多質(zhì)疑，Heidi個(gè)人所得必然有一定的局限性。
幫Heidi驗(yàn)證結(jié)論正確與否：提供范例或者反例。最后致歉：這篇文章歷經(jīng)了一個(gè)星期才斷斷續(xù)續(xù)寫完，由于時(shí)間點(diǎn)非常多，不可避免有一些內(nèi)容的重復(fù)性，寫得又臭又長，如果讀完發(fā)現(xiàn)沒有收獲，我說一聲抱歉，哈哈。
