本文翻譯自Attention Insight,本網站已獲得Attention Insight授權。
原文連結:What Is Eye-Tracking & How It Helps to Make a Perfect Web Design
為什麼設計師需要了解眼動追蹤?
想像一下,一個精美、走在時尚前端的網站,擁有吸睛的文字、高品質的視覺效果和先進的功能。然而,你的老闆卻這樣說:「它無法產生原先預期的轉換率。」現在,你被要求再次改進你的設計。從哪裡開始?讓主要按鈕變成紅色?在關鍵詞下加底線?然後呢?再次與老闆確認?與一群朋友進行測試?信不信由你,眼動追蹤在這種情況下會很有幫助。對於那些尚未嘗試過的人來說,眼動追蹤可能聽起來有點複雜,但其實並不是。在這裡,我們將簡單解釋什麼是眼動追蹤,以及它如何幫助改進你的工作。
什麼是眼動追蹤?
眼動追蹤是一種追蹤(測量)人的眼睛或注視位置的技術。眼動追蹤是一種使用科技讓電腦或其他設備,能夠知道一個人在看什麼的過程。
通常,眼動追蹤包括眼動追蹤儀(設備)、使用者(參與者)和軟體(演算法)。
眼動追蹤儀會測量眼睛的位置、運動和焦點,可以是網路攝影機、眼鏡或安裝有攝影機的頭盔。軟體分析眼動追蹤儀收集的資料,並提供所需的資訊,通常以「熱圖」(Heatmap)形式呈現,內容是視覺素材(如網站)。使用者是被追蹤眼動的人,可能有會進行在網站上搜索特定內容的任務,或者只是查看視覺內容。
Eye-Square的移動眼動追蹤器(眼鏡式)
可以用於眼動追蹤的網路攝影機
眼動追蹤的主要結果,會以平均熱圖的形式呈現。此形式的熱圖顯示了使用者凝視的平均結果,會用不同的顏色標記感興趣的區域。熱圖中的紅色,表示網頁或視覺的最吸引人的區域,這是使用者第一個視線停留的地方。它顯示了使用者的注意力焦點,有時是以毫秒做計算而出的。較冷的顏色,如藍色,則表示使用者瀏覽了圖像,但沒有真正關注它。最後,灰色(或沒有顏色)的區域,則表示使用者完全沒有看過的地方。
Attention Insight的熱圖
眼動追蹤檢測網頁可用性問題(例子)
眼動追蹤如何解決網站問題?以下為幾個例子。
在2007年,美國人口普查局的主頁發生了一個大問題:86%的使用者,無法找到國家的人口數,但是該數字以大紅字出現在他們的主頁上。
測試使用的人口普查局主頁(www.census.gov)
在縮小的截圖中,人口數是唯一清晰可讀的資訊,所以問題比想像中的簡單。在實際網站上,使用者通常忽略了大紅字。
該網站由尼爾森・諾曼集團(Nielsen Norman Group, NNg)進行測試。其研究的平均熱圖顯示了使用者如何看待這個主頁——他們的任務是找到美國的人口數。
2007年美國人口普查局主頁的使用者平均熱圖,由Nielsen Norman Group提供
起初,熱點圖看起來還可以。但仔細檢查後,可以明顯看出使用者只注視了顯示人口數數字的前三分之一。換句話說,人們掃描了那個區域,但實際上沒有閱讀數字。只有一小部分使用者—如藍色所示—看了數字的後三分之二。
熱點圖顯示了一個很明顯的問題——人們沒有閱讀整個數字,或者沒有認真對待它。標語盲點(Banner blindness)和虛構術語(Made-up terms)是主要的原因,但這個問題只有在進行眼動追蹤測試後才被確定下來。
這裡還有另一個例子。大家都很清楚,假設圖像中有臉,它會吸引很多注意力。你可以在這個尿片廣告的熱圖中清楚地看到這一點。不幸的是,從市場營銷的角度來看,這是個問題,因為廣告的文案沒有吸引足夠的注意力。
尿片廣告的熱圖
現在看看,假設嬰兒的臉面對著文案時的圖像排版。
修改後的尿片廣告熱點圖
正如你所看到的,使用者再次專心看於嬰兒的臉(從側面看),並直接跟隨嬰兒的目光,看到標題和開場文案。甚至嬰兒下巴指向的文本區域被閱讀得更多!
我們的客戶,德國新聞平台Welt.de希望引導使用者注意到第一篇文章,並確保他們注意到這是一個影片新聞。經過幾次預測式眼動追蹤測試後,我們讓客戶根據數據進行設計,以確保他們的目的有被達成。
設計師的簡易眼動追蹤解決方案
眼動追蹤有許多不同的選擇和方法可供選擇。哪種方式最適合您,取決於您的需求和預算。
Attention Insight提供基於預測的眼動追蹤解決方案。基於學習過往的眼動追蹤研究數據的人工智慧訓練,可以預測使用者在與內容互動時會看到哪些位置。你無需實際參與測試的真實人員,即可以幫助你分辨視覺注意力的錯誤,並獲得有關使用者注意力轉移的洞察。它可以在90秒內,提供超過30,000個「使用者」的結果,預測準確率達到90%。在家裡或公司的電腦上操作非常容易。你可以免費進行使用。如果還沒有嘗試過,請試試看!
結論
總結起來,眼動追蹤是可以預測網站易用性的強大工具,預測式的眼動追蹤可以在幾分鐘內提供準確的結果,而且成本相對較低。
文/Kamile
本文轉載自What Is Eye-Tracking & How It Helps to Make a Perfect Web Design