《
搜索結(jié)果頁(SERP):不要被F型瀏覽忽悠了》文章地址:http://www.tfxk.com/zixun/0416363a2013.htm
同樣的餃子餡,不同的包法顯然能夠給用戶不同的感官感觸,包得不好,豈但有礙于觀瞻,也極有可能破掉,損壞了一鍋湯不說,還進(jìn)了水,導(dǎo)致餃子沒有滋味。
而,在以相冊(cè)方式展示的SERP頁面,用戶的行為又是怎么樣的呢?
輿圖、周邊等信息,我認(rèn)為屬于第三優(yōu)先級(jí),卻出當(dāng)初這里,導(dǎo)致每個(gè)item非常龐雜。
在以下的圖片無差異化的list上,我甚至有可能直接將F的縱向?yàn)g覽轉(zhuǎn)移到價(jià)格或者地域上。
用戶在SERP的任務(wù)又是可以被我們猜測(cè)的——他有三個(gè)步驟需要完成(參見表格)
2. F型瀏覽會(huì)受到網(wǎng)站內(nèi)容、用戶需求影響而產(chǎn)生轉(zhuǎn)變嗎?會(huì)出現(xiàn)別的形狀嗎?
那么,即便已經(jīng)有了優(yōu)先級(jí)劃分,list items設(shè)計(jì)還要考慮必定的拓展性——可以不展示,在用戶有需求的時(shí)候開展。
再對(duì)比兩個(gè)網(wǎng)站的list items:
恰好,這幾天我想買個(gè)電腦包,去淘寶上搜索電腦包,然后不做任何篩選,直接看搜索到的結(jié)果。我有意識(shí)觀測(cè)本人的行為(當(dāng)然,做研究不必采取我的方式),然后發(fā)現(xiàn):
F型瀏覽背地的問題
用戶在瀏覽的時(shí)候,大腦里出現(xiàn)了三個(gè)詞語:也許是,是,否。
我認(rèn)為,F(xiàn)型或者是E型瀏覽方式,相對(duì)不是無意識(shí)的“身不由己”的行為,而是網(wǎng)站內(nèi)容、設(shè)計(jì),用戶需求和用戶習(xí)慣多重因素作用下的成果。
幫Heidi驗(yàn)證論斷準(zhǔn)確與否:提供典范或者反例。
很有可能你的三段論會(huì)受到產(chǎn)品團(tuán)隊(duì)的贊美,然而他們需要更多的信息表示出來。因此他們并不以為只有前兩個(gè)優(yōu)先級(jí)的信息能力夠被放到SERP頁面上,其余的只能到詳情頁查看。
講演中提出,大多數(shù)情況下瀏覽者都情不自禁的以“F”形狀的模式閱讀網(wǎng)頁,這種基礎(chǔ)恒定的閱讀習(xí)慣決議了網(wǎng)頁呈現(xiàn)F形的關(guān)注熱度。
每個(gè)任務(wù)的目標(biāo)同樣也是絕對(duì)比較清楚的,那么我們?cè)O(shè)計(jì)的任務(wù)就是在每個(gè)階段讓他能夠更加有效率完成子任務(wù)目的。
圖片相對(duì)不重要,因此只給出數(shù)目和鏈接。
2. 當(dāng)圖片知足需求后,我會(huì)橫向閱讀該包的闡明(標(biāo)題)。——假如標(biāo)題中包含了諸如“二手”,“18寸”等字眼,我就會(huì)放棄橫向?yàn)g覽,直接用一個(gè)斜線過渡到下一個(gè)產(chǎn)品圖片。
這種galley的設(shè)計(jì),固然能夠凸起圖片的影響,但是實(shí)際上倒并不便利用戶做“對(duì)比和篩選”,會(huì)遺漏一些信息,因此可能會(huì)出現(xiàn)上高低下的反復(fù)瀏覽——這也許也是國(guó)外主流的電子商務(wù)網(wǎng)站沒有把這種形式作為主要的list設(shè)計(jì)的原因,當(dāng)然,這是我個(gè)人的猜想。——如果有機(jī)遇,我們會(huì)應(yīng)用gallery做一下眼動(dòng)儀的測(cè)試,來驗(yàn)證這個(gè)結(jié)論。
例如SERP搜索關(guān)鍵詞的加粗,主要的目的就是讓用戶快速捉住字眼,然后判斷:這是不是我要找的產(chǎn)品。
所以,咱們需要壓服各個(gè)業(yè)務(wù)方:list頁面設(shè)計(jì)的目標(biāo)不是讓用戶瀏覽,做決議,而是快捷尋找,定位,斷定,而真正的決策是需要用戶到了詳情頁甚至是與供給商接洽過才干做出的。list頁面的設(shè)計(jì)目的需要單純,才不至于顧此失彼,疏忽了最重要的目的,沉積了大批的信息,反而下降了用戶的瀏覽、對(duì)照、定位的效力。
在下面的例子中,同樣是圖片,卻僅僅起到一個(gè)輔助的作用,當(dāng)用戶通過標(biāo)題或者價(jià)格控制的信息不足以判斷時(shí),才會(huì)做為參考因素。
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)為這真的是一種“情不自禁”的行為。
縱向掃描用以對(duì)比:信息為第一維度要關(guān)注的信息,用戶尋找的是最重要而且有差異化的信息,用戶掃描的速度非常快。用戶對(duì)比中會(huì)產(chǎn)生“定位”,從而產(chǎn)生水平閱讀。
2006年4月,美國(guó)長(zhǎng)期研究網(wǎng)站可用性的有名網(wǎng)站設(shè)計(jì)師杰柯柏·尼爾森(Jakob Nielsen)發(fā)表了一項(xiàng)《眼球軌跡的研究》呈文(原文:F-Shaped Pattern For Reading Web Content)。
兩者比擬,我個(gè)人認(rèn)為去哪兒的表現(xiàn)要優(yōu)于口碑網(wǎng)。
瀏覽者首先在網(wǎng)頁最上部形成一個(gè)水平瀏覽軌跡,成都網(wǎng)頁設(shè)計(jì)公司。
多少個(gè)值得嘗試的舉動(dòng):
5. 當(dāng)價(jià)格同時(shí)滿意冀望時(shí),正常會(huì)產(chǎn)生一個(gè)到詳情頁面的點(diǎn)擊(兩個(gè)黃色區(qū)域)。
當(dāng)我們腦子里已經(jīng)有了這張表,并且和項(xiàng)目組達(dá)成共識(shí)后——達(dá)成共鳴比較不容易,但是我們可以靠用戶調(diào)研、訪談、行業(yè)研究提供足夠的proof來得出一個(gè)比較公道的信息優(yōu)先級(jí),那么剩下的任務(wù)就是如何更好表現(xiàn)這些內(nèi)容。
既然用戶在SERP頁面的目標(biāo)很清晰——找到它!
1. 出現(xiàn)F型瀏覽模式的原因是什么?它的背后是什么樣的用戶需求?
圖片十分不重要,但是依然盤踞了黃金地位。
2. 加粗、顯化能幫助用戶進(jìn)步效率的癥結(jié)詞或者信息
我認(rèn)為,SERP能夠滿意前兩個(gè)級(jí)別的需求就可以了,第三步可以放到詳情頁去實(shí)現(xiàn)。
而且,行業(yè)不同,采購(gòu)類型也不一樣,關(guān)注的信息維度也不一樣。上周去上海建材展訪談的客戶,都能夠明確幫我們確認(rèn)一個(gè)事實(shí):行業(yè)特征對(duì)于SERP設(shè)計(jì)的差異化需求凸顯。——這個(gè)話題當(dāng)前再說。
圖2:圖片因素對(duì)F型瀏覽的影響
3. 條目設(shè)計(jì)的拓展性
也正因?yàn)槿缢梗現(xiàn)型瀏覽也很容易被看出很多漏洞來。比如:
因?yàn)轭}目位于圖片上部,用戶在縱向?yàn)g覽時(shí),常常被圖片因素?zé)⿺_,不利于疾速閱讀。
第一步:水平挪動(dòng)
非典型性F型瀏覽——用戶需求、網(wǎng)站設(shè)計(jì)等因素的影響
list頁面如何承載多種曝光需求?
給出了無比有贊助做抉擇的促銷信息。
2. 幫助用戶更快完成義務(wù)
3. F型瀏覽模式能夠給我們什么啟示?如何領(lǐng)導(dǎo)我們進(jìn)行SERP的設(shè)計(jì)?
他第一關(guān)心的是戶型和地段。其次是價(jià)格。
就電子商務(wù)網(wǎng)站而言,我認(rèn)為可以劃分三個(gè)優(yōu)先級(jí)。
第三步:垂直瀏覽
而進(jìn)一步的研討也發(fā)現(xiàn),當(dāng)斟酌到網(wǎng)頁豐盛的內(nèi)容元素,比如圖片時(shí),F(xiàn)型瀏覽很輕易就被攻破。如圖,你能看到一個(gè)典范的F嗎?
在電子商務(wù)網(wǎng)站上,因?yàn)閳D片大多數(shù)是第一挑選因素,它有自然的上風(fēng)能夠幫助做取舍,因此我們的瀏覽視線從左上方開始,先縱向再橫向,縱向和橫向的用意是有著奧妙的差異的。這個(gè)稍后再說。
我認(rèn)為,F(xiàn)型瀏覽不是絕對(duì)的,也不是無意識(shí)的,而是受到網(wǎng)站設(shè)計(jì)、用戶需求、用戶習(xí)慣多重因素影響。那么,我們的SERP設(shè)計(jì),尤其是List items設(shè)計(jì),要遵守什么準(zhǔn)則呢?
1. 信息區(qū)塊劃分——遵循用戶習(xí)慣和F型瀏覽,F(xiàn)型瀏覽反映了用戶的瀏覽習(xí)慣,從上至下,從左至右。
像價(jià)格這樣的字段,一般來說比較重要(第二優(yōu)先級(jí)),那么處置方式有兩種:
我,代表著一個(gè)普通的來找租房的用戶。一般的找租房的用戶關(guān)懷什么?
用戶的需求:這種習(xí)慣是如何養(yǎng)成的?我想是因?yàn)榛ヂ?lián)網(wǎng)用戶心中有個(gè)需求:尋找某個(gè)貨色。這個(gè)東西可能是詳細(xì)的,比如搜索某個(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ù)向下閱讀,繼承又一次輪回,網(wǎng)頁制作報(bào)價(jià)。
另外,降低噪音。上面這張圖,個(gè)人認(rèn)為將那個(gè)跳動(dòng)的旺旺圖標(biāo)轉(zhuǎn)移到右下角的位置能夠幫助用戶晉升對(duì)圖片和標(biāo)題的瀏覽對(duì)比。
當(dāng)詞語是“興許是”的時(shí)候,用戶程度瀏覽以獲取更多信息,當(dāng)答案是否時(shí),用戶廢棄水平瀏覽,下移閱讀下一段或者下一個(gè)搜尋條目。當(dāng)謎底是是時(shí),個(gè)別會(huì)發(fā)生一個(gè)點(diǎn)擊。如圖所示:
因此,他的瀏覽視線即有可能是這樣的——
用戶的耐煩是有限度的,所以跟著掃描的進(jìn)行,頁面長(zhǎng)度的拉伸,他們?nèi)粽也坏教嗯d趣點(diǎn),成都網(wǎng)頁設(shè)計(jì),興趣天然會(huì)逐步消減,因此就可能造成了所謂的F型或者金三角熱區(qū)。
我們能做什么?
圖1:F型瀏覽
……
用戶的習(xí)慣:從左向右,從上到下,這也是傳統(tǒng)閱讀習(xí)慣在網(wǎng)絡(luò)上的延長(zhǎng)。
而且,他們的觀點(diǎn)也很有sense:
瀏覽者會(huì)將眼光向下移,掃描比上一步短的區(qū)域。
4. 當(dāng)價(jià)格超越心理預(yù)期時(shí)(或過低時(shí)),用戶放棄此列表,視線出現(xiàn)Z型的下移,下移到下一條列表的標(biāo)題。
我想,再這么推下去,仍是防止不了破綻百出,E出來了,F(xiàn)出來了,未來還會(huì)有L,I,C,Z……
但是,我又發(fā)明,除非我有意識(shí),才可以保障是一個(gè)Z型瀏覽,大多數(shù)情形,我在Gallery情勢(shì)展現(xiàn)的list上,視線浮現(xiàn)噴射狀的,狼藉的,不法則的,我也許會(huì)被其中的某張圖片先吸引到——這張圖片也許是居中的而不是左上角的圖片,而后再由這張圖片開端,向上或者向下瀏覽。
一個(gè)tips是,當(dāng)以gallery方式出現(xiàn)產(chǎn)品時(shí),統(tǒng)一行的產(chǎn)品不宜過多。
只所以寫這篇文章,我也因?yàn)榻谠诿坷锱龅搅艘粋(gè)問題:
F型瀏覽模式這個(gè)實(shí)踐已經(jīng)推出良久了,我在很多網(wǎng)站和BLOG上也看到過這樣的分享。我在思考幾個(gè)問題:
圖3:F型瀏覽是有意識(shí)的行為
橫向閱讀用以判斷:信息為第二維度信息,信息可以沒有差異化,用戶會(huì)降低掃描的速度以獲取更多有用的信息,幫助自己做判定,要不要點(diǎn)擊到詳情頁。
互聯(lián)網(wǎng)用戶的閱讀習(xí)慣:有些像我們閱讀黃頁或者產(chǎn)品目錄的方式:快速掃描的方式,捕獲要害點(diǎn),讀短句子,疏忽長(zhǎng)篇大論——這些是可以有定論的。
提出更多質(zhì)疑,Heidi個(gè)人所得必定有一定的局限性。
為什么要用戶一個(gè)一個(gè)點(diǎn)開去判斷這到底是不是他要找的東西呢?那不是無效的點(diǎn)擊嗎?
上面出現(xiàn)一張摻雜了一張圖片的搜索結(jié)果頁(圖2),那么我想,當(dāng)出現(xiàn)多張圖片時(shí),后果又是如何呢?
還有更多行為需要你參加:
2. 當(dāng)標(biāo)題里有讓他say no的字眼時(shí),其他的信息(圖片、價(jià)錢、更多先容等)統(tǒng)統(tǒng)都會(huì)熟視無睹?焖倏v向?yàn)g覽到下面的列表。
口碑網(wǎng)——餐館搜索列表頁:
再看看網(wǎng)站設(shè)計(jì),是如何影響用戶瀏覽行為的。
如果設(shè)計(jì)師或者產(chǎn)品經(jīng)理沒有轉(zhuǎn)達(dá)出信息優(yōu)先級(jí)的概念,那么市場(chǎng)研究職員很可能供給出一個(gè)大雜燴,用戶關(guān)心什么信息,產(chǎn)品圖片,描寫,認(rèn)證,信用,價(jià)格,物流,供應(yīng)商資質(zhì)…………我曉得他們當(dāng)然什么都關(guān)心,但是——在什么階段關(guān)心什么是要辨別的。
第二步:獲取更多信息以幫助判斷。
研究人員這樣詮釋F型瀏覽:
我們假設(shè)有一個(gè)同樣和我在買電腦包的人,假設(shè)他不關(guān)心顏色,不關(guān)心款式,只關(guān)心價(jià)格(很多做批發(fā)的也許是這樣的)——那么他一來這個(gè)搜索結(jié)果頁,會(huì)不會(huì)首先從價(jià)格所在的列開始縱向?yàn)g覽,消除,選擇,橫向研究并下決策——放棄還是點(diǎn)擊?這是完整有可能的。
評(píng)論:口碑給出了單個(gè)用戶的評(píng)論,有失客觀和公平性,會(huì)誤導(dǎo)客戶。
帶著這些問題,我進(jìn)行了一些材料的挖掘和嘗試,進(jìn)而有了更多的疑難,“瀏覽者都情不自禁的以“F”外形的模式閱讀網(wǎng)頁”,這句話,尤其值得質(zhì)疑。因?yàn)槲野l(fā)現(xiàn),瀏覽者并未是無意識(shí)構(gòu)成了某種瀏覽行動(dòng),而是受到網(wǎng)站設(shè)計(jì)與本身需要的雙重影響而造成的。
F型瀏覽給我的啟發(fā)
還是早早透過景象去剖析實(shí)質(zhì),讓我們?cè)琰c(diǎn)接觸F型瀏覽當(dāng)面的起因更好。
單獨(dú)成列——用戶很容易縱向?qū)Ρ,這也是很多網(wǎng)站的做法。
用戶的比較需要有差異化的信息,因此當(dāng)用戶做了一次過濾后,底本差異化的信息變?yōu)橄嗤瑫r(shí),F的縱向條開始轉(zhuǎn)移到另外一組信息處,比如在淘寶上搜索mp3,當(dāng)我經(jīng)由過濾,篩選出一組均是米奇的MP3時(shí),圖片的差別化就沒有了,我的F縱向直接過渡到標(biāo)題或者其他信息。
當(dāng)然你可以說:那我們干嘛要分成三步呢?既然要簡(jiǎn)化工作量,羅唆讓他一步完成不更好嗎?
比如,在淘寶商城,切換成gallery形式。我的需求是尋找一個(gè)雙肩的電腦包,圖片仍舊是第一維度要關(guān)注的,因此我的視線很有可能呈現(xiàn)Z狀,當(dāng)我發(fā)現(xiàn)了有適合的款式和顏色的包包后,我才會(huì)掃描第二維度的信息:價(jià)格或者標(biāo)題等。
第三步:研究并決策——下一步動(dòng)作或者放棄。
想一下:如果標(biāo)題字?jǐn)?shù)太多,或者沒有和下面的描述區(qū)離開來,沒有做關(guān)鍵詞的加粗,是不是會(huì)導(dǎo)致用戶第一步篩選效率降低?
第一步:對(duì)比和快速篩選。
鑒于這個(gè)頁面的主要性,良多業(yè)務(wù)部門都盼望能夠在list頁面做一些曝光,僅一個(gè)產(chǎn)品列表而言,有部門愿望能夠放出公司或者產(chǎn)品的認(rèn)證信息,有的部分也許感到?jīng)]必要讓用戶點(diǎn)擊到詳情頁,能夠放出更多信息,好比公司的聯(lián)系方法,產(chǎn)品經(jīng)營(yíng)方,或者生機(jī)list能夠包括供應(yīng)商的更多信息,比方范圍,主營(yíng)產(chǎn)品,裝備跟加工能力,工藝等。
但是事實(shí)上,用戶的這三步也是一個(gè)時(shí)光軸,不是在同時(shí)存在的需求,而且當(dāng)我們把所有的信息都同時(shí)呈現(xiàn)時(shí),反而會(huì)極大降低他完成第一步的效率。
1. 信息優(yōu)先級(jí)的劃分
為什么不是E而是F?因?yàn)槲覀兛吹胶芏嘌蹌?dòng)儀測(cè)試的圖片F(xiàn)下面并未一只有一個(gè)水平瀏覽線,而是多個(gè)。
去哪兒——酒店搜索列表頁:
而口碑網(wǎng)的表現(xiàn):
3. 當(dāng)快速掃描標(biāo)題未出現(xiàn)讓我say no的字眼時(shí),我將視線落到了價(jià)格上。請(qǐng)看倒數(shù)第二個(gè)紅色的包包,圖片通過,標(biāo)題通過,然而價(jià)格超出估算,于是我放棄用斜線過渡到下面的產(chǎn)品。
3. 當(dāng)標(biāo)題里有字眼滿足需求后,用戶會(huì)橫向掃到價(jià)格字眼,做第二次判斷。
單獨(dú)成列的時(shí)候,我們可以錯(cuò)誤價(jià)格進(jìn)行太多視覺上的強(qiáng)化。
1. 超出了圖片先看標(biāo)題,因?yàn)闃?biāo)題一般會(huì)包含小區(qū)名稱,戶型等重要因素。
因此,我們可以把F型懂得得更加寬泛一些,這樣就不用去糾結(jié)上面一橫長(zhǎng)還是下面一橫長(zhǎng)或者是兩橫旁邊的間隔,當(dāng)然也不會(huì)糾結(jié)為何F會(huì)有多條水平橫線。
Heidi想要表白的意思就是:依據(jù)你的網(wǎng)站的用戶需乞降產(chǎn)品特點(diǎn),你頭腦里需要呈現(xiàn)這樣一個(gè)表格——里面的內(nèi)容須要調(diào)劑為最合適的優(yōu)先級(jí)。
第二步:目光下移,短范疇水平移動(dòng)
——不然,就會(huì)是這樣的:
如google的搜索list:
研究者用了幾種不同的頁面做眼動(dòng)儀測(cè)試,得到了3張熱度圖,用顏色來表現(xiàn)瀏覽者目光湊集的熱度,分為最熱(紅色)、較熱(黃色)、不熱(藍(lán)色)和根本不關(guān)注(灰色)4種。其中圖3搜索結(jié)果頁因SERP中網(wǎng)站標(biāo)題、網(wǎng)頁摘要較寬,第二條線會(huì)隨之加長(zhǎng),但仍舊是F形狀。
我們?cè)倏纯纯诒W(wǎng),同樣設(shè)計(jì)的搜索結(jié)果頁的瀏覽視線:
對(duì)批發(fā)商來講,由于一個(gè)產(chǎn)品要采購(gòu)大量,普通也都是來樣加工訂制,不像是淘寶的現(xiàn)貨洽購(gòu),也比擬重視長(zhǎng)期的供貨關(guān)聯(lián),因此對(duì)單品細(xì)節(jié)的關(guān)注就略微要偏弱一些,更關(guān)心供應(yīng)商自身的信譽(yù)、供貨才能、主營(yíng)產(chǎn)品等。
1. 我首先只看圖片——圖片可能輔助我快速?zèng)Q斷,這個(gè)包的色彩、格式、作風(fēng)是否是我所要尋找的(因而倏地涌現(xiàn)了一條長(zhǎng)長(zhǎng)的垂直瀏覽線)。
這是我心中的F型瀏覽模型:
為什么下面的一個(gè)水平瀏覽線要短于上面的一條,而實(shí)際上我們看到的許多眼動(dòng)儀圖片卻是下面的水平瀏覽線要擅長(zhǎng)上面的一個(gè)?
重大申明一點(diǎn):以上的信息優(yōu)先級(jí)要視網(wǎng)站性質(zhì)、受眾需求而有不同,不能適應(yīng)任何類型的SERP。比如,同樣是電子商務(wù)網(wǎng)站,淘寶和alibaba就有很大的不一樣。淘寶面向的個(gè)人買家,而alibaba.com面向的是寰球的批發(fā)商、中小型的企業(yè)采購(gòu)。用戶類型差異比較大,采購(gòu)類型差異比較大,因此需求就不一樣,關(guān)注的信息維度就不一樣。
但是,list一個(gè)豆腐塊狀的大小,怎么能夠包含那么多信息呢?
價(jià)格獨(dú)自成列——異常易于二級(jí)篩選。
瀏覽者完成上兩步后,會(huì)將目光沿網(wǎng)頁左側(cè)垂直掃描;這一步的瀏覽速度較慢,也較有體系性、條感性。
什么造成了F型瀏覽?
但是若做成不單獨(dú)的列,就需要側(cè)重加粗,以幫助用戶縱向快速跳躍式的對(duì)比。
那么,研究人員又來彌補(bǔ)F型瀏覽了,他們說,當(dāng)有了圖片元素影響后,用戶的瀏覽行為發(fā)生了改變,不再呈現(xiàn)F型瀏覽,而是出現(xiàn)了一個(gè)E字:
去哪兒信息層級(jí)非常明白——地段以及酒店品牌第一維度。
(責(zé)任編輯:網(wǎng)站建設(shè))
搜索結(jié)果頁(SERP):不要被F型瀏覽忽悠了相關(guān)文章