基于眼動分析的GUI設計探析

洪金鵬?任宏?劉雪婷?高欣?李思虹?劉志遠

GUI在微機領域的應用極大的提高了工作效率，而如今，相較于發(fā)展更為迅猛的移動端APP，其GUI的設計顯得尤為重要。我們應用客觀定量性的眼動試驗研究分析，提升APP的使用體驗品質(zhì)，同時所得出的結(jié)論也推廣應用至更多界面設計當中，有效的將科學的研究方法有效應用于實際創(chuàng)新設計領域。

GUI的發(fā)展歷程與現(xiàn)狀

20世紀80年代蘋果公司首先將圖形用戶界面（Graphical User Interface）引入微機領域，推出的Macintosh以其全鼠標、下拉菜單操作和直觀的圖形界面，引發(fā)了微機人機界面的歷史性的變革。人們從此不再需要記憶和鍵入繁瑣的命令，使得用戶獲取簡單的消息比命令行花上更少的計算能力，不僅提高了工作效率也極大地方便了非專業(yè)用戶的使用。而后微軟公司推出了Windows系統(tǒng)，從Windows 3.0發(fā)展到Windows 10，使得GUI被應用于用戶面更廣的個人計算機平臺。

如今這個大數(shù)據(jù)信息時代，APP的使用呈現(xiàn)出前所未有的熱潮， APP的設計也帶動了一個領域的發(fā)展。人們的生活、工作無不與此息息相關。GUI是APP的視覺呈現(xiàn)部分，其設計的優(yōu)劣對于信息的傳遞效率、人們的情感與情緒體驗直至用戶是否會選擇使用都起著至關重要的作用。國內(nèi)外對于網(wǎng)頁設計體驗有一些相關研究，但對于當今應用更廣泛，發(fā)展更迅速的移動端APP其客觀定量性實驗研究很少。在應用環(huán)境與支持技術發(fā)生變化的前提下，再移用早幾年的網(wǎng)頁布局、流程與審美已經(jīng)滿足不了APP的使用需要了。

GUI的眼動分析

1.GUI應用眼動分析的意義

眼動研究成果已經(jīng)在心理研究，可用性測試、醫(yī)療器械設計和廣告效果測試等眾多領域發(fā)揮了重要作用，而對web設計的重要程度自然不言而喻。

我們的眼動實驗可以測試網(wǎng)頁或手機APP的布局是否符合預期；重點內(nèi)容是否有效地被關注到；眼睛的視覺流以及頁面跳轉(zhuǎn)的過程是否與最優(yōu)路徑相等。通過眼動儀測試可以發(fā)現(xiàn)很多頁面布局和邏輯問題，對測試后的路徑圖和熱點圖加以分析，對界面的交互設計更有益處。

使用先進的眼動實驗手段對發(fā)展更為迅速的移動端GUI做客觀定量性試驗研究，具有視覺信息傳遞主觀評價不可比擬的科學說服力。分析作為GUI的設計參考，對于提升APP的使用體驗品質(zhì)，指導APP的流程與GUI設計方向與細節(jié)具有重要意義。

2.基于眼動分析的GUI設計研究內(nèi)容

研究用戶在不同條件下對移動端界面設計的注意度以及界面本身的信息傳遞效率。

本研究通過設計眼動實驗，并對實驗得出的視線跟蹤技術參數(shù)進行分析，測試用戶對于移動端界面主題元素、圖標、配色、導航工具的注意程度，對用戶在界面上的各個注視點的空間和時間信息，以及用戶的瞳孔尺寸變化信息等進行分析，對生成的眼動熱點圖（heatmap）、視線軌跡圖（gazeplot）、集簇圖（cluster）、蜂群回放（bee swarm）等等進行對比，研究出用戶瀏覽的興趣區(qū)以及使用習慣，在視覺布局、切換、圖標等方面提出合理設計建議，從而更好的進行最后移動端的界面設計。

3.相關的設計要素與原則

簡潔——突出重點，讓用戶能在移動端小屏幕上聚焦內(nèi)容。

高效——避免鍵盤輸入，有效的觸動，更少的頁面跳轉(zhuǎn)能增加頁面的連貫性，減少用戶記憶負擔。

一致性——它可以讓產(chǎn)品更加易用，降低用戶的認知成本，從而帶來整體體驗的提升。

反饋——即時、有效、清晰的反饋能讓用戶知道自己的行為正在被后臺程序響應和處理。

情感化——情感化設計能帶給用戶愉悅舒心的感受。

移動化——做移動端產(chǎn)品就要從PC的思維邏輯中跳出來。

研究過程與設計建議

1.實驗設備及材料

題目：針對手機、Pad、車載等移動端的GUI作為研究對象，圈選合適興趣區(qū)，利用熱點圖、軌跡圖等指標，在視覺布局、配色、圖標等方面提出對于GUI的合理設計建議。

被試者：從沈陽航空航天大學隨機選取5名男生、5名女生，所有被試視力正常，裸眼視力0.8以上，均無色盲、色弱，且為自愿參加。在人機實驗室排除其他物理因素干擾條件下進行實驗。

儀器：美國ASL Results + GM眼動儀一臺、微機兩臺（一臺呈現(xiàn)實驗材料，一臺執(zhí)行控制命令和處理數(shù)據(jù)）。

實驗方法：待測試的被試不能與已經(jīng)完成的被試交流。被試依次進入實驗室佩戴眼動儀，實驗組人員對其進行眼校準。被試保持正確舒適的坐姿，根據(jù)提示語完成實驗。同類多組材料應用控制變量法，實驗結(jié)果使用平均值法。

實驗材料：1.沈航官網(wǎng)首頁再設計界面2.沈航設藝官網(wǎng)首頁再設計界面3.智能家居easy life主頁界面4.即刻健身App返回頁面（由沈陽航空航天大學設計藝術學院2012屆UI工作室提供）。

2.實驗過程

被試進行調(diào)整。（2）呈現(xiàn)提示語。（3）被試清楚要求后自己按鍵開始測試。 （4）閱讀完畢后按鍵結(jié)束，實驗組人員記錄被試眼動信息。

實驗結(jié)果：

（1）視線軌跡圖（視覺布局）

（2）眼動熱點圖（配色方案）

（3）眼動熱點圖（配色方案）

（4）眼動熱點圖（圖標設計）

3.實驗結(jié)果分析及設計建議

（1）根據(jù)對被試瀏覽三組僅有搜索框位置不同的界面時的視線軌跡追蹤，可以看出當搜索框位于界面右方時，被試能更快速地找到，而且視覺流暢。

（2）根據(jù)眼動熱點圖可以看出，在第一組材料中被試注視點停留在次要內(nèi)容（背景）的時間較長，在第二組材料中被試注視點停留在主要內(nèi)容的時間較長。

（3）根據(jù)眼動熱點圖可以看出，對于三組不同配色方案的同一產(chǎn)品，被試注視點集中停留在淺色系配色方案上。

根據(jù)實驗結(jié)果給出設計建議

（1）充分考量平臺環(huán)境的一致性，避免用戶在使用上的不習慣。

（2）在瀏覽過程中適時的弱化一些干擾項，做到內(nèi)容優(yōu)先，讓內(nèi)容最大化。

（3）出色的視覺效果（配色方案）是產(chǎn)品令人愉悅的基礎。

結(jié)論

將眼動分析應用在GUI設計中，不僅可以彌補視覺信息傳遞主觀評價對用戶認知過程中不足，同時能夠通過大量眼動分析數(shù)據(jù)，發(fā)現(xiàn)好的GUI在眼動分析方面更符合使用需求和擁有更高的使用效率，并且運用數(shù)據(jù)可以發(fā)現(xiàn)用戶在使用APP過程中的習慣、特征以及興趣點等。在實驗中，我們更深地了解到GUI使用圖形或圖標來表達信息對象，建立了一種基于心理學的識別功能。通過這些結(jié)論來優(yōu)化人機關系，為人與界面之間建立交流互動的橋梁。以此提升APP的使用體驗品質(zhì)，并指導APP的流程與GUI設計方向與細節(jié)，設計出更為出色的和更為人所接受的GUI產(chǎn)品。同時我們實驗所得出的結(jié)論也會推廣應用至更多界面設計當中，有效的將科學的研究方法有效應用于實際創(chuàng)新設計領域。

（作者單位：沈陽航空航天大學 設計藝術學院 UI工作室）