網頁設計技巧-F型眼球運動軌跡

之前介紹過幾篇有關於SEO搜尋引擎最佳化的文章，透過SEO可以大大的提高對搜尋引擎的友善度，進而提升網站搜尋排名，而許多網頁設計師以為把網站做得符合搜尋引擎友善 Search Engine Friendly (SEF)，就是完成了SEO，其實是不正確的觀念。

做好SEF充其量只是對蜘蛛(搜尋引擎)友善而已，對於真正在瀏覽您網站的訪客，就不一定會非常友善了。如果您耗費了龐大的人力與物力，讓訪客透過搜尋引擎(Yahoo 或 Google)找到您的網站，但網站無法很有效的吸引他們的目光，導致無法轉換成您的購買客戶則是浪費時間跟金錢而已。所以說網站的有善度對於一個商業網站來說是很重要的。

而美國長期研究網站可用性的著名網站設計師傑柯柏‧尼爾森（Jakob Nielsen）發表了一項《眼球軌跡的研究》，報告中提出，大多數情況下訪客都不由自主的以「Ｆ」形狀的模式閱讀網頁，這種基本恆定的閱讀習慣決定了網頁呈現F形的關注熱度。

　　 F型

1. 水平移動：訪客首先在網頁最上部形成一個水平瀏覽軌跡。
2. 目光下移短範圍水平移動：訪客會將目光向下移，掃瞄比上一步短的區域。
3. 垂直瀏覽：訪客完成上兩步後，會將目光沿網頁左側垂直掃瞄；這一步的瀏覽速度較慢，也較有系統性、條理性。

用不同的頁面做眼動儀測試，得到3張熱度圖。用顏色來表示瀏覽者眼光聚焦的熱度，分為最熱（紅色）、較熱（黃色）、不熱（藍色）和基本不關注（灰色）4種。如下圖所示：

根據這一原理，常見的網站頁面結構安排應該滿足用戶Ｆ型眼球運動軌跡的習慣。在Ｆ型區域中採用恰當的方式，更好地引導訪客行為，滿足訪客需求，從而促進產品銷售。

網站頁面設計與Ｆ型眼球軌跡的結合

在網站導覽建立中，基於Ｆ型眼球軌跡和來訪者的習慣，網頁應當採用恰當的佈局設計。對於絕大多數網站來說可以有選擇地採用以下幾種導覽方式：

• 頂部導覽：主要項目，分類導覽
• 左側導覽：某一具體項目的子項目導航。對於企業網站可以是產品列表、服務內容等客戶最關注的訊息。
• 內容導覽：明確訪問現在的位置，提供快速內容導航。
• 網站地圖：整站的快速索引。

而Google的部落格也發表了一篇文章「Eye-tracking studies: more than meets the eye 」，針對Google搜尋結果中眼球移動進行了研究，進而證實了傑柯柏‧尼爾森（Jakob Nielsen）所發表《眼球軌跡》的正確性。

Google眼球軌跡研究影片

Google眼球軌跡研究圖：

採用符合Ｆ型眼球軌跡的導覽系統，可以極大地提高網站的友善度，讓訪客更為快速、方便地找到自己想要的內容。這種網頁設計建議每一個從事網路營銷、電子商務的網站測試看看。