網(wǎng)站(網(wǎng)頁)用戶體驗(yàn)及用戶習(xí)慣的深度分析總結(jié)

1、網(wǎng)站（網(wǎng)頁）用戶體驗(yàn)及用戶習(xí)慣的深度分析總結(jié) 用戶體驗(yàn)（User Experience，簡稱UE是用戶在使用產(chǎn)品過程中建立起來的一種純主觀感 受。在基于 Web的產(chǎn)品設(shè)計(jì)中，UE是一個(gè)相對(duì)較新的概念。Donald Norman博士提出了 “用戶體驗(yàn)” 一詞, 他是一個(gè)認(rèn)知科學(xué)的研究人員，首次提岀了在互聯(lián)網(wǎng)領(lǐng)域以用戶為中心設(shè)計(jì)的重要性（用戶的需求決定產(chǎn) 品如何設(shè)計(jì)）。 Donald Norman 用戶體驗(yàn)很重要，最大的理由是：它對(duì)你的用戶很重要。 最起碼是要讓產(chǎn)品有用，這個(gè)有用是指用戶的需求。（尊重用戶價(jià)值+滿足用戶需求） 其次是能用，所有的流程都走得通，沒有致命的BUG （尊重用戶價(jià)值+滿足用

2、戶需求） 然后是易用，操作起來很便利，這非常關(guān)鍵。（注重用戶體驗(yàn)） 設(shè)計(jì)的下一個(gè)方向就是友好，關(guān)注用戶的情感需求。（注重用戶體驗(yàn)+關(guān)注創(chuàng)新） 以上四者都做好了，就融會(huì)貫通上升到品牌。（品質(zhì)：品味+質(zhì)量T品牌） 用戶的需求決定產(chǎn)品如何設(shè)計(jì) 人的視覺通常不是先看中間，而是根據(jù)母語的讀寫習(xí)慣，經(jīng)過大腦的指令，按照：從上到下, 從左到右的路線進(jìn)行查看，下圖為用戶瀏覽網(wǎng)站時(shí)視線注意力“F現(xiàn)象”研究：注：綠色、黃色、紅色關(guān) 注度以此升高，這說明人喜歡第一眼看左上角的內(nèi)容，這告訴我們，重點(diǎn)要在左邊偏上的部位岀現(xiàn) 。 Priority 2 Pnorrty 3 最新可編輯word文檔 從左上角的至右下角優(yōu)先比重

3、逐級(jí)遞減 M-4ii t ftA isr 二”爐卄 JiKPSQr* 相1； Qlft * F imqk 3M 5歸寶阿 IHiiulH 辭忑 i: ffcxMM= 廿 Mnft t=J Rl* EH1S囲需 m IE曲佃 兇B站Z* rsHji L Ln# E s Aft-3 曰牌鼻化制iB Y1JW SFWh： 3.Ti3TFi SI VMIU * 案例淘寶網(wǎng)商品搜索列表頁 谷歌的搜索結(jié)果岀現(xiàn)“金三角”現(xiàn)象: 谷歌搜索列表頁 對(duì)于google搜索結(jié)果的“金三角”現(xiàn)象（也有很多前端設(shè)計(jì)師形象地描述為搜索結(jié)果的“F 現(xiàn)象”） 什么是 google 搜索結(jié)果的“金三角”現(xiàn)象？ 這項(xiàng)關(guān)于用戶對(duì)于搜

4、索結(jié)果注意力的研究由搜索引擎營銷公司 Enquiro 、Did-it 以及專門研 究人們眼睛運(yùn)動(dòng)行為的公司 Eyetools 聯(lián)合完成，通過對(duì)用戶觀察 google 搜索結(jié)果頁面時(shí)眼睛的運(yùn)動(dòng)來確 定對(duì)搜索結(jié)果內(nèi)容的關(guān)注程度。 該調(diào)查結(jié)論是，位于google自然搜索結(jié)果“ F頂部的信息，獲得了被調(diào)查者100 %的注意 （該研究總共有 50 位被調(diào)查者），而位于最下面的信息則只獲得了 20的注意力。以下是自然搜索結(jié)果 排名前 10位的信息受到被調(diào)查者關(guān)注的比例： 第 1 位-100% 第 2 位-100% 第 3 位-100% 第4位-85% 第5位-60% 第6位-50% 第7位-50% 第8位

5、-30% 第9位-30% 第 10 位-20% 對(duì)于 google 搜索結(jié)果右側(cè)的贊助商鏈接內(nèi)容（即關(guān)鍵詞廣告），其受關(guān)注程度大約只有自 然搜索結(jié)果的一半，即使位于第一位也只獲得了50%的注意力。下面是被調(diào)查者對(duì)全部8個(gè)關(guān)鍵詞廣告信 息的關(guān)注情況。 關(guān)鍵詞廣告第 1位- 50% 關(guān)鍵詞廣告第 2位- 40% 關(guān)鍵詞廣告第 3位- 30% 關(guān)鍵詞廣告第 4位- 20% 關(guān)鍵詞廣告第 5位- 10% -關(guān)鍵詞廣告第6位-10% 關(guān)鍵詞廣告第7位-10% 關(guān)鍵詞廣告第8位-10% 關(guān)于 google 搜索結(jié)果金三角調(diào)查結(jié)論的分析 Search Engine Watch 文章“ A NewF-Word

6、 for Google Search Results ”對(duì)上述調(diào)查結(jié)果的分析推論可總結(jié)為三點(diǎn)： （1 ）自然搜索結(jié)果的重要性遠(yuǎn)高于關(guān)鍵詞廣告（至少對(duì)google 是這樣，為了使客戶的利益最大化，谷歌 隨后在搜索列表頁的最上面及最下面加入了 3 條付費(fèi)廣告）； （2）用戶對(duì)自然搜索結(jié)果的關(guān)注程度更高，除非搜索引擎關(guān)鍵詞廣告排名在最上端，否則很難獲得用戶的 關(guān)注； （3）搜索引擎優(yōu)化很重要，營銷人員如果忽視這一事實(shí)，單純依靠贊助商鏈接廣告的搜索引擎營銷方式很 難取得最好的效果。 調(diào)查結(jié)果發(fā)現(xiàn)，用戶對(duì)于搜索結(jié)果頁面的關(guān)注的范圍呈現(xiàn)英文字母“F的形狀，也可以描 述為“金三角”現(xiàn)象。這種現(xiàn)象證實(shí)了一個(gè)簡

7、單的問題：搜索結(jié)果 中排名靠前的內(nèi)容更容易受到用戶的關(guān) 注和點(diǎn)擊。這個(gè)規(guī)律對(duì)于 google 搜索結(jié)果右側(cè)的關(guān)鍵詞廣告同樣是適用的，只是對(duì)兩種內(nèi)容的點(diǎn)擊率有所 不同。 這正好和謀思副總裁張少華先生提到的“ 首屏理論 ”一致。 網(wǎng)頁板塊規(guī)劃兩欄設(shè)計(jì)研究 最新可編輯 word 文檔 兩欄設(shè)計(jì)頁面 對(duì)于兩欄設(shè)計(jì)，Jakbo Nielsen也曾對(duì)232位用戶瀏覽幾千個(gè)頁面的過程中的眼動(dòng)情況進(jìn)行 追蹤，發(fā)現(xiàn)用戶在不同站點(diǎn)上的瀏覽行為有明顯的一致性。這種瀏覽行為有三個(gè)特征： 1. 用戶首先會(huì)在內(nèi)容區(qū)的上部進(jìn)行橫向?yàn)g覽。 2. 用戶視線下移一段距離后在小范圍內(nèi)再次橫向?yàn)g覽。 3. 最后用戶會(huì)在內(nèi)容區(qū)的左側(cè)做

8、快速的縱向?yàn)g覽。 顯然，用戶的瀏覽行為并非精確的包含這個(gè)三個(gè)過程，有時(shí)候，在這三個(gè)過程之后，還會(huì)在 底部有橫向?yàn)g覽的熱點(diǎn)，使得整個(gè)瀏覽熱區(qū)圖看上去更像E而不是F。也有時(shí)候，用戶瀏覽時(shí)只反應(yīng)了上 述的行為1和行為3,使得瀏覽熱區(qū)圖像一個(gè)倒寫的L。但從所有數(shù)據(jù)整體上來看，用戶的屏幕瀏覽熱區(qū)圖 還是較一致地反應(yīng)出了 F圖像。 網(wǎng)頁板塊規(guī)劃一一三欄設(shè)計(jì)研究 經(jīng)過分析上面的純理論性研究，我們再來看一個(gè)有趣的用戶研究：中、美、韓用戶瀏覽網(wǎng)頁 習(xí)慣。 與網(wǎng)頁感知（webpage 中韓兩國研究者進(jìn)行了一個(gè)關(guān)于認(rèn)知風(fēng)格（cognitive style） 最新可編輯word文檔 perception）的跨文化研究

9、，找來中美韓三國用戶（共 27人）進(jìn)行了眼動(dòng)測試，研究結(jié)果頗有意思。實(shí)驗(yàn) 是讓用戶瀏覽（不做任何點(diǎn)擊）以下這個(gè)仿照雅虎布局的測試頁面（根據(jù)用戶的國籍使用相應(yīng)語言版本的 頁面），眼動(dòng)儀將做實(shí)時(shí)記錄，測試過程為30秒。 ”左2!“舸営礙輸署壬-卑*孑 ir或色沖托，扌：hje ti 尸is湘 開力電站 K 電子尊務(wù) UR蛾不， HiMS： VW. itmsv r/du, 可廠皆*齊訂畑界仲 了占覇懇.卅丄嶺咒x主氏了 詒空? 世武驀Mt昨幣并蚪魚醴庫軽建雖* PT1 nu?；K. -; r?ii:-TS5?9L!?：-rs 狀蛙沖貳貴人址再-們雪Th Tft噴幅11心 Mf Hill工幽 T. i

10、*l.yiWf -5A 皿 賓白.玄親-需* * + t：r XU Total 申時(shí)u? g-書*庚療才丈 AY *!?-, 軒悅?cè)煽膳浒倜ザ敵咝?ABW 盲次S卒亡5基乞雄 扭乂15電罩人? - ttSU- Hrty止齋曲寸 臺(tái)龍畫不押中m如 ）;耳疋注丹擊馬 日主*有電泊爼淀瓷正奩対珀亍中舊 圖1 ：測試頁面 研究者將頁面分為 9個(gè)興趣區(qū)域（AOI, AREA OF INTERESTS 1 (O) H4M啊頃 3 cisrOat 如 muaic r 卜和 一 J J L ff Tvch rinnit JiTrFS Ei1te 0m TJMrf KHpp 祈 g 袖 Raac Mifpig

11、flr 期 iwvb ill* C :-I ” h” ffCffTTFUI Cft jvnwift- Tiflft聲 Search 他 ifs rwe T悶廠曲即P.削. Mpumor? uJl p *W *電|0“ “Qf!希 Eifler ij- p rr. i,it1*! JWfemt(Mt* IM 刖44 W PR4Jm 噸 ClWM inrjwWl-j?I tMirVtt1* _ B * ircnv T*r Ort； IM imimiM! mfllc mikj 和5貞嚐 弭沖 Tht rmrufrdi S*Mce* TtoTA f母；1*1曲陽*刑 Th軸 幗壞盹wiiuh 否Is

12、f:-the r r:叭 r J 丁心 f H咐 咯ptiiJ hF就奇 F* LH；j|M Vw- t DW4t 亡 jri 日 J h- J tJ ill J ! - -Mgr arthBL4Ag BlA4 * Sum w 砂 start How to tbre tor t ldri -B Tarr-ir hH J： IhC M，門LV The ifA milUon Art hnist Two 吊iPm曲r5ngi nm曲 供鼻n 4QQ irt. ?円i*岬：禮尊ac PtfMMt chHfivmSt teffi Ni ftnutti： ” Pft貯 w oftr rm切eF delic

13、ti *T Tin* Oufrh :CMmirf 辛怕 i with q；u4vn 崔里Rrd M0 T0RA2R vl )-4和“呵wh*4i 曹*HI彌If 丁杠阿 r旳 円科郵 w y 2010新款衛(wèi)衣全新上線！ 5 圓形在廣告位中的設(shè)計(jì) 圓形對(duì)價(jià)格的標(biāo)注，讓用戶對(duì)這誘惑的價(jià)格更加的感興趣，很好的營造了商品的氣氛。 圓形元素和其它幾何圖形比較 圓形具有圓滑的特點(diǎn)，讓人感覺輕松，愉悅，合理的運(yùn)用會(huì)提高頁面的層次，讓焦點(diǎn)更加突 岀，增強(qiáng)視覺感的同時(shí)也能夠營造活躍的氛圍。我們都在不斷嘗試如何讓頁面變的美觀而生動(dòng)，創(chuàng)造富有 活力的頁面，讓網(wǎng)站給人的視覺感受富有好感，把握好設(shè)計(jì)中的焦點(diǎn)，使頁面信息

14、有效傳達(dá)的前提下，運(yùn) 用有趣的圓形來設(shè)計(jì) 頁面是設(shè)計(jì)中很有效的方法。 產(chǎn)品經(jīng)理和交互設(shè)計(jì)師在頁面設(shè)計(jì)中的應(yīng)用 羅里羅嗦談了這么多 ，那么我們產(chǎn)品經(jīng)理及交互設(shè)計(jì)師在原型圖中如何來設(shè)計(jì)更好滿足用戶 體驗(yàn)?zāi)兀?在做新產(chǎn)品原型時(shí)，需要考慮設(shè)計(jì)風(fēng)格問題：符合目標(biāo)客戶的審美習(xí)慣，并具有一定的引導(dǎo) 性。 網(wǎng)站在設(shè)計(jì)之前，必須明確目標(biāo)客戶群體，并針對(duì)目標(biāo)客戶的審美喜好，進(jìn)行分析，從而確 定網(wǎng)站的總體設(shè)計(jì)風(fēng)格。 在頁面布局方面要重點(diǎn)突出，主次分明，圖文并茂。與你負(fù)責(zé)產(chǎn)品線目標(biāo)相結(jié)合，將目標(biāo)客 戶最感興趣的，最重要的信息放置在焦點(diǎn)位置。你在和你的下一工序( 有的公司是美工、有的公司是用戶 體驗(yàn)師、有的是交互設(shè)計(jì)師

15、 ) 時(shí)，需要將你的執(zhí)導(dǎo)思想告訴給他們，不然他們不了解的話，會(huì)讓你的產(chǎn)品偏 差非常大，以至在 產(chǎn)品開發(fā)之處你對(duì)產(chǎn)品的把握就已經(jīng)失去了方向。 1. 對(duì)比圖像，文字更具吸引力 在瀏覽一個(gè)網(wǎng)站的時(shí)候，能夠直接吸引用戶目光的并不是圖像。調(diào)查發(fā)現(xiàn)：大多數(shù)通過偶然 點(diǎn)擊進(jìn)入網(wǎng)站的用戶，他們是來尋覓的是信息而不是圖像。因此，保證網(wǎng)站設(shè)計(jì)凸現(xiàn)出最重要的信息板塊， 這才是設(shè)計(jì)的首要原則。 2. 根據(jù)視覺鎖定，一欄格式比多欄格式擁有更好的表現(xiàn)力 大多數(shù)情況下，簡潔更具力量。多欄內(nèi)容容易被用戶忽視，我們需要消除這些干擾，在砍掉板塊影響不大 的情況下，盡量去掉這些冗余信息。例如資訊搜索列表頁。 3. 簡短的段落相對(duì)于

16、長段落來說有更好的表現(xiàn)力 網(wǎng)頁信息是為大多數(shù)強(qiáng)調(diào)快速瀏覽的互聯(lián)網(wǎng)用戶提供的。除非上下文的銜接要求，保持信息 由簡短的段落和句式組成。例如網(wǎng)站的產(chǎn)品介紹。 4. 人們大都只瀏覽網(wǎng)頁的小部分內(nèi)容 如果在用戶瀏覽的時(shí)候提供信息使他們盡快鎖定目標(biāo)，就可以把這一點(diǎn)發(fā)展成為你的優(yōu)勢。 突出某些部分使網(wǎng)頁信息容易找到和閱讀。 5. 用戶瀏覽網(wǎng)頁時(shí)，首先觀察網(wǎng)頁的左上部和上層部分，之后再往下閱讀，瀏覽右邊。 以前研究表明： 讀者常忽視大部分的橫幅廣告，視線往往只停留幾分之一秒。因此需創(chuàng)新廣 告位，合理配置網(wǎng)站廣告形式。 讀者在閱讀文章的時(shí)候并不是逐字逐句，而會(huì)習(xí)慣跳躍掃視，因此，關(guān)鍵信息高亮顯示出來 更易于讀

17、者把握重要信息。 標(biāo)題的設(shè)置要精煉，且要傳達(dá)足夠的信息量。這是讀者決定是否閱讀這篇文章的關(guān)鍵。另還可增加副標(biāo)題 作為補(bǔ)充，如果副標(biāo)題仍不夠吸引，基本上他們就不會(huì)感興趣去點(diǎn)擊了，也就會(huì)出現(xiàn)了產(chǎn)品經(jīng)理最不希望 看到的信息跳出率 (Bounce Rate) 。 5. 網(wǎng)站結(jié)構(gòu)及頁面設(shè)計(jì)微應(yīng)用 (1) 頁面導(dǎo)航方面：導(dǎo)航條清晰明了、突出，層級(jí)分明。 (2) 圖片展示方面：比例協(xié)調(diào)、不變形，圖片清晰。圖片排列既不過于密集，也不會(huì)過于疏遠(yuǎn)。 (3) 圖標(biāo)使用方面：簡潔、明了、易懂、準(zhǔn)確，與頁面整體風(fēng)格統(tǒng)一。 (4) 廣告位設(shè)計(jì)方面：避免干擾視線，廣告圖片符合整體風(fēng)格，避免喧賓奪主。 (5) 按鈕設(shè)置方面：

18、對(duì)于交互性的按鈕必須清晰突出，以確保用戶可以清楚地點(diǎn)擊。 (6) 站內(nèi)搜索方面：搜索提交后，顯示清晰列表，并對(duì)該搜索結(jié)果中的相關(guān)字符以不同顏色加以區(qū)分。 (7) 欄目命名方面：與欄目內(nèi)容準(zhǔn)確相關(guān)，簡潔清晰，不宜過于深?yuàn)W。 其實(shí)對(duì)一個(gè)網(wǎng)站做一次用戶體驗(yàn)分析是很細(xì)很累的活，但是意義卻很大，尤其對(duì)年銷售額上 千萬級(jí)的電子商務(wù)網(wǎng)站而言，用戶體驗(yàn)做好了，轉(zhuǎn)化率能增加千分之一那就能促進(jìn)數(shù)百上千萬的銷售額， 必須引起足夠重視。 寫在結(jié)尾 事實(shí)上，互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁的習(xí)慣和顧客瀏覽商店中物品的習(xí)慣沒有多大差別。用戶打開 一個(gè)新的頁面，掃視一些文字，并點(diǎn)擊第一個(gè)引起他興趣的鏈接。 在這過程中，頁面上有大量的區(qū)域用戶 甚至完全沒有看過。大部分用戶在頁面上尋找他感興趣且可點(diǎn)擊的內(nèi)容，一旦發(fā)現(xiàn)目標(biāo)，點(diǎn)擊行為就會(huì)發(fā) 生，但如果頁面不符 合期望，后退或關(guān)閉按鈕也將馬上被點(diǎn)擊。 1. 大部分時(shí)候用戶并非在閱讀屏幕上的內(nèi)容，而是在掃視。 用戶習(xí)慣掃視和快速尋找頁面上一些能夠引導(dǎo)他理解內(nèi)容的關(guān)鍵點(diǎn)。 2. 不要考驗(yàn)用戶的耐心 當(dāng)一個(gè)頁面不能滿足用戶的期望時(shí)，離開就在所難免。希望通過添加相關(guān)內(nèi)容來豐富頁面和 留住用戶往往效果不佳甚至適得其反。一屏頁面上承載的信息越 多，認(rèn)知的負(fù)擔(dān)就會(huì)越重，就需要花費(fèi)更 多的時(shí)間去處理信息，如果這些信息中還有些不是用戶期望的，那就還要花額外的精力將