眼睛,是人類最重要的感覺 (sense)器官。心理學研究表明,70% 以上的外界信息都通過人的眼睛來獲得。在人際交往中,眼神也是傳遞信息的重要途徑和表述情感的“秋波”。
當今社會,網絡已成為人們生活中的依賴, 網絡活動日益趨向于用眼睛來完成。這一方面造就了我們所說的一種經濟模式——眼球經濟;另一方面也使得網站使用者(用戶)的“眼神(gaze)”成為網站界面設計者關注的核心。
界面設計者一直都對用戶使用網絡時的心理活動感興趣,因為他們想更好地讓用戶簡單、高效地完成任務,并提高用戶對網站的粘合度。人的潛意識往往通過眼睛這個心靈的窗戶浮現出來。但是,眼睛這個器官本身很精密,記錄它們的運動,比網站服務器自動記錄人的鼠標點擊要困難得多。所幸的是,在心理學領域,眼動儀已經廣泛地用于各種實驗研究。受其啟發,眼動儀在界面設計方面的應用,近年來開始逐漸普及起來。
一、眼動與眼動儀
我們平時看東西的時候,經常意識到自己的視線其實在不停地四處游走,這種現象在心理學上稱為眼跳(saccade)。眼跳保證眼睛所獲取的信息處于不斷的更新中。眼跳時間一般在幾十毫秒,眼跳的距離有長有短。這種現象能夠透露和解讀用戶在尋找目標信息時的行為過程。 圖1記錄的是用戶在試圖尋找信息時視線在網頁不同部分移動的情形。其中距離不等的直線記錄的就是用戶的眼跳。
除了各種直線外,圖1中還有許多大小不一的圓圈。這是另外一種常見的眼動行為:注視(fixation)。注視是指視線固定在某個點上的行為,這個點也被稱為注視點。這種行為更通俗的解釋就是“盯著看”。由于映射在眼球中的影像需要一定的大腦處理時間,所以一般意義上認為,只有注視的時間超過0.3秒才會被認為是一個合適的注視點。注視時間被認為是用戶理解網站目標信息的過程。
由于上述的眼動行為都是發生在1秒之內的瞬間, 所以記錄這些行為需要特殊的精密設備。這種設備就被稱為眼動儀(eye tracker)。目前,眼動儀的軟硬件技術很成熟,并有多種型號以適應不同的使用情境(use of context)。在用戶界面設計行業里,最常用的是圖2中的桌面系列。
圖2 SMI眼動儀(來源:ISAR公司)
如圖3所示,眼動儀的本質是一臺紅外攝像機。它被嵌入或者安放在普通的顯示器下面,就構成了一臺眼動儀。設備會發射人眼看不見的紅外光波,眼睛吸收并反射這種光波。攝像機接受反射回來的光波并進行一定的數學計算和格式轉換,就能在屏幕上定位眼睛所注視的位置。
二、如何使用眼動儀研究界面設計
眼動設備本身與其他人體信號檢測設備如多導生理記錄儀并無兩樣,是心理學在基礎研究與應用研究中使用的工具。研究者僅需要對設備本身有較基本的認識即可。在界面設計研究中真正起作用的是其建立在實驗心理學、界面設計等學科上的研究邏輯。
在界面設計研究中,大量采用各種心理學的研究方法。其中最普遍采用的是問卷、訪談、使用性測試(usability testing)、數據挖掘(data mining)等。 但是這些并不能挖掘人類心理活動的全部。弗洛伊德(Freud)著名的“潛意識”理論、格林沃德(Greenwald)的內隱認知(implicit cognition)研究都支持人類心理有一部分是很難用語言表達清楚的論斷,而眼動研究正好解決了這個難題。
按照 ISAR的研究經驗,眼動研究作為一種方法應用到界面設計中,更適合于界面的草圖(被稱為線框圖)(paper prototype)的設計改進。
圖4 1個簡單的線框圖(來源:ISAR公司)
在網站上線之前,幾乎每個主要頁面都會由設計師給出類似的線框圖。而懂得眼動測試技術的研究者的任務就是發現網頁草稿哪些地方會讓網站使用者遇見諸如“這個方塊是個按鈕嗎”“我怎么找不到登錄的地方”等問題。心理學者在進行界面測試之前,都會對要測試的對象(object)作很多了解,以便制訂針對性的測試流程。接著他們會邀請真實的用戶來完成這些測試任務。測試完成后,用客觀、直接的眼動數據將這些問題描述出來,使問題在設計早期就得到解決,從而節約項目時間和費用。
三、眼動測試中的常用結果
研究者可以從眼動測試的結果圖片里,找到設計中出現的問題。 這些圖片中,較為常用的有三類:熱區圖(heatmap)、注視軌跡圖(scanpath)、興趣區圖(AOI,area of interest)。熱區圖中用戶注視時間長短用顏色表示:紅色時間最長、黃色次之、綠色最短;沒有顏色的部分表示用戶沒有看過。注視軌跡圖中用戶所看圖像上的彩色曲線代表注視點移動軌跡,其中彩色圓點大小表示注視時間長短。興趣區圖是可自主定義感興趣的圖像區域范圍,展示數量化的眼動數據信息。
圖5是一個典型的熱區圖,它由很多顏色組成。有顏色的區域代表有網站使用者關注到這個區域。沒有顏色的部分,代表網站使用者沒有注視過這些區域。不同的顏色代表注視的時間長度不同。熱區圖的靈感來源自地理學中的地形圖,即把高度不同的地面用不同的顏色表示出來。
圖5 某網頁的熱區圖(來源:ISAR公司)
網頁通常由好幾個模塊組成。不同訪問目的的用戶對各模塊的關注情況不同。有些用戶只關注自己的賬戶余額,登錄查看一下,所以登錄模塊對他來說就很重要;而某用戶則想尋找產品的細則條款,產品內容對他來說就很重要。如果這些用戶關注的重點并沒有出現在熱區圖上紅色較為集中的區域里,這時候研究者就可以說“哦,這是個問題!”
注視軌跡圖也是一種常用的圖片,特別是在觀察用戶的目標搜索過程時。圖6表明,用戶在尋找信息時,基于經驗和認知會對其位置有一定的心理預期。當網頁的位置設計違背了用戶的預期時,用戶眼睛的軌跡就會出現迷惘的移動。圖中紅色方塊是用戶的點擊行為,用戶的視線移動由左下往右上移動。這說明,用戶視線最初是在左下方的,但是當預期元素出現在右上方時,視線跳躍著移動到了右上方。用戶視線穿過的無用空間對用戶尋找目標構成了障礙和時間浪費。
圖7的興趣區是設計者特別關注的區域,例如登錄框、廣告圖片、客服專區等。這一區域會有若干設計可能,不同的設計讓用戶投入的認知負荷(cognitive load)是不同的。所以,興趣區圖可以給出更多的指標,對不同設計孰優孰劣的評價給出參考。
圖7 興趣區圖(來源:ISAR公司)
四、結束語
眼動測試作為一種重要的研究方法,這里僅作簡介。讀者可以藉此略微了解心理學的研究是如何被應用到界面設計的。如果想深入了解更多的細節,例如被試數量、眼動測試中的定標(calibration)、回視(revisit)、唐德斯(Donders)減法反應時邏輯與眼動測試的關系等,可參考:
http://www.useit.com/eyetracking/methodology/
http://eyetracking.me/wp-content uploads/2009/ 05/tobii_ shanghai_slides.pdf