基于眼動實驗的模態(tài)對話框優(yōu)化設(shè)計研究

王海英，陸東草，李亞寧，周暢

(1.浙江農(nóng)林大學(xué) 藝術(shù)設(shè)計學(xué)院， 杭州 311300；2.東北大學(xué) 工商管理學(xué)院，沈陽 110000)

1 引言

人機交互方式以發(fā)起者來分類主要有兩種方式，一種是人向機器主動發(fā)起的交互，另一種是機器向人主動發(fā)起的交互。自從出現(xiàn)圖形化界面一來，對話框是機器向人發(fā)送臨時消息的一種交互方式，在計算機人機交互中大量應(yīng)用，成為一種主要的人機對話方式[1]。模態(tài)對話框是一種強制用戶必須做出回應(yīng)的對話框，當(dāng)其出現(xiàn)時其他用戶界面都不能被執(zhí)行，用戶只有對模態(tài)對話框進行相應(yīng)的操作后才能繼續(xù)進行其他操作[2]。

模態(tài)對話框往往會給用戶帶來很多干擾，用戶可能正在進行其他比較重要的操作，總是希望能夠迅速點擊按鈕做出選擇。但是在實際的使用過程中，由于模態(tài)對話框的設(shè)計存在的諸多問題，導(dǎo)致用戶無法迅速做出決策，進而花費了大量時間反復(fù)瀏覽對話框或者匆忙之間做出了錯誤選擇，從而大大降低了用戶體驗水平。尤其是如果用戶的操作結(jié)果會帶來較大風(fēng)險時，可能會造成文件的永久刪除、花費大量流量資費等嚴(yán)重?fù)p失。在前期的調(diào)研中發(fā)現(xiàn)模態(tài)對話框設(shè)計中的常見問題包括：模態(tài)對話框的文本內(nèi)容冗余、表達不明確；標(biāo)識設(shè)計不明確；用戶不確定點擊按鈕會發(fā)生什么；按鈕的命令與對話框內(nèi)容操作方向性不一致等。

目前與模態(tài)對話框設(shè)計相關(guān)的文獻資料主要存在于人機交互設(shè)計書籍[3]、UI設(shè)計論壇[4]、博客[5]等平臺和系統(tǒng)開發(fā)指南等。在介紹模態(tài)對話框設(shè)計的相關(guān)書籍中[3],雖然都提到對話框的設(shè)計好壞與否能夠影響用戶的用戶體驗，但其主要內(nèi)容都是介紹對話框的類型與用途，設(shè)計要點不盡相同，與Shneiderman等人提出的用戶界面設(shè)計原則類似[6]。在UI設(shè)計網(wǎng)站和開發(fā)者論壇中則有實際參與過軟件或系統(tǒng)圖形用戶界面開發(fā)的人員將其設(shè)計經(jīng)驗與思想進行分享，如UI中國、學(xué)UI網(wǎng)[7]等網(wǎng)站，也提出了具有參考價值的建議。國外的開發(fā)者指南和開發(fā)者論壇上有大量的相關(guān)文字、圖片資料。在蘋果開發(fā)者指南中建議應(yīng)盡可能減少模態(tài)對話框的使用，要用簡潔明了的話語向用戶表達你的想法[8]；在安卓開發(fā)者指南中建議按鈕上的文本需指向模態(tài)對話框的核心內(nèi)容，將肯定性按鈕放在右邊的位置，將否定性按鈕放在左邊的位置[9]。在微軟開發(fā)者指南中提供的內(nèi)容主要在于對話框的介紹和設(shè)計對話框的技術(shù)問題[10]。然而這些設(shè)計建議并不具有代表性，是交互設(shè)計從業(yè)人員根據(jù)其個人經(jīng)驗提出，大部分人員僅有單一APP、單一用戶群體、單一應(yīng)用功能的設(shè)計經(jīng)驗，不具有廣泛意義上的參考性。且提出的建議少有理論和數(shù)據(jù)的支撐，不具有代表性。目前缺少針對如何提高模態(tài)對話框認(rèn)知效率的系統(tǒng)分析和有實驗數(shù)據(jù)支撐的文獻研究。

本文從用戶對模態(tài)消息的認(rèn)知過程分析入手，研究影響認(rèn)知效率的因素，最后基于層次分析法確定最優(yōu)設(shè)計方案，為模態(tài)對話框的設(shè)計提供支持和參考。

2 影響認(rèn)知效率的因素分析

2.1 認(rèn)知過程分析

對模態(tài)消息框的認(rèn)知可以分為兩個路徑 ：自下而上和自上而下的路徑[11-12]。 自下而上的路徑源自呈現(xiàn)在視網(wǎng)膜上的圖案視覺信息，是一種基于特征的視覺搜索；而自上而下的路徑則出自注意力的需要，即根據(jù)任務(wù)情景等來依次決定關(guān)注點[13]。當(dāng)模態(tài)對話框出現(xiàn)在系統(tǒng)界面中，用戶的當(dāng)前任務(wù)被迫中斷，模態(tài)對話框首先進入視覺系統(tǒng)，接下來的認(rèn)知過程根據(jù)知覺的加工模式分為兩種情況。

(1)用戶可以根據(jù)場景，調(diào)取知識和記憶等信息直接辨別按鈕含義從而快速做出決策，這種對模態(tài)對話框的識別為自上而下的認(rèn)知模式(圖1(a))。

圖1 模態(tài)對話框的認(rèn)知模式(a)自上而下認(rèn)知模式 (b)自下而上認(rèn)知模式

(2)用戶通過瀏覽對話框的標(biāo)題、標(biāo)識、內(nèi)容等信息，并將這些信息與按鈕命令的匹配，進而做出決策，這種情況下對模態(tài)對話框的識別為自下而上的認(rèn)知模式(圖1(b))。

在實際的使用過程中，用戶對一個模態(tài)對話框進行認(rèn)知的過程通常是自下而上與自上而下相結(jié)合的過程。如果模態(tài)對話框設(shè)計合理，用戶一般采用自上而下的模式對按鈕直接識別；但如果對按鈕的識別沒成功，接下來將采用自下而上的識別模式，即對對話框內(nèi)的具體信息進行識別。但是在這個過程中，用戶對該模態(tài)對話框的文字解讀、標(biāo)識隱喻的理解等，也參雜了根據(jù)之前的認(rèn)知經(jīng)驗來進行推理的過程，也就運用了自上而下的認(rèn)知模式。

2.2 設(shè)計要素分析

基于對模態(tài)對話框認(rèn)知過程兩種基本模式的分析，在對模態(tài)對話框進行設(shè)計的時候，為了降低用戶的認(rèn)知成本、提高認(rèn)知效率，應(yīng)當(dāng)注意以下的設(shè)計要點。

(1)盡量保證用戶實現(xiàn)自下而上的認(rèn)知模式，按鈕命令設(shè)計為直接解釋其功能，使得用戶能夠直接識別操作的意義，不需要瀏覽模態(tài)對話框的其他信息就能直接做出決策。

(2)如果自下而上的識別不成功，用戶需要瀏覽對話框具體信息，可將標(biāo)題設(shè)計為直接告知用戶目的、核心內(nèi)容加粗、設(shè)計合適的標(biāo)識等方式盡量降低用戶的認(rèn)知成本，提高認(rèn)知效率。

3 對象與方法

3.1 實驗設(shè)計

采用多因素被試內(nèi)重復(fù)實驗設(shè)計。自變量為標(biāo)題、內(nèi)容、按鈕和標(biāo)識，因變量為反應(yīng)用戶認(rèn)知水平的三個指標(biāo)，即反應(yīng)時、注視點數(shù)和注視時間。

3.2 實驗材料

實驗材料圍繞四個自變量進行設(shè)計，每個自變量2個水平，共有2×2×2×2=16種組合，每種組合對應(yīng)著一個新的對話框設(shè)計。自變量的水平按照2.2中的要點進行設(shè)計，盡量做到降低用戶認(rèn)知成本，提高認(rèn)知效率。自變量的水平和相應(yīng)的解釋見表1。

表1 模態(tài)對話框設(shè)計要素水平和相應(yīng)解釋

3.2 實驗對象

本實驗共26名被試，其中21名東北大學(xué)本科在校生，5名校外公開招募的成員。被試性別分布為女性11名，男性15名。被試均為非色盲，非近視或戴上眼鏡后能夠看清電腦屏幕內(nèi)容。被試均有熟練使用電腦的經(jīng)驗，了解什么是模態(tài)對話框，知道如何對其做出反應(yīng)，能夠熟練操作鼠標(biāo)。

3.3 實驗場地及器材

本次實驗地點為東北大學(xué)工商管理學(xué)院行為觀察室，該場所光線充足，無噪音污染，能夠保證被試不受干擾因素影響。實驗過程中使用器材是德國SMI ETG頭戴式眼動儀。在使用過程中，被試將頭戴式眼動戴在頭上，利用近視或遠(yuǎn)視鏡片調(diào)節(jié)視線后即可進行視線校準(zhǔn)。該眼動儀可記錄被試的眼珠的水平和垂直運動的時間、距離、速度及瞳孔直徑及注視的物體圖像。

3.4 實驗過程

本實驗使用Visual Studio 2017作為實驗平臺，模擬對話框的使用場景。使用眼動儀記錄所需的眼動數(shù)據(jù)。實驗時間選擇在上午9-12點，下午2-5點進行，保證被試生理機能處于正常工作狀態(tài)。實驗開始前，主試需要向被試介紹實驗流程及注意事項。實驗開始后，主試在旁觀察被試的操作行為，若遇到隨便選擇按鈕等消極操作，則需阻止該次實驗。被試在實驗過程中按照計算機提供的指令依次完成操作直至實驗結(jié)束，在實驗過程中除了非不可抗力因素的出現(xiàn)，被試不可與他們進行交流，避免造成被試的選擇受到影響。

4 結(jié)果

4.1 方差分析

對本實驗中的數(shù)據(jù)采用重復(fù)測量方差分析。在剔除不合格數(shù)據(jù)，共獲得了20名被試的合格數(shù)據(jù)，每名被試的數(shù)據(jù)分別包括16組材料的反應(yīng)時，注視點數(shù)量和注視時間，并分別對各個設(shè)計變量的主效應(yīng)和交互作用進行了分析。

按鈕變量的主效應(yīng)分析見表2，其中按鈕變量相對于反應(yīng)時 [F(1，19)=4.564，P=0.049]、注視點數(shù)量[F(1，19)=4.886，P=0.045]和注視時間[F(1，19)=5.021，P=0.041]都是顯著的。通過比較結(jié)果分析(見表2)，按鈕在解釋功能設(shè)計水平下，相比于通用按鈕設(shè)計，完成任務(wù)時間顯著提高了555 ms，注視點數(shù)減少了0.640點，注視時間減少了346 ms。標(biāo)識變量相對于注視點數(shù)量是顯著的，反應(yīng)時和注視時間也有所減少，但不夠顯著。其他變量的主效應(yīng)不顯著。

表2 按鈕變量對眼動指標(biāo)的主效應(yīng)分析(N=20)

在交互作用方面，按鈕和內(nèi)容這兩個自變量交互作用相對于反應(yīng)時 [F(1，19)=5.920，P=0.025]、注視點數(shù)量[F(1，19)=6.628，P=0.022]和注視時間[F(1，19)=8.244，P=0.012]都是顯著的(見表3)。通過比較分析結(jié)果顯示，(通用按鈕*核心內(nèi)容加粗)設(shè)計水平下反應(yīng)時(2.891 s)和注視點數(shù)(7.783)最低，(解釋功能按鈕*核心內(nèi)容加粗)情況下注視時間(2.293 s)最短。

表3 內(nèi)容和按鈕標(biāo)量對眼動指標(biāo)的交互作用分析 (N=20)

4.2 最優(yōu)方案選擇

本文中包含任務(wù)完成時間、注視點數(shù)、注視時間三個因變量，運用層次分析法對三個指標(biāo)計算權(quán)重(如表4)。參與層次分析法的專家為5人，包括來自用戶體驗、人機界面設(shè)計等相關(guān)領(lǐng)域的研究專家2人和企業(yè)的產(chǎn)品經(jīng)理3人。經(jīng)過統(tǒng)計與計算得到各指標(biāo)權(quán)重值(如表4)，分別為任務(wù)完成時間(0.343)、注視點數(shù)(0.331)、注視時間(0.326)。

表4 眼動指標(biāo)權(quán)重值

對16組實驗材料的三組因變量的值進行歸一化處理，結(jié)果如表5所示。結(jié)合指標(biāo)權(quán)重，計算得出每組實驗材料的最終得分值。從表5可以看出，實驗材料2的得分值最低，因此其認(rèn)知效率最高。即(直奔主題*內(nèi)容不加粗*無標(biāo)識*解釋功能按鈕)組合的認(rèn)知效率最高。

表5 因變量的歸一化數(shù)據(jù)及加權(quán)得分值

5 討論

按鈕的設(shè)計對用戶認(rèn)知效率有顯著的影響，在按鈕為解釋功能設(shè)計水平下，任務(wù)完成時間、注視點數(shù)和注視時間數(shù)值更小，認(rèn)知效率更高。這種情況下用戶可以采用自上而下的認(rèn)知模式，根據(jù)使用場景直接做出相應(yīng)的判斷，認(rèn)知效率很高。是否有標(biāo)識對用戶注視點數(shù)量有顯著的影響，無標(biāo)識設(shè)計比有標(biāo)識設(shè)計的注視點數(shù)量要少，這在一定程度上也減少了用戶的認(rèn)知成本。這說明標(biāo)識的存在由于吸引用戶的注意反而增加了用戶識別過程中的注視點數(shù)量，但是對完成任務(wù)時間和注視時間沒有顯著的影響。

內(nèi)容和按鈕這兩個自變量的交互作用顯著，(核心內(nèi)容加粗*通用按鈕)水平下的下反應(yīng)時和注視點數(shù)最低，(核心內(nèi)容不加粗*解釋功能按鈕)設(shè)計水平下注視時間最短。這說明核心內(nèi)容加粗和按鈕解釋功能這兩種設(shè)計水平不能同時采用。即采用了解釋功能設(shè)計的情況下，如果用戶已經(jīng)能夠進行自上而下的識別，再采用核心內(nèi)容加粗的方式反而額外吸引了用戶的注意力，增加了注視時間，從而降低了認(rèn)知效率。反之，如果采用了通用按鈕設(shè)計，用戶通過按鈕無法直接進行判斷進而需要進行自下而上的識別時，核心內(nèi)容加粗會減少用戶的注視點數(shù)和反應(yīng)時間，從而一定程度提高認(rèn)知效率。

標(biāo)題、內(nèi)容、按鈕、 標(biāo)識四個設(shè)計變量相對于注視時間因變量的交互作用顯著。通過數(shù)據(jù)處理得出(直奔主題*內(nèi)容不加粗*無標(biāo)識*解釋功能按鈕)組合的認(rèn)知效率最高。

6 結(jié)論

本研究基于模態(tài)對話框認(rèn)知過程的分析討論了影響要素的設(shè)計要點，通過眼動實驗研究驗證各個要素對認(rèn)知效率的影響，并采用層次分析法確定三個因變量的權(quán)重指標(biāo)，最后根據(jù)實驗結(jié)果得出了最優(yōu)設(shè)計方案。根據(jù)實驗結(jié)果得出模態(tài)對話框的一些設(shè)計要點：(1)將按鈕設(shè)計為能夠直接解釋功能將顯著提高認(rèn)知效率；(2)不設(shè)計標(biāo)識在一定程度上能降低用戶的認(rèn)知負(fù)擔(dān)；(3)核心內(nèi)容加粗顯示和解釋功能按鈕設(shè)計不宜同時采用，否則反而增加用戶負(fù)擔(dān)；(4)(直奔主題*內(nèi)容不加粗*無標(biāo)識*解釋功能按鈕)的設(shè)計組合認(rèn)知效率最高。