搜尋結果頁（SERP）：不要被F型流覽忽悠了

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

2006年4月，美國長期研究網站可用性的著名網站設計師傑柯柏·尼爾森(Jakob Nielsen)發表了一項《眼球軌跡的研究》報告(原文：F-Shaped Pattern For Reading Web Content)。

報告中提出，大多數情況下流覽者都不由自主的以「F」形狀的模式閱讀網頁，這種基本恒定的閱讀習慣決定了網頁呈現F形的關注熱度。

研究者用了幾種不同的頁面做眼動儀測試，得到了3張熱度圖，用顏色來表示流覽者眼光聚集的熱度，分為最熱(紅色)、較熱(黃色)、不熱(藍色)和基本不關注(灰色)4種。 其中圖3搜尋結果頁因SERP中網站標題、網頁摘要較寬，第二條線會隨之加長，但仍然是F形狀。

　　

圖1：F型流覽

研究人員這樣詮釋F型流覽：

第一步：水準移動

流覽者首先在網頁最上部形成一個水準流覽軌跡。

第二步：目光下移，短範圍水準移動

流覽者會將目光向下移，掃描比上一步短的區域。

第三步：垂直流覽

流覽者完成上兩步後，會將目光沿網頁左側垂直掃描;這一步的流覽速度較慢，也較有系統性、條理性。

F型流覽背後的問題

F型瀏覽模式這個理論已經推出很久了，我在很多網站和BLOG上也看到過這樣的分享。 我在思考幾個問題：

1. 出現F型瀏覽模式的原因是什麼?它的背後是什麼樣的使用者需求?

2. F型流覽會受到網站內容、使用者需求影響而發生改變嗎?會出現別的形狀嗎?

3. F型瀏覽模式能夠給我們什麼啟示?如何指導我們進行SERP的設計?

帶著這些問題，我進行了一些資料的發掘和嘗試，進而有了更多的疑問，「流覽者都不由自主的以「F」形狀的模式閱讀網頁」，這句話，尤其值得質疑。 因為我發現，流覽者並未是無意識形成了某種流覽行為，而是受到網站設計與自身需求的雙重影響而造成的。

什麼造成了F型流覽?

Jakob Nielsen花費的苦心用三種不同的網頁進行測試，目的是為了告訴我們，F型流覽在不同的網站上都是通用的，使用者的F型流覽行為並不會受到網站內容和設計出現太大的不同。

但是他並未進一步分析出現F型流覽的原因，結果讓很多人誤認為這真的是一種「不由自主」的行為。

也正因為如此，F型流覽也很容易被看出很多漏洞來。 比如：

為什麼不是E而是F?因為我們看到很多眼動儀測試的圖片F下面並未一隻有一個水準流覽線，而是多個。

為什麼下面的一個水準流覽線要短于上面的一條，而實際上我們看到的很多眼動儀圖片卻是下面的水準流覽線要長於上面的一個?

而進一步的研究也發現，當考慮到網頁豐富的內容元素，比如圖片時，F型流覽很容易就被打破。 如圖，你能看到一個典型的F嗎?

　　

圖2：圖片因素對F型流覽的影響

那麼，研究人員又來補充F型流覽了，他們說，當有了圖片元素影響後，使用者的流覽行為發生了改變，不再呈現F型流覽，而是出現了一個E字：

　　

我想，再這麼推下去，還是避免不了漏洞百出，E出來了，F出來了，將來還會有L，I,C，Z......

還是早早透過現象去分析本質，讓我們早點接觸F型流覽背後的原因更好。

我認為，F型或者是E型流覽方式，絕對不是無意識的「不由自主」的行為，而是網站內容、設計，使用者需求和使用者習慣多重因素作用下的結果。

使用者的習慣：從左向右，從上到下，這也是傳統閱讀習慣在網路上的延伸。

互聯網使用者的閱讀習慣：有些像我們閱讀黃頁或者產品目錄的方式：快速掃描的方式，捕捉關鍵點，讀短句子，忽視長篇大論——這些是可以有定論的。

使用者的需求：這種習慣是如何養成的?我想是因為互聯網使用者心中有個需求：尋找某個東西。 這個東西可能是具體的，比如搜索某個產品。 也可能是模糊的，比如流覽新聞網站，我們是想掃描一下看看有沒有「激發興趣」的關鍵字。 當發現這些「關鍵字」後，我們會閱讀更多的輔助資訊以説明決斷：這究竟是不是我要找的東西，當發現是的時候，會產生到詳情頁面的點擊，當然發現不是的話，就會繼續向下閱讀，繼續又一次迴圈。

使用者的耐心是有限度的，所以隨著掃描的進行，頁面長度的拉伸，他們若找不到太多興趣點，興趣自然會逐漸消減，因此就可能形成了所謂的F型或者金三角熱區。

使用者在流覽的時候，大腦裡出現了三個詞語：也許是，是，否。

當詞語是「也許是」的時候，使用者水準流覽以獲取更多資訊，當答案是否時，使用者放棄水準流覽，下移閱讀下一段或者下一個搜索條目。 當答案是是時，一般會產生一個點擊。 如圖所示:

　　

圖3：F型流覽是有意識的行為

這是我心中的F型流覽模型：

縱向掃描用以對比：資訊為第一維度要關注的資訊，使用者尋找的是最重要而且有差異化的資訊，使用者掃描的速度非常快。 使用者對比中會產生「定位」，從而產生水準閱讀。

橫向閱讀用以判斷：資訊為第二維度資訊，資訊可以沒有差異化，使用者會降低掃描的速度以獲取更多有用的資訊，説明自己做判斷，要不要點擊到詳情頁。

使用者的對比需要有差異化的資訊,因此當使用者做了一次過濾後,原本差異化的資訊變為雷同時,F的縱向條開始轉移到另外一組資訊處，比如在淘寶上搜索mp3，當我經過過濾，篩選出一組均是米奇的MP3時，圖片的差異化就沒有了， 我的F縱向直接過渡到標題或者其他資訊。

在以下的圖片無差異化的list上，我甚至有可能直接將F的縱向流覽轉移到價格或者地區上。

　　

因此，我們可以把F型理解得更加寬泛一些，這樣就不用去糾結上面一橫長還是下面一橫長或者是兩橫中間的距離，當然也不會糾結為何F會有多條水準橫線。

非典型性F型流覽——使用者需求、網站設計等因素的影響

上面出現一張摻雜了一張圖片的搜尋結果頁(圖2)，那麼我想，當出現多張圖片時，效果又是如何呢?

剛好，這幾天我想買個電腦包，去淘寶上搜索電腦包，然後不做任何篩選，直接看搜索到的結果。 我有意識觀測自己的行為(當然，做研究不用採用我的方式)，然後發現：

1. 我首先只看圖片——圖片能夠説明我快速決斷，這個包的顏色、款式、風格是否是我所要尋找的(因此快速出現了一條長長的垂直流覽線)。

2. 當圖片滿足需求後，我會橫向閱讀該包的說明(標題)。 ——如果標題中包含了諸如「二手」，「18寸」等字眼，我就會放棄橫向流覽，直接用一個斜線過渡到下一個產品圖片。

3. 當快速掃描標題未出現讓我say no的字眼時，我將視線落到了價格上。 請看倒數第二個紅色的包包，圖片通過，標題通過，然而價格超出預算，於是我放棄用斜線過渡到下面的產品。

　　

我們假設有一個同樣和我在買電腦包的人，假設他不關心顏色，不關心款式，只關心價格(很多做批發的也許是這樣的)——那麼他一來這個搜尋結果頁，會不會首先從價格所在的列開始縱向流覽，排除，選擇，橫向研究並下決策——放棄還是點擊? 這是完全有可能的。

在電子商務網站上，因為圖片大多數是第一選擇要素，它有天然的優勢能夠説明做選擇，因此我們的流覽視線從左上方開始，先縱向再橫向，縱向和橫向的意圖是有著微妙的差異的。 這個稍後再說。

我們再看看口碑網，同樣設計的搜尋結果頁的流覽視線：

我，代表著一個普通的來找租房的使用者。 普通的找租房的使用者關心什麼?

他第一關心的是戶型和地段。 其次是價格。

因此，他的流覽視線即有可能是這樣的——

1. 越過了圖片先看標題，因為標題一般會包含社區名稱，戶型等重要因素。

2. 當標題裡有讓他say no的字眼時，其他的資訊(圖片、價格、更多介紹等)統統都會視而不見。 快速縱向流覽到下面的清單。

3. 當標題裡有字眼滿足需求後，使用者會橫向掃到價格字眼，做第二次判斷。

4. 當價格超出心理預期時(或過低時)，使用者放棄此清單，視線出現Z型的下移，下移到下一條清單的標題。

5. 當價格同時滿足期望時，一般會產生一個到詳情頁面的點擊(兩個黃色區域)。

在下面的例子中，同樣是圖片，卻僅僅起到一個輔助的作用，當使用者通過標題或者價格掌握的資訊不足以判斷時，才會做為參考因素。

　　

再看看網站設計，是如何影響使用者流覽行為的。

而，在以相冊方式展示的SERP頁面，使用者的行為又是怎麼樣的呢?

比如，在淘寶商城，切換成gallery形式。 我的需求是尋找一個雙肩的電腦包，圖片仍然是第一維度要關注的，因此我的視線很有可能呈現Z狀，當我發現了有合適的款式和顏色的包包後，我才會掃描第二維度的資訊：價格或者標題等。

但是，我又發現，除非我有意識，才能夠保證是一個Z型流覽，大多數情況，我在Gallery形式展示的list上，視線呈現放射狀的，散亂的，沒有規律的，我也許會被其中的某張圖片先吸引到——這張圖片也許是居中的而不是左上角的圖片 ，然後再由這張圖片開始，向上或者向下流覽。

這種galley的設計，雖然能夠突出圖片的影響，但是實際上倒並不方便使用者做「對比和篩選」，會漏掉一些資訊，因此可能會出現上上下下的重複流覽——這也許也是國外主流的電子商務網站沒有把這種形式作為主要的list設計的原因， 當然，這是我個人的猜測。 ——如果有機會，我們會利用gallery做一下眼動儀的測試，來驗證這個結論。

一個tips是，當以gallery方式呈現產品時，同一行的產品不宜過多。

　　

F型流覽給我的啟示

我認為，F型流覽不是絕對的，也不是無意識的，而是受到網站設計、使用者需求、使用者習慣多重因素影響。 那麼，我們的SERP設計，尤其是List items設計，要遵循什麼原則呢?

只所以寫這篇文章，我也由於近期在專案裡遇到了一個問題：

list頁面如何承載多種曝光需求?

鑒於這個頁面的重要性，很多營業單位都希望能夠在list頁面做一些曝光，僅一個產品清單而言，有部門希望能夠放出公司或者產品的認證資訊，有的部門或許覺得沒必要讓使用者點擊到詳情頁，可以放出更多資訊，比如公司的連絡方式， 產品運營方，或許希望list能夠包含供應商的更多資訊，比如規模，主營產品，設備和加工能力，工藝等。

但是，list一個豆腐塊狀的大小，怎麼能夠包含那麼多資訊呢?

所以，我們需要說服各個業務方：list頁面設計的目的不是讓使用者閱讀，做決策，而是快速尋找，定位，判斷，而真正的決策是需要使用者到了詳情頁甚至是與供應商聯繫過才能做出的。 list頁面的設計目的需要單純，才不至於顧此失彼，忽略了最主要的目的，堆積了大量的資訊，反而降低了使用者的流覽、對比、定位的效率。

我們能做什麼?

1. 資訊優先順序的劃分

就電子商務網站而言，我認為可以劃分三個優先順序。

第一步：對比和快速篩選。

第二步：獲取更多資訊以説明判斷。

第三步：研究並決策——下一步動作或者放棄。

　　

嚴重聲明一點：以上的資訊優先順序要視網站性質、受眾需求而有不同，不能適應任何類型的SERP。 比如，同樣是電子商務網站，淘寶和alibaba就有很大的不一樣。 淘寶面向的個人買家，而alibaba.com面向的是全球的批發商、中小型的企業採購。 使用者類型差異比較大，採購類型差異比較大，因此需求就不一樣，關注的資訊維度就不一樣。

對於批發商來講，因為一個產品要採購大量，一般也都是來樣加工訂制，不像是淘寶的現貨採購，也比較注重長期的供貨關係，因此對單品細節的關注就稍微要偏弱一些，更關心供應商本身的信用、供貨能力、主營產品等。

而且，行業不同，採購類型也不一樣，關注的資訊維度也不一樣。 上周去上海建材展訪談的客戶，都能夠明確幫我們確認一個事實：行業特徵對於SERP設計的差異化需求凸顯。 ——這個話題以後再說。

Heidi想要表達的意思就是：根據你的網站的使用者需求和產品特徵，你腦子裡需要出現這樣一個表格——裡面的內容需要調整為最適合的優先順序。

如果設計師或者產品經理沒有傳達出資訊優先順序的概念，那麼市場研究人員很可能提供出一個大雜燴，使用者關心什麼資訊，產品圖片，描述，認證，信用，價格，物流，供應商資質............ 我知道他們當然什麼都關心，但是——在什麼階段關心什麼是要區分的。

2. 説明使用者更快完成任務

當我們腦子裡已經有了這張表，並且和專案組達成共識後——達成共識比較不容易，但是我們可以靠使用者調研、訪談、行業研究提供足夠的proof來得出一個比較合理的資訊優先順序，那麼剩下的任務就是如何更好表現這些內容。

同樣的餃子餡，不同的包法顯然能夠給使用者不同的感官感受，包得不好，不但有礙于觀瞻，也極有可能破掉，破壞了一鍋湯不說，還進了水，導致餃子沒有味道。

既然使用者在SERP頁面的目標很清晰——找到它!

使用者在SERP的任務又是可以被我們預測的——他有三個步驟需要完成(參見表格)

每個任務的目標同樣也是相對比較清晰的，那麼我們設計的任務就是在每個階段讓他能夠更加有效率完成子任務目標。

當然你可以說：那我們幹嘛要分成三步呢?既然要簡化工作量，乾脆讓他一步完成不更好嗎?

但是事實上，使用者的這三步也是一個時間軸，不是在同時存在的需求，而且當我們把所有的資訊都同時呈現時，反而會極大降低他完成第一步的效率。

我認為，SERP能夠滿足前兩個級別的需求就可以了，第三步可以放到詳情頁去完成。

如google的搜索list：

　　

想一下：如果標題字數太多，或者沒有和下面的描述區分開來，沒有做關鍵字的加粗，是不是會導致使用者第一步篩選效率降低?

再對比兩個網站的list items：

去哪兒——酒店搜索清單頁：

　　

口碑網——餐館搜索清單頁：

　　

兩者相比，我個人認為去哪兒的表現要優於口碑網。

去哪兒資訊層級非常明確——地段以及酒店品牌第一維度。

價格單獨成列——非常易於二級篩選。

圖片相對不重要，因此只給出數量和連結。

給出了非常有説明做選擇的促銷資訊。

而口碑網的表現：

圖片非常不重要，但是仍然佔據了黃金位置。

由於標題位於圖片上部，使用者在縱向流覽時，經常被圖片因素干擾，不利於快速流覽。

地圖、周邊等資訊，我認為屬於第三優先順序，卻出現在這裡，導致每個item非常複雜。

評論：口碑給出了單個使用者的評論，有失客觀和公正性，會誤導客戶。

......

幾個值得嘗試的行動：

1. 資訊區塊劃分——遵循使用者習慣和F型流覽，F型流覽反應了使用者的流覽習慣，從上至下，從左至右。

　　

2. 加粗、顯化能説明使用者提高效率的關鍵字或者資訊

例如SERP搜索關鍵字的加粗，主要的目的就是讓使用者快速抓住字眼，然後判斷：這是不是我要找的產品。

另外，降低噪音。 上面這張圖，個人認為將那個跳動的旺旺圖示轉移到右下角的位置能夠説明使用者提升對圖片和標題的流覽對比。

像價格這樣的欄位，一般來說比較重要(第二優先順序)，那麼處理方式有兩種：

單獨成列——使用者很容易縱向對比，這也是很多網站的做法。

　　

單獨成列的時候，我們可以不對價格進行太多視覺上的強化。

但是若做成不單獨的列，就需要著重加粗，以説明使用者縱向快速跳躍式的對比。

——不然，就會是這樣的：

　　

3. 條目設計的拓展性

很有可能你的三段論會受到產品團隊的讚賞，但是他們需要更多的資訊表現出來。 因此他們並不認為只有前兩個優先順序的資訊才能夠被放到SERP頁面上，其他的只能到詳情頁查看。

而且，他們的觀點也很有sense：

為什麼要使用者一個一個點開去判斷這到底是不是他要找的東西呢?那不是不正確點擊嗎?

那麼，即使已經有了優先順序劃分，list items設計還要考慮一定的拓展性——可以不展示，在使用者有需求的時候展開。

　　

還有更多行動需要你參與：

提出更多質疑，Heidi個人所得必然有一定的局限性。

幫Heidi驗證結論正確與否：提供範例或者反例。