基于眼動分析的GUI設(shè)計探析

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

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

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

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

GUI的眼動分析

1.GUI應(yīng)用眼動分析的意義

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

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

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

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

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

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

3.相關(guān)的設(shè)計要素與原則

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

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

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

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

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

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

研究過程與設(shè)計建議

1.實驗設(shè)備及材料

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

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

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

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

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

2.實驗過程

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

實驗結(jié)果：

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

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

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

（4）眼動熱點圖（圖標設(shè)計）

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

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

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

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

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

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

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

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

結(jié)論

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

（作者單位：沈陽航空航天大學(xué) 設(shè)計藝術(shù)學(xué)院 UI工作室）