《搜索結(jié)果頁（SERP）：不要被F型瀏覽忽悠了》文章地址：http://www.tfxk.com/zixun/0416363a2013.htm

　　同樣的餃子餡，不同的包法顯然能夠給用戶不同的感官感觸，包得不好，豈但有礙于觀瞻，也極有可能破掉，損壞了一鍋湯不說，還進了水，導(dǎo)致餃子沒有滋味。

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

　　輿圖、周邊等信息，我認為屬于第三優(yōu)先級，卻出當初這里，導(dǎo)致每個item非常龐雜。

 

　　在以下的圖片無差異化的list上，我甚至有可能直接將F的縱向瀏覽轉(zhuǎn)移到價格或者地域上。

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

　　

　　

　　2. F型瀏覽會受到網(wǎng)站內(nèi)容、用戶需求影響而產(chǎn)生轉(zhuǎn)變嗎?會出現(xiàn)別的形狀嗎?

　　那么，即便已經(jīng)有了優(yōu)先級劃分，list items設(shè)計還要考慮必定的拓展性——可以不展示，在用戶有需求的時候開展。

　　再對比兩個網(wǎng)站的list items：

　　恰好，這幾天我想買個電腦包，去淘寶上搜索電腦包，然后不做任何篩選，直接看搜索到的結(jié)果。我有意識觀測本人的行為(當然，做研究不必采取我的方式)，然后發(fā)現(xiàn)：

　　F型瀏覽背地的問題

　　用戶在瀏覽的時候，大腦里出現(xiàn)了三個詞語：也許是，是，否。

 

　　我認為，F(xiàn)型或者是E型瀏覽方式，相對不是無意識的“身不由己”的行為，而是網(wǎng)站內(nèi)容、設(shè)計，用戶需求和用戶習(xí)慣多重因素作用下的成果。

　　幫Heidi驗證論斷準確與否：提供典范或者反例。

　　很有可能你的三段論會受到產(chǎn)品團隊的贊美，然而他們需要更多的信息表示出來。因此他們并不以為只有前兩個優(yōu)先級的信息能力夠被放到SERP頁面上，其余的只能到詳情頁查看。

　　講演中提出，大多數(shù)情況下瀏覽者都情不自禁的以“F”形狀的模式閱讀網(wǎng)頁，這種基礎(chǔ)恒定的閱讀習(xí)慣決議了網(wǎng)頁呈現(xiàn)F形的關(guān)注熱度。

　　每個任務(wù)的目標同樣也是絕對比較清楚的，那么我們設(shè)計的任務(wù)就是在每個階段讓他能夠更加有效率完成子任務(wù)目的。

　　圖片相對不重要，因此只給出數(shù)目和鏈接。

　　2. 當圖片知足需求后，我會橫向閱讀該包的闡明(標題)。——假如標題中包含了諸如“二手”，“18寸”等字眼，我就會放棄橫向瀏覽，直接用一個斜線過渡到下一個產(chǎn)品圖片。

　　這種galley的設(shè)計，固然能夠凸起圖片的影響，但是實際上倒并不便利用戶做“對比和篩選”，會遺漏一些信息，因此可能會出現(xiàn)上高低下的反復(fù)瀏覽——這也許也是國外主流的電子商務(wù)網(wǎng)站沒有把這種形式作為主要的list設(shè)計的原因，當然，這是我個人的猜想。——如果有機遇，我們會應(yīng)用gallery做一下眼動儀的測試，來驗證這個結(jié)論。

　　例如SERP搜索關(guān)鍵詞的加粗，主要的目的就是讓用戶快速捉住字眼，然后判斷：這是不是我要找的產(chǎn)品。

　　所以，咱們需要壓服各個業(yè)務(wù)方：list頁面設(shè)計的目標不是讓用戶瀏覽，做決議，而是快捷尋找，定位，斷定，而真正的決策是需要用戶到了詳情頁甚至是與供給商接洽過才干做出的。list頁面的設(shè)計目的需要單純，才不至于顧此失彼，疏忽了最重要的目的，沉積了大批的信息，反而下降了用戶的瀏覽、對照、定位的效力。

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

　　Jakob Nielsen破費的苦心用三種不同的網(wǎng)頁進行測試，目的是為了告知我們，F(xiàn)型瀏覽在不同的網(wǎng)站上都是通用的，用戶的F型瀏覽行為并不會受到網(wǎng)站內(nèi)容和設(shè)計出現(xiàn)太大的不同。

　　但是他并未進一步分析出現(xiàn)F型瀏覽的原因，結(jié)果讓很多人誤認為這真的是一種“情不自禁”的行為。

 

　　縱向掃描用以對比：信息為第一維度要關(guān)注的信息，用戶尋找的是最重要而且有差異化的信息，用戶掃描的速度非�？�。用戶對比中會產(chǎn)生“定位”，從而產(chǎn)生水平閱讀。

　　2006年4月，美國長期研究網(wǎng)站可用性的有名網(wǎng)站設(shè)計師杰柯柏·尼爾森(Jakob Nielsen)發(fā)表了一項《眼球軌跡的研究》呈文(原文：F-Shaped Pattern For Reading Web Content)。

　　兩者比擬，我個人認為去哪兒的表現(xiàn)要優(yōu)于口碑網(wǎng)。

　　瀏覽者首先在網(wǎng)頁最上部形成一個水平瀏覽軌跡,成都網(wǎng)頁設(shè)計公司。

　　多少個值得嘗試的舉動：

　　5. 當價格同時滿意冀望時，正常會產(chǎn)生一個到詳情頁面的點擊(兩個黃色區(qū)域)。

　　當我們腦子里已經(jīng)有了這張表，并且和項目組達成共識后——達成共鳴比較不容易，但是我們可以靠用戶調(diào)研、訪談、行業(yè)研究提供足夠的proof來得出一個比較公道的信息優(yōu)先級，那么剩下的任務(wù)就是如何更好表現(xiàn)這些內(nèi)容。

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

　　1. 出現(xiàn)F型瀏覽模式的原因是什么?它的背后是什么樣的用戶需求?

　　圖片十分不重要，但是依然盤踞了黃金地位。

 

　　2. 加粗、顯化能幫助用戶進步效率的癥結(jié)詞或者信息

　　我認為，SERP能夠滿意前兩個級別的需求就可以了，第三步可以放到詳情頁去實現(xiàn)。

　　而且，行業(yè)不同，采購類型也不一樣，關(guān)注的信息維度也不一樣。上周去上海建材展訪談的客戶，都能夠明確幫我們確認一個事實：行業(yè)特征對于SERP設(shè)計的差異化需求凸顯。——這個話題當前再說。

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

　　3. 條目設(shè)計的拓展性

　　也正因為如斯，F(xiàn)型瀏覽也很容易被看出很多漏洞來。比如：

　　因為題目位于圖片上部，用戶在縱向瀏覽時，常常被圖片因素煩擾，不利于疾速閱讀。

　　第一步：水平挪動

　　非典型性F型瀏覽——用戶需求、網(wǎng)站設(shè)計等因素的影響

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

　　給出了無比有贊助做抉擇的促銷信息。

　　2. 幫助用戶更快完成義務(wù)

　　3. F型瀏覽模式能夠給我們什么啟示?如何領(lǐng)導(dǎo)我們進行SERP的設(shè)計?

　　他第一關(guān)心的是戶型和地段。其次是價格。

　　就電子商務(wù)網(wǎng)站而言，我認為可以劃分三個優(yōu)先級。

　　第三步：垂直瀏覽

　　而進一步的研討也發(fā)現(xiàn)，當斟酌到網(wǎng)頁豐盛的內(nèi)容元素，比如圖片時，F(xiàn)型瀏覽很輕易就被攻破。如圖，你能看到一個典范的F嗎?

　　在電子商務(wù)網(wǎng)站上，因為圖片大多數(shù)是第一挑選因素，它有自然的上風(fēng)能夠幫助做取舍，因此我們的瀏覽視線從左上方開始，先縱向再橫向，縱向和橫向的用意是有著奧妙的差異的。這個稍后再說。

　　我認為，F(xiàn)型瀏覽不是絕對的，也不是無意識的，而是受到網(wǎng)站設(shè)計、用戶需求、用戶習(xí)慣多重因素影響。那么，我們的SERP設(shè)計，尤其是List items設(shè)計，要遵守什么準則呢?

　　1. 信息區(qū)塊劃分——遵循用戶習(xí)慣和F型瀏覽，F(xiàn)型瀏覽反映了用戶的瀏覽習(xí)慣，從上至下，從左至右。

　　像價格這樣的字段，一般來說比較重要(第二優(yōu)先級)，那么處置方式有兩種：

　　

　　我，代表著一個普通的來找租房的用戶。一般的找租房的用戶關(guān)懷什么?

　　用戶的需求：這種習(xí)慣是如何養(yǎng)成的?我想是因為互聯(lián)網(wǎng)用戶心中有個需求：尋找某個貨色。這個東西可能是詳細的，比如搜索某個產(chǎn)品。也可能是含混的，比如瀏覽消息網(wǎng)站，我們是想掃描一下看看有沒有“激發(fā)興致”的關(guān)鍵詞。當發(fā)現(xiàn)這些“關(guān)鍵詞”后，我們會閱讀更多的幫助信息以幫助決斷：這畢竟是不是我要找的東西，當發(fā)現(xiàn)是的時候，會產(chǎn)生到詳情頁面的點擊，當然發(fā)現(xiàn)不是的話，就會持續(xù)向下閱讀，繼承又一次輪回,網(wǎng)頁制作報價。

　　另外，降低噪音。上面這張圖，個人認為將那個跳動的旺旺圖標轉(zhuǎn)移到右下角的位置能夠幫助用戶晉升對圖片和標題的瀏覽對比。

　　當詞語是“興許是”的時候，用戶程度瀏覽以獲取更多信息，當答案是否時，用戶廢棄水平瀏覽，下移閱讀下一段或者下一個搜尋條目。當謎底是是時，個別會發(fā)生一個點擊。如圖所示:

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

　　用戶的耐煩是有限度的，所以跟著掃描的進行，頁面長度的拉伸，他們?nèi)粽也坏教�多興趣點,成都網(wǎng)頁設(shè)計，興趣天然會逐步消減，因此就可能造成了所謂的F型或者金三角熱區(qū)。

 

　　我們能做什么?

　　圖1：F型瀏覽

　　……

　　用戶的習(xí)慣：從左向右，從上到下，這也是傳統(tǒng)閱讀習(xí)慣在網(wǎng)絡(luò)上的延長。

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

　　瀏覽者會將眼光向下移，掃描比上一步短的區(qū)域。

　　4. 當價格超越心理預(yù)期時(或過低時)，用戶放棄此列表，視線出現(xiàn)Z型的下移，下移到下一條列表的標題。

　　我想，再這么推下去，仍是防止不了破綻百出，E出來了，F(xiàn)出來了，未來還會有L，I,C，Z……

　　但是，我又發(fā)明，除非我有意識，才可以保障是一個Z型瀏覽，大多數(shù)情形，我在Gallery情勢展現(xiàn)的list上，視線浮現(xiàn)噴射狀的，狼藉的，不法則的，我也許會被其中的某張圖片先吸引到——這張圖片也許是居中的而不是左上角的圖片，而后再由這張圖片開端，向上或者向下瀏覽。

　　

　　一個tips是，當以gallery方式出現(xiàn)產(chǎn)品時，統(tǒng)一行的產(chǎn)品不宜過多。

　　只所以寫這篇文章，我也因為近期在名目里碰到了一個問題：

　　F型瀏覽模式這個實踐已經(jīng)推出良久了，我在很多網(wǎng)站和BLOG上也看到過這樣的分享。我在思考幾個問題：

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

　　橫向閱讀用以判斷：信息為第二維度信息，信息可以沒有差異化，用戶會降低掃描的速度以獲取更多有用的信息，幫助自己做判定，要不要點擊到詳情頁。

 

　　互聯(lián)網(wǎng)用戶的閱讀習(xí)慣：有些像我們閱讀黃頁或者產(chǎn)品目錄的方式：快速掃描的方式，捕獲要害點，讀短句子，疏忽長篇大論——這些是可以有定論的。

　　

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

　　為什么要用戶一個一個點開去判斷這到底是不是他要找的東西呢?那不是無效的點擊嗎?

 

　　上面出現(xiàn)一張摻雜了一張圖片的搜索結(jié)果頁(圖2)，那么我想，當出現(xiàn)多張圖片時，后果又是如何呢?

　　還有更多行為需要你參加：

　　2. 當標題里有讓他say no的字眼時，其他的信息(圖片、價錢、更多先容等)統(tǒng)統(tǒng)都會熟視無睹�？焖倏v向瀏覽到下面的列表。

　　

 

 

　　口碑網(wǎng)——餐館搜索列表頁：

　　再看看網(wǎng)站設(shè)計，是如何影響用戶瀏覽行為的。

　　如果設(shè)計師或者產(chǎn)品經(jīng)理沒有轉(zhuǎn)達出信息優(yōu)先級的概念，那么市場研究職員很可能供給出一個大雜燴，用戶關(guān)心什么信息，產(chǎn)品圖片，描寫，認證，信用，價格，物流，供應(yīng)商資質(zhì)…………我曉得他們當然什么都關(guān)心，但是——在什么階段關(guān)心什么是要辨別的。

　　第二步：獲取更多信息以幫助判斷。

　　

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

　　我們假設(shè)有一個同樣和我在買電腦包的人，假設(shè)他不關(guān)心顏色，不關(guān)心款式，只關(guān)心價格(很多做批發(fā)的也許是這樣的)——那么他一來這個搜索結(jié)果頁，會不會首先從價格所在的列開始縱向瀏覽，消除，選擇，橫向研究并下決策——放棄還是點擊?這是完整有可能的。

　　評論：口碑給出了單個用戶的評論，有失客觀和公平性，會誤導(dǎo)客戶。

　　帶著這些問題，我進行了一些材料的挖掘和嘗試，進而有了更多的疑難，“瀏覽者都情不自禁的以“F”外形的模式閱讀網(wǎng)頁”，這句話，尤其值得質(zhì)疑。因為我發(fā)現(xiàn)，瀏覽者并未是無意識構(gòu)成了某種瀏覽行動，而是受到網(wǎng)站設(shè)計與本身需要的雙重影響而造成的。

　　F型瀏覽給我的啟發(fā)

　　還是早早透過景象去剖析實質(zhì)，讓我們早點接觸F型瀏覽當面的起因更好。

　　

　　單獨成列——用戶很容易縱向?qū)Ρ�，這也是很多網(wǎng)站的做法。

　　用戶的比較需要有差異化的信息,因此當用戶做了一次過濾后,底本差異化的信息變?yōu)橄嗤瑫r,F的縱向條開始轉(zhuǎn)移到另外一組信息處，比如在淘寶上搜索mp3，當我經(jīng)由過濾，篩選出一組均是米奇的MP3時，圖片的差別化就沒有了，我的F縱向直接過渡到標題或者其他信息。

　　

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

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

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

　　想一下：如果標題字數(shù)太多，或者沒有和下面的描述區(qū)離開來，沒有做關(guān)鍵詞的加粗，是不是會導(dǎo)致用戶第一步篩選效率降低?

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

　　鑒于這個頁面的主要性，良多業(yè)務(wù)部門都盼望能夠在list頁面做一些曝光，僅一個產(chǎn)品列表而言，有部門愿望能夠放出公司或者產(chǎn)品的認證信息，有的部分也許感到?jīng)]必要讓用戶點擊到詳情頁，能夠放出更多信息，好比公司的聯(lián)系方法，產(chǎn)品經(jīng)營方，或者生機list能夠包括供應(yīng)商的更多信息，比方范圍，主營產(chǎn)品，裝備跟加工能力，工藝等。

　　但是事實上，用戶的這三步也是一個時光軸，不是在同時存在的需求，而且當我們把所有的信息都同時呈現(xiàn)時，反而會極大降低他完成第一步的效率。

　　1. 信息優(yōu)先級的劃分

 

　　為什么不是E而是F?因為我們看到很多眼動儀測試的圖片F(xiàn)下面并未一只有一個水平瀏覽線，而是多個。

 

　　去哪兒——酒店搜索列表頁：

　　而口碑網(wǎng)的表現(xiàn)：

　　

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

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

 

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

　　1. 超出了圖片先看標題，因為標題一般會包含小區(qū)名稱，戶型等重要因素。

　　

　　因此，我們可以把F型懂得得更加寬泛一些，這樣就不用去糾結(jié)上面一橫長還是下面一橫長或者是兩橫旁邊的間隔，當然也不會糾結(jié)為何F會有多條水平橫線。

　　Heidi想要表白的意思就是：依據(jù)你的網(wǎng)站的用戶需乞降產(chǎn)品特點，你頭腦里需要呈現(xiàn)這樣一個表格——里面的內(nèi)容須要調(diào)劑為最合適的優(yōu)先級。

　　第二步：目光下移，短范疇水平移動

 

　　

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

　　如google的搜索list：

　　研究者用了幾種不同的頁面做眼動儀測試，得到了3張熱度圖，用顏色來表現(xiàn)瀏覽者目光湊集的熱度，分為最熱(紅色)、較熱(黃色)、不熱(藍色)和根本不關(guān)注(灰色)4種。其中圖3搜索結(jié)果頁因SERP中網(wǎng)站標題、網(wǎng)頁摘要較寬，第二條線會隨之加長，但仍舊是F形狀。

　　我們再看看口碑網(wǎng)，同樣設(shè)計的搜索結(jié)果頁的瀏覽視線：

　　對批發(fā)商來講，由于一個產(chǎn)品要采購大量，普通也都是來樣加工訂制，不像是淘寶的現(xiàn)貨洽購，也比擬重視長期的供貨關(guān)聯(lián)，因此對單品細節(jié)的關(guān)注就略微要偏弱一些，更關(guān)心供應(yīng)商自身的信譽、供貨才能、主營產(chǎn)品等。

　　1. 我首先只看圖片——圖片可能輔助我快速決斷，這個包的色彩、格式、作風(fēng)是否是我所要尋找的(因而倏地涌現(xiàn)了一條長長的垂直瀏覽線)。

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

 

　　為什么下面的一個水平瀏覽線要短于上面的一條，而實際上我們看到的許多眼動儀圖片卻是下面的水平瀏覽線要擅長上面的一個?

　　重大申明一點：以上的信息優(yōu)先級要視網(wǎng)站性質(zhì)、受眾需求而有不同，不能適應(yīng)任何類型的SERP。比如，同樣是電子商務(wù)網(wǎng)站，淘寶和alibaba就有很大的不一樣。淘寶面向的個人買家，而alibaba.com面向的是寰球的批發(fā)商、中小型的企業(yè)采購。用戶類型差異比較大，采購類型差異比較大，因此需求就不一樣，關(guān)注的信息維度就不一樣。

　　

　　但是，list一個豆腐塊狀的大小，怎么能夠包含那么多信息呢?

　　價格獨自成列——異常易于二級篩選。

　　瀏覽者完成上兩步后，會將目光沿網(wǎng)頁左側(cè)垂直掃描;這一步的瀏覽速度較慢，也較有體系性、條感性。

　　什么造成了F型瀏覽?

　　但是若做成不單獨的列，就需要側(cè)重加粗，以幫助用戶縱向快速跳躍式的對比。

　　

　　那么，研究人員又來彌補F型瀏覽了，他們說，當有了圖片元素影響后，用戶的瀏覽行為發(fā)生了改變，不再呈現(xiàn)F型瀏覽，而是出現(xiàn)了一個E字：

 

　　

　　

　　去哪兒信息層級非常明白——地段以及酒店品牌第一維度。

 

(責任編輯：網(wǎng)站建設(shè))
搜索結(jié)果頁（SERP）：不要被F型瀏覽忽悠了相關(guān)文章