用戶體驗之網頁板塊設計

　　用戶體驗(User Experience，簡稱UE)是用戶在使用產品過程中建立起來的一種純主觀感受。在基於Web的產品設計中，UE是一個相對較新的概念。Donald Norman博士提出了“用戶體驗”一詞，他是一個認知科學的研究人員，首次提出了在互聯網領域以用...

　　用戶體驗(User Experience，簡稱UE)是用戶在使用產品過程中建立起來的一種純主觀感受。在基於Web的產品設計中，UE是一個相對較新的概念。Donald Norman博士提出了“用戶體驗”一詞，他是一個認知科學的研究人員，首次提出了在互聯網領域以用戶為中心設計的重要性(用戶的需求決定產品如何設計)。

　　Donald Norman

　　用戶體驗很重要，最大的理由是：它對你的用戶很重要。

　　◆ 最起碼是要讓產品有用，這個有用是指用戶的需求。(尊重用戶價值+滿足用戶需求)

　　◆ 其次是能用，所有的流程都走得通，沒有致命的BUG。(尊重用戶價值+滿足用戶需求)

　　◆ 然後是易用，操作起來很便利，這非常關鍵。(注重用戶體驗)

　　◆ 設計的下一個方向就是友好，關注用戶的情感需求。(注重用戶體驗+關注創新)

　　以上四者都做好了，就融會貫通上升到品牌。(品質：品味+質量→品牌)

　　用戶的需求決定產品如何設計

　　人的視覺通常不是先看中間，而是根據母語的讀寫習慣，經過大腦的指令，按照：從上到下，從左到右的路線進行查看，下圖為用戶浏覽網站時視線注意力“F現象”研究：注：綠色、黃色、紅色關注度以此升高，這說明人喜歡第一眼看左上角的內容，這告訴我們，重點要在左邊偏上的部位出現。

　　從左上角的至右下角優先比重逐級遞減

　　[案例]淘寶網商品搜索列表頁

　　谷歌的搜索結果出現“金三角”現象：

　　谷歌搜索列表頁

　　對於google搜索結果的“金三角”現象(也有很多前端設計師形象地描述為搜索結果的“F現象”)。

　　什麼是google搜索結果的“金三角”現象？

　　這項關於用戶對於搜索結果注意力的研究由搜索引擎營銷公司Enquiro、Did-it以及專門研究人們眼睛運動行為的公司Eyetools聯合完成，通過對用戶觀察google搜索結果頁面時眼睛的運動來確定對搜索結果內容的關注程度。

　　該調查結論是，位於google自然搜索結果“F”頂部的信息，獲得了被調查者100%的注意(該研究總共有50位被調查者)，而位於最下面的信息則只獲得了20%的注意力。以下是自然搜索結果排名前10位的信息受到被調查者關注的比例：

　　第1位 – 100%

　　第2位 – 100%

　　第3位 – 100%

　　第4位 – 85%

　　第5位 – 60%

　　第6位 – 50%

　　第7位 – 50%

　　第8位 – 30%

　　第9位 – 30%

　　第10位 – 20%

　　對於google搜索結果右側的贊助商鏈接內容(即關鍵詞廣告)，其受關注程度大約只有自然搜索結果的一半，即使位於第一位也只獲得了50%的注意力。下面是被調查者對全部8個關鍵詞廣告信息的關注情況。

　　關鍵詞廣告第1位 – 50%

　　關鍵詞廣告第2位 – 40%

　　關鍵詞廣告第3位 – 30%

　　關鍵詞廣告第4位 – 20%

　　關鍵詞廣告第5位 – 10%

　　關鍵詞廣告第6位 – 10%

　　關鍵詞廣告第7位 – 10%

　　關鍵詞廣告第8位 – 10%

　　關於google搜索結果金三角調查結論的分析--Search Engine Watch文章“A New F-Word for Google Search Results”對上述調查結果的分析推論可總結為三點：

　　(1)自然搜索結果的重要性遠高於關鍵詞廣告(至少對google是這樣，為了使客戶的利益最大化，谷歌隨後在搜索列表頁的最上面及最下面加入了3條付費廣告);

　　(2)用戶對自然搜索結果的關注程度更高，除非搜索引擎關鍵詞廣告排名在最上端，否則很難獲得用戶的關注;

　　(3)搜索引擎優化很重要，營銷人員如果忽視這一事實，單純依靠贊助商鏈接廣告的搜索引擎營銷方式很難取得最好的效果。

　　調查結果發現，用戶對於搜索結果頁面的關注的范圍呈現英文字母“F”的形狀，也可以描述為“金三角”現象。這種現象證實了一個簡單的問題：搜索結果中排名靠前的內容更容易受到用戶的關注和點擊。這個規律對於google搜索結果右側的關鍵詞廣告同樣是適用的，只是對兩種內容的點擊率有所不同。

　　這正好和謀思副總裁張少華先生提到的“首屏理論”一致。

　　網頁板塊規劃——兩欄設計研究

　　兩欄設計頁面

　　對於兩欄設計，Jakbo Nielsen也曾對232位用戶浏覽幾千個頁面的過程中的眼動情況進行追蹤，發現用戶在不同站點上的浏覽行為有明顯的一致性。這種浏覽行為有三個特征：

　　1.用戶首先會在內容區的上部進行橫向浏覽。

　　2.用戶視線下移一段距離後在小范圍內再次橫向浏覽。

　　3.最後用戶會在內容區的左側做快速的縱向浏覽。

　　顯然，用戶的浏覽行為並非精確的包含這個三個過程，有時候，在這三個過程之後，還會在底部有橫向浏覽的熱點，使得整個浏覽熱區圖看上去更像E而不是F。也有時候，用戶浏覽時只反應了上述的行為1和行為3，使得浏覽熱區圖像一個倒寫的L。但從所有數據整體上來看，用戶的屏幕浏覽熱區圖還是較一致地反應出了F圖像。

　　網頁板塊規劃——三欄設計研究

　　經過分析上面的純理論性研究，我們再來看一個有趣的用戶研究：中、美、韓用戶浏覽網頁習慣。

　　中韓兩國研究者進行了一個關於認知風格(cognitive style)與網頁感知(webpage perception)的跨文化研究，找來中美韓三國用戶(共27人)進行了眼動測試，研究結果頗有意思。實驗是讓用戶浏覽(不做任何點擊)以下這個仿照雅虎布局的測試頁面(根據用戶的國籍使用相應語言版本的頁面)，眼動儀將做實時記錄，測試過程為30秒。

　　研究者將頁面分為9個興趣區域（AOI, AREA OF INTERESTS）。

　　圖2：興趣區域（AOI）

　　從下圖“前25秒用戶訪問的AOI總和”可以看出，韓國用戶的眼睛一直在整個頁面到處跳動。比起其他兩個組別，他們更多地在各個區域中跳來跳去。在前15秒，中美兩國用戶的眼動比較相似：在前10秒，中國用戶的AOI活動稍微高於美國用戶，但很快就明顯領先了。15秒之後，美國用戶的AOI的增長率低於中國用戶，說明美國人的眼睛活動開始穩定，並開始將注意力集中在頁面的某一處。

　　下圖是“每AOI注意點時長總和”。注意點停留時長反映出該區域對用戶的重要性。頁頭中部的區域 2(見圖2)是尤其重要的，它吸引了三國用戶最長久的注意。總體來說，美國用戶將注意力放在區域1、2、5的時間明顯高於其他兩組。中國用戶則在區域2、 5、6、8、9集中了更久的注意力。

　　再來看看眼動結果(由上至下依次為中、美、韓)。綠色的點代表眼睛活動的開始，紅色代表結束。

　　中國用戶眼動圖