段艷花，劉子建，寧 鐸

基于眼動(dòng)技術(shù)的TMA界面評(píng)估及優(yōu)化

段艷花1，劉子建1，寧 鐸2

(1. 陜西科技大學(xué)設(shè)計(jì)與藝術(shù)學(xué)院，陜西 西安 710021；2. 陜西科技大學(xué)電氣與信息工程學(xué)院，陜西 西安 710021)

利用眼動(dòng)追蹤技術(shù)對(duì)膠原纖維熱形變分析儀TMA用戶界面進(jìn)行可用性評(píng)估，提出一種優(yōu)化設(shè)計(jì)方案。以現(xiàn)有的膠原纖維熱形變分析儀TMA界面為原型，通過專家指導(dǎo)，選定4個(gè)設(shè)計(jì)要素，重新設(shè)計(jì)了2款風(fēng)格不同的用戶界面，進(jìn)行眼動(dòng)實(shí)驗(yàn)，采集眼動(dòng)數(shù)據(jù)，利用SPSS進(jìn)行數(shù)據(jù)分析，結(jié)合問卷調(diào)查，對(duì)用戶界面的背景顏色和布局類型進(jìn)行可用性評(píng)估。膠原纖維熱形變分析儀的用戶界面背景顏色和布局類型均會(huì)影響受試的用戶體驗(yàn)，T型布局在各方面均優(yōu)于上下框架型布局。該方案提出了實(shí)驗(yàn)儀器用戶界面的設(shè)計(jì)原則，優(yōu)化了設(shè)計(jì)師依靠經(jīng)驗(yàn)主觀設(shè)計(jì)原版界面的不足，可為實(shí)驗(yàn)類儀器界面設(shè)計(jì)提供參考思路，進(jìn)一步提升設(shè)計(jì)方案的科學(xué)性、合理性。

人機(jī)交互；膠原纖維熱形變分析儀TMA用戶界面；眼動(dòng)測(cè)試；界面優(yōu)化

“十三五”期間，全球經(jīng)濟(jì)緩慢增長(zhǎng)，國(guó)內(nèi)產(chǎn)業(yè)轉(zhuǎn)型加快，我國(guó)皮具種類增多，市場(chǎng)規(guī)模擴(kuò)大，低端檢測(cè)儀器被市場(chǎng)淘汰，而對(duì)高端檢測(cè)儀器則提出更嚴(yán)苛的要求；此外，臨床上對(duì)“活皮(鮮皮)”熱形變性能檢測(cè)設(shè)備的標(biāo)準(zhǔn)更高、需求更迫切。在此背景下，新一代膠原纖維熱形變分析儀，即皮革收縮溫度測(cè)定儀(temperature machine analyzer，TMA)順時(shí)而生，膠原纖維熱形變分析儀TMA中的用戶界面是主機(jī)智能化運(yùn)行不可缺少的部分。在界面設(shè)計(jì)中，設(shè)計(jì)師利用一切可行的技術(shù)條件和手段，使用戶界面準(zhǔn)確、優(yōu)化地顯示各部分信息，不但能提升實(shí)驗(yàn)儀器用戶界面的可用性，還可提高視覺搜索績(jī)效，保證人機(jī)交互的有效性、實(shí)驗(yàn)儀器的高效性，看得清、看得懂，給用戶良好的體驗(yàn)?；谘蹌?dòng)追蹤技術(shù)，結(jié)合膠原纖維熱形變分析儀TMA用戶界面聯(lián)動(dòng)研究，通過對(duì)靜態(tài)交互場(chǎng)景下TMA用戶界面內(nèi)部信息傳達(dá)效率進(jìn)行分析，對(duì)比不同背景顏色、布局結(jié)構(gòu)的TMA用戶界面視覺搜尋效率，優(yōu)化膠原纖維熱形變分析儀TMA用戶界面，提出實(shí)驗(yàn)儀器界面設(shè)計(jì)原則，并以皮革類膠原纖維熱形變性能檢測(cè)為例進(jìn)行說明。

1 膠原纖維熱形變分析儀TMA界面

1.1 定義與界面構(gòu)成

膠原纖維熱形變分析儀TMA是一種用于檢測(cè)皮革收縮溫度的主要實(shí)驗(yàn)工具，不僅適用于皮革領(lǐng)域，還適用于生物醫(yī)學(xué)工程領(lǐng)域(皮膚、心臟瓣膜、血管)等以膠原纖維為特征材質(zhì)的熱穩(wěn)定性測(cè)試。

膠原纖維熱形變分析儀TMA的用戶界面由4部分組成：①曲線圖區(qū)(顯示溫度、試樣長(zhǎng)度、時(shí)長(zhǎng))；②試樣數(shù)據(jù)區(qū)；③按鈕區(qū)(可依設(shè)定關(guān)鍵數(shù)據(jù))；④頂部狀態(tài)區(qū)(顯示檢測(cè)時(shí)間、實(shí)時(shí)溫度和工作狀態(tài))，如圖1所示。

1.2 膠原纖維熱形變分析儀TMA技術(shù)支撐

圖2為最新研制的膠原纖維熱形變分析儀TMA系統(tǒng)。其不但解決了位移傳感器精度低，測(cè)溫精度參差不齊，且試樣無法始終處于3 g恒張力條件等難題，還完全滿足了《QB/T2713——2005》等國(guó)內(nèi)外收縮溫度標(biāo)準(zhǔn)檢測(cè)條件以及有關(guān)直接判定收縮溫度的技術(shù)要求。檢測(cè)過程中實(shí)時(shí)顯示節(jié)點(diǎn)數(shù)據(jù)和變化曲線，檢測(cè)完成后，數(shù)據(jù)組無線傳至計(jì)算機(jī)，計(jì)算機(jī)繪制試樣的長(zhǎng)度、溫度、時(shí)間曲線，專業(yè)軟件保存并進(jìn)一步處理檢測(cè)信息(包括SCI期刊論文在內(nèi)的高層次文章中的一圖多曲線)，可用于打印標(biāo)準(zhǔn)檢測(cè)報(bào)告，便于后續(xù)科研人員的研究[1]。

圖1 膠原纖維熱形變分析儀TMA-YD4型用戶界面結(jié)構(gòu)圖

圖2 膠原纖維熱形變分析儀TMA-YD4型((a)膠原纖維熱形變分析儀TMA-YD4型；(b)取樣器；(c)真空浸潤(rùn)器；(d)上位機(jī))

1.3 當(dāng)前界面存在問題

經(jīng)實(shí)地考察，并與專家用戶、初級(jí)用戶深入訪談、溝通，明確研究方向，對(duì)當(dāng)前儀器用戶界面進(jìn)行初次眼動(dòng)實(shí)驗(yàn)，以檢測(cè)現(xiàn)有儀器用戶界面的使用效率是否達(dá)到預(yù)期、其布局安排是否符合特定用戶群體的操作習(xí)慣。經(jīng)實(shí)驗(yàn)得出當(dāng)前界面存在以下問題：

(1) 專業(yè)指向性有待加強(qiáng)。該實(shí)驗(yàn)儀器僅供皮革檢測(cè)為例的專業(yè)用戶使用，在形式、文字、色彩等表現(xiàn)形式上與普通儀器的界面有所區(qū)別。

(2) 交互通道單一，人機(jī)交互性差。膠原纖維熱形變分析儀TMA的交互通道為視覺和手勢(shì)交互，視覺識(shí)別接收信息，經(jīng)大腦處理識(shí)別信息，點(diǎn)擊屏幕進(jìn)行下一步操作，過程是單向的，一旦視覺識(shí)別出現(xiàn)偏差，機(jī)器無法及時(shí)反饋，會(huì)造成操作失誤或操作無效，用戶體驗(yàn)差。

(3) 整體界面布局缺乏一致性。各模塊布局違背對(duì)齊原則，上下邊界不統(tǒng)一，試樣區(qū)和操作功能區(qū)的位置范圍超出當(dāng)前以左為標(biāo)準(zhǔn)的規(guī)范，整體界面布局失去平衡。

(4) 功能鍵布局、尺寸不規(guī)范。常用功能鍵布局安排不符合用戶使用習(xí)慣，增加用戶學(xué)習(xí)成本；功能鍵尺寸偏小，不符合人體手指基本參數(shù)，在界面中比例失調(diào)，操作時(shí)容易誤操作或重復(fù)操作。

2 可用性評(píng)估與眼動(dòng)追蹤技術(shù)

2.1 可用性評(píng)估

根據(jù)國(guó)際定義，可用性指：在特定環(huán)境下，特定用戶使用特定產(chǎn)品完成任務(wù)時(shí)的有效性、效率和主觀滿意度[2]?？捎眯栽u(píng)估是一個(gè)通過分析用戶界面的可用性數(shù)值，以此為基礎(chǔ)對(duì)交互界面進(jìn)行改進(jìn)優(yōu)化的過程。HARTSON[3]認(rèn)為，評(píng)估產(chǎn)品界面或設(shè)計(jì)原型的可用性，對(duì)原界面改進(jìn)或原型迭代具有實(shí)踐價(jià)值?？捎眯栽u(píng)估，既能改進(jìn)現(xiàn)有產(chǎn)品界面的缺陷，又能在設(shè)計(jì)新的界面時(shí)揚(yáng)長(zhǎng)避短，為后續(xù)產(chǎn)品界面或產(chǎn)品原型迭代提供參考價(jià)值。

2.2 眼動(dòng)追蹤技術(shù)在用戶界面中的應(yīng)用

眼動(dòng)追蹤技術(shù)是以機(jī)械視覺技術(shù)，記錄用戶的眼球運(yùn)動(dòng)軌跡，探究用戶心理活動(dòng)的技術(shù)手段[4]。眼動(dòng)追蹤技術(shù)，記錄受試者處理視覺信息的眼睛注視時(shí)長(zhǎng)、注視點(diǎn)和運(yùn)動(dòng)軌跡，探究受試者的認(rèn)知流程、心理活動(dòng)和操作習(xí)慣等。當(dāng)前，眼動(dòng)追蹤技術(shù)在心理學(xué)、認(rèn)知語言學(xué)、體育學(xué)、設(shè)計(jì)學(xué)等諸多學(xué)科均有涉獵，應(yīng)用于產(chǎn)品可用性測(cè)試[5]、網(wǎng)頁測(cè)試[6]、動(dòng)態(tài)分析(汽車駕駛[7]、航天航空[8]等)、人機(jī)交互[9]等多領(lǐng)域。

眼動(dòng)追蹤技術(shù)介入儀器類用戶界面測(cè)試，分析用戶進(jìn)入界面完成操作任務(wù)的注視時(shí)間、追蹤軌跡、熱點(diǎn)分布等，科學(xué)、理性研究分析已有界面不足，優(yōu)化當(dāng)前界面，以此構(gòu)建評(píng)價(jià)體系或迭代設(shè)計(jì)模型。對(duì)現(xiàn)有的儀器界面優(yōu)化改進(jìn)，以實(shí)現(xiàn)功能要求的基礎(chǔ)上，降低因認(rèn)知困難造成的誤操作，并通過嚴(yán)謹(jǐn)性、規(guī)范化的界面設(shè)計(jì)降低認(rèn)知困難，增強(qiáng)用戶體驗(yàn)。

眼動(dòng)追蹤技術(shù)廣泛應(yīng)用于不同行業(yè)的用戶界面研究。劉淼[10]選取5種工業(yè)氣體檢測(cè)設(shè)備，對(duì)人機(jī)界面進(jìn)行可用性評(píng)估，提出改進(jìn)意見，提升了產(chǎn)品用戶體驗(yàn)；GRISON等[11]通過交通網(wǎng)絡(luò)地圖使用過程中用戶所涉及的心理過程和機(jī)制調(diào)研，提出網(wǎng)絡(luò)地圖的改進(jìn)建議；李曉英等[12]利用眼動(dòng)追蹤對(duì)自助掛號(hào)機(jī)交互界面原型進(jìn)行定量績(jī)效測(cè)試，提取出該界面的改良要素，并指導(dǎo)改良；金海哲等[13]研究了生理指標(biāo)、眼動(dòng)指標(biāo)對(duì)智能觸摸設(shè)備使用績(jī)效的影響，建立使用績(jī)效影響模型；錢麗娜等[14]研究挖泥船定位監(jiān)控界面不同顏色編碼在不同條件下的影響情況，得出在實(shí)際界面設(shè)計(jì)中，顏色編碼需要綜合各方面因素的結(jié)論。從上述研究可以發(fā)現(xiàn)，眼動(dòng)技術(shù)在交通、醫(yī)療器械、電子設(shè)備、船舶行業(yè)均有涉獵，但與皮革檢測(cè)行業(yè)相關(guān)的信息交互實(shí)驗(yàn)未涉獵。

因此本文以眼動(dòng)實(shí)驗(yàn)數(shù)據(jù)為支撐，探討眼動(dòng)實(shí)驗(yàn)數(shù)據(jù)輔助膠原纖維熱形變分析儀TMA用戶界面的優(yōu)化設(shè)計(jì)。

3 眼動(dòng)實(shí)驗(yàn)

3.1 實(shí)驗(yàn)?zāi)繕?biāo)

驗(yàn)證T型布局、上下型布局以及藍(lán)、白背景用戶界面的視覺搜索效率。

3.2 實(shí)驗(yàn)準(zhǔn)備

受試者為10名皮革工程專業(yè)在校生，均有使用皮革收縮溫度檢測(cè)儀器經(jīng)驗(yàn)。實(shí)驗(yàn)設(shè)備為Tobii X2-30眼動(dòng)儀，采樣頻率為30 Hz，Ergolab 3.0同步平臺(tái)對(duì)數(shù)據(jù)進(jìn)行采集和整理。

3.3 實(shí)驗(yàn)材料

選用研究者自主設(shè)計(jì)的2款用戶界面作為實(shí)驗(yàn)材料(圖3)，以不同的用戶界面為自變量，眼動(dòng)指標(biāo)為因變量，探究影響用戶體驗(yàn)的因素。

(1) 設(shè)計(jì)方案A (圖3(a)和(b))：上下框架型，上方為按鈕區(qū)，背景色不同(藍(lán)A1白A2)；

(2) 設(shè)計(jì)方案B (圖3(c)和(d))：T字型布局，頁面左側(cè)為按鈕區(qū)，背景色不同(藍(lán)B1白B2)；

圖3 用戶界面圖((a)設(shè)計(jì)方案A1；(b)設(shè)計(jì)方案A2；(c)設(shè)計(jì)方案B1；(d)設(shè)計(jì)方案B2；(e)原版界面C)

(3) 膠原纖維熱形變分析儀TMA原版界面C (圖3(e))：左右框架型，右下角為按鈕區(qū)，背景色為白色。

3.4 實(shí)驗(yàn)任務(wù)

依照用戶界面各區(qū)域的位置和膠原纖維熱形變分析儀TMA的功能區(qū)使用頻率，指定實(shí)驗(yàn)任務(wù)，見表1。

表1 眼動(dòng)實(shí)驗(yàn)典型任務(wù)

3.5 實(shí)驗(yàn)流程

為保證本次實(shí)驗(yàn)的有效性，實(shí)驗(yàn)均在無外界干擾的同一環(huán)境中進(jìn)行，圖4為實(shí)驗(yàn)流程圖。

圖4 實(shí)驗(yàn)流程

3.6 數(shù)據(jù)分析

本研究運(yùn)用SPSS Statistics25，對(duì)同組和異組間方案的眼動(dòng)數(shù)據(jù)進(jìn)行統(tǒng)計(jì)分析，置信度為95%，Sig.小于0.05為存在顯著性差異。

在選取界面設(shè)計(jì)評(píng)價(jià)的眼動(dòng)指標(biāo)，邀請(qǐng)人因工程專家3名，通過打分得出各影響因素的綜合評(píng)分，選取以下眼動(dòng)指標(biāo)：

(1) 總注視時(shí)間。指在一個(gè)興趣區(qū)內(nèi)的總注視時(shí)間，反映了對(duì)該興趣區(qū)的關(guān)注程度及信息的加工難度。受試完成任務(wù)所需要的總時(shí)間，時(shí)間越短，說明交互界面的可讀性、可識(shí)別性越強(qiáng)，受試能在交互界面進(jìn)行快速地搜索、認(rèn)知和加工，反之亦然。

(2) 首次注視時(shí)間。落在興趣區(qū)即目標(biāo)區(qū)域內(nèi)的第一個(gè)注視點(diǎn)的持續(xù)時(shí)間，反映興趣區(qū)信息的加工難度，時(shí)間越短，說明認(rèn)知難度越容易，反之則越難。

(3) 注視次數(shù)。在一個(gè)興趣區(qū)內(nèi)注視的總次數(shù)，反映對(duì)某個(gè)興趣區(qū)的關(guān)注程度及信息的加工難度，注視點(diǎn)過多表示界面布局不合理，元素排列不當(dāng)，瀏覽效率較低[15]。

3.7 結(jié)果分析

以眼動(dòng)數(shù)據(jù)總注視時(shí)間驗(yàn)證背景顏色對(duì)界面設(shè)計(jì)的影響，以首次注視時(shí)間驗(yàn)證布局結(jié)構(gòu)對(duì)界面設(shè)計(jì)的影響。各項(xiàng)眼動(dòng)數(shù)值見表2。

(1) 不同背景色分析為控制變量，故對(duì)同一布局、不同背景色的設(shè)計(jì)方案的總注視時(shí)間同組間檢驗(yàn)，見表3。

A1與A2的總注視時(shí)間存在顯著性差異，不同背景色的用戶界面存在差異，A1各項(xiàng)數(shù)值優(yōu)于A2；B1與B2的總注視時(shí)間不存在顯著性差異，不同背景色的用戶界面不存在差異，B1各項(xiàng)數(shù)值優(yōu)于B2。布局相同，背景顏色確實(shí)影響用戶認(rèn)知，以總注視時(shí)間為評(píng)價(jià)標(biāo)準(zhǔn)，藍(lán)色的界面優(yōu)于白色背景的界面。

在表4中，A1與C之間的總注視時(shí)間存在顯著性差異，藍(lán)色背景的界面和原版界面存在非常明顯的差異；B1與C的總注視時(shí)間存在顯著性差異，藍(lán)色背景的和原版界面存在明顯差異。布局不同，藍(lán)色背景界面完成任務(wù)的速度優(yōu)于白色背景界面。

A1和B1與C均存在差異，故對(duì)A1和B1再次檢驗(yàn)，結(jié)果表明，A1和B1的總注視時(shí)間存在顯著差異，且B1的各項(xiàng)指標(biāo)均優(yōu)于A1。

因此，在用戶界面設(shè)計(jì)中，顏色因素對(duì)視覺識(shí)別效率有影響，顏色越明顯搜索時(shí)間越快，可識(shí)別性、可讀性越強(qiáng)，任務(wù)耗時(shí)縮短、認(rèn)知難度降低。

表2 眼動(dòng)數(shù)據(jù)統(tǒng)計(jì)數(shù)據(jù)

表3 同組間總注視時(shí)間t檢驗(yàn)

表4 不同組間總注視時(shí)間檢驗(yàn)

Table 4 Total fixation time t test among different groups

注：顯著性水平=0.05

(2) 不同布局分析。不同背景色及不同布局結(jié)構(gòu)均會(huì)影響用戶認(rèn)知。相同背景色、不同布局的設(shè)計(jì)方案首次注視時(shí)間同組間檢驗(yàn)，見表5。A1與B1存在顯著性差異，藍(lán)色背景相同、布局不同的界面在首次注視時(shí)間上存在差異；A2與B2不存在顯著性差異，白色背景相同、布局不同的用戶界面在首次注視時(shí)間上不存在明顯差異。背景色相同，布局結(jié)構(gòu)不同的界面影響了用戶認(rèn)知水平。

表5 同組間首次注視時(shí)間t檢驗(yàn)

A1與B1首次注視時(shí)間存在顯著性差異，且A1和B1注視次數(shù)的各項(xiàng)數(shù)值均優(yōu)于A2和B2，故驗(yàn)證不同組間A1與C、B1與C是否存在差異，見表6。

表6 不同組間首次注視時(shí)間t檢驗(yàn)

注：顯著性水平=0.05

A1與C存在顯著性差異，上下型布局的界面和原版界面的首次注視時(shí)間存在明顯差異；B1與C兩者存在顯著性差異，T型布局界面和原版界面的首次注視時(shí)間存在明顯差異。

設(shè)計(jì)方案與原版界面的首次注視時(shí)間存在差異，新設(shè)計(jì)方案的首次注視時(shí)間優(yōu)于原版界面。

A1與C、B1與C均存在差異，A1和B1首次注視時(shí)間、注視次數(shù)的各項(xiàng)指標(biāo)均優(yōu)于C，B1優(yōu)于A1，說明背景顏色相同，T型布局的可讀性、可識(shí)別性優(yōu)于上下型布局，用戶能在藍(lán)色背景、T型布局的用戶界面中進(jìn)行快速的任務(wù)搜索和認(rèn)知，這與問卷調(diào)查的結(jié)果一致。

(3) 熱區(qū)圖分析。熱區(qū)圖，反應(yīng)該區(qū)域的持續(xù)關(guān)注時(shí)間，持續(xù)時(shí)間越久，說明該區(qū)域的特征元素受到用戶的關(guān)注越多。熱點(diǎn)圖中紅色為關(guān)注時(shí)間最長(zhǎng)，綠色為關(guān)注時(shí)間最短，黃色區(qū)域表示關(guān)注較少。

由圖5可知，視覺熱點(diǎn)主要集中在任務(wù)目標(biāo)區(qū)域，關(guān)注時(shí)間長(zhǎng)，除目標(biāo)區(qū)域外的其他區(qū)域關(guān)注較少，藍(lán)色背景界面比白色背景界面熱點(diǎn)更為集中。任務(wù)4相較其他任務(wù)難度較大，受試者在界面搜索時(shí)間延長(zhǎng)，注視時(shí)間拉長(zhǎng)，因此在各個(gè)界面的熱點(diǎn)分布較廣。任務(wù)目標(biāo)區(qū)域熱點(diǎn)最集中，在試樣區(qū)、曲線圖區(qū)也有少量熱點(diǎn)分布，表明在操作過程中受試者對(duì)2個(gè)區(qū)域也有關(guān)注，后續(xù)也需對(duì)其進(jìn)行優(yōu)化。

圖5 部分任務(wù)熱區(qū)圖((a)任務(wù)2熱區(qū)圖；(b)任務(wù)3熱區(qū)圖；(c)任務(wù)1熱區(qū)圖；(d)任務(wù)4熱區(qū)圖)

4 設(shè)計(jì)討論

4.1 儀器類用戶界面設(shè)計(jì)優(yōu)化意見

(1) 專業(yè)性指向明確。在儀器類用戶界面設(shè)計(jì)前期，設(shè)計(jì)師應(yīng)考慮儀器界面的專業(yè)性、特殊性，icon易識(shí)易用，符合儀器適用行業(yè)。使用行業(yè)人員熟悉或大眾熟知的圖標(biāo)元素，以免因認(rèn)知錯(cuò)誤造成操作失誤；色彩搭配考慮適用行業(yè)的特殊性、公司企業(yè)的獨(dú)特性。

在本次膠原纖維熱形變分析儀TMA的優(yōu)化界面中，為功能區(qū)的按鈕添加易識(shí)易用的小型圖標(biāo)，圖文結(jié)合，增加可讀性；藍(lán)色標(biāo)志表明儀器適用于嚴(yán)謹(jǐn)?shù)目蒲行袠I(yè)，圖文標(biāo)志皆指向明確，說明儀器是陽光電子研究所的專屬產(chǎn)品，整體界面主色調(diào)選擇研究所標(biāo)志的科技深藍(lán)主題色；輔助色選擇識(shí)別性比較強(qiáng)的中灰色，對(duì)比明顯、易于識(shí)別。

(2) 布局風(fēng)格匹配所適用的用戶群體及所屬行業(yè)。不同的布局風(fēng)格總會(huì)潛移默化地影響使用者的用戶體驗(yàn)。設(shè)計(jì)師除了要考慮所屬行業(yè)的特殊性，還需仔細(xì)考量界面的布局類型、風(fēng)格特征等，選擇合適、恰當(dāng)?shù)牟季诛L(fēng)格，讓使用者有一個(gè)良好的用戶體驗(yàn)。建議在設(shè)計(jì)前期，做簡(jiǎn)單的測(cè)試、調(diào)查，了解用戶群喜好，使設(shè)計(jì)更有針對(duì)性。

本次眼動(dòng)實(shí)驗(yàn)分別采用藍(lán)、白色背景來驗(yàn)證T型和上下型布局完成實(shí)驗(yàn)用時(shí)長(zhǎng)短，以此說明界面的可用性。實(shí)驗(yàn)結(jié)果證明，T型、藍(lán)色背景界面的任務(wù)完成時(shí)間、首次注視時(shí)間以及注視點(diǎn)數(shù)均優(yōu)于對(duì)照組(上下型、白色背景)。故而對(duì)T型、藍(lán)色背景的界面(即設(shè)計(jì)方案B1)進(jìn)行優(yōu)化設(shè)計(jì)，并再一次進(jìn)行對(duì)比實(shí)驗(yàn)。

(3) 功能分區(qū)主次分明。在儀器類用戶界面設(shè)計(jì)中，設(shè)計(jì)師需對(duì)主、次區(qū)域進(jìn)行合理布局安排，使用頻繁、功能性較強(qiáng)的區(qū)域著重設(shè)計(jì)，布局安排符合行業(yè)人員使用規(guī)范及習(xí)慣，不能僅憑設(shè)計(jì)師主觀喜好而設(shè)計(jì)。

膠原纖維熱形變分析儀TMA的優(yōu)化界面中，對(duì)3大功能區(qū)重新組合排列，重要的按鈕區(qū)域設(shè)置在界面左側(cè)，符合人眼從左到右的閱讀習(xí)慣，單一按鈕依據(jù)使用頻率前后排列，常用在前，少用在后；占比最大的曲線區(qū)域放置于界面正中心，曲線隨加熱時(shí)長(zhǎng)的變化而實(shí)時(shí)顯示，便于使用者直觀檢測(cè)樣品變化；右側(cè)的試樣數(shù)據(jù)區(qū)保持不變，試樣在上、數(shù)據(jù)顯示在下，試樣增加3D效果，模擬真實(shí)形態(tài)變化，可隨實(shí)驗(yàn)進(jìn)程拉長(zhǎng)或縮短。

(4) 界面布局符合規(guī)范且統(tǒng)一。各區(qū)域、各模塊的字體、間距、按鈕、對(duì)齊方式遵循頁面設(shè)計(jì)規(guī)范，統(tǒng)一有序，字體、字號(hào)大小符合當(dāng)前頁面標(biāo)準(zhǔn)。各功能區(qū)的間距過寬或過窄可導(dǎo)致用戶認(rèn)知障礙，按鈕過大或太小、邊緣不齊均易導(dǎo)致界面比例失調(diào)，因此要根據(jù)界面尺寸合理安排布局，遵循設(shè)計(jì)規(guī)范。

膠原纖維熱形變分析儀TMA的優(yōu)化界面中，字體選擇界面設(shè)計(jì)常用字體——黑體，字號(hào)大小適頁面標(biāo)準(zhǔn)而定；各功能區(qū)之間的間距根據(jù)界面尺寸定為5 mm，對(duì)齊各功能區(qū)邊緣，保持界面統(tǒng)一、規(guī)范。

4.2 膠原纖維熱形變分析儀TMA用戶界面設(shè)計(jì)方案

被試者參與問卷調(diào)查。統(tǒng)計(jì)結(jié)果表明，55%的受試者認(rèn)為方案B1的布局結(jié)構(gòu)更好，70%認(rèn)為有背景色的界面更易于讀取信息，90%更傾向于功能區(qū)的按鈕式樣需要圖文結(jié)合。

根據(jù)眼動(dòng)實(shí)驗(yàn)結(jié)果與問卷調(diào)查可知，T型布局、藍(lán)色背景的設(shè)計(jì)方案在搜索時(shí)間、首次注視時(shí)間、注視次數(shù)明顯優(yōu)于其他備選方案，因此最終優(yōu)化設(shè)計(jì)方案以B1為基礎(chǔ)進(jìn)行優(yōu)化設(shè)計(jì)(圖6)。

根據(jù)問卷及眼動(dòng)實(shí)驗(yàn)結(jié)果，進(jìn)行新的膠原纖維熱形變分析儀TMA界面優(yōu)化設(shè)計(jì)，通過眼動(dòng)技術(shù)再次驗(yàn)證。

以B1為基礎(chǔ)進(jìn)行優(yōu)化設(shè)計(jì)的最終設(shè)計(jì)方案，通過配對(duì)樣本檢驗(yàn)以及描述統(tǒng)計(jì)分析，探討二次改良后被試者完成任務(wù)的總時(shí)間、首次注視時(shí)間和注視次數(shù)是否具有顯著性差異，分析結(jié)果見表7。

表7中，改良前完成任務(wù)所需的平均時(shí)間為93.80 s，改良后為82.46 s，比改良前減少了11.34 s，改良后的界面有較大改善；改良前完成任務(wù)的首次注視時(shí)間平均值是1.21 s，改良后的平均值是1.11 s，改良前、后首次注視時(shí)間差距雖小，但后者仍有變化；改良前平均注視次數(shù)是16.38，改良后是14.45，比改良前減少了1.93。對(duì)改良前、后的界面進(jìn)行檢驗(yàn)，其顯著性水平低于0.05，說明改良后的用戶界面完成任務(wù)的總時(shí)間、首次注視時(shí)間、注視次數(shù)與改良前存在顯著性差異，再次證明改良后的界面是有效的。

圖6 最終設(shè)計(jì)方案

表7 改良前、后數(shù)據(jù)對(duì)比

5 結(jié)束語

合理的膠原纖維熱形變分析儀TMA用戶界面是提高皮革收縮檢測(cè)效率的保障?；谘蹌?dòng)追蹤技術(shù)對(duì)TMA用戶界面進(jìn)行可用性測(cè)試，T型布局優(yōu)于上下型布局，藍(lán)色背景優(yōu)于白色背景，提出儀器儀表類用戶界面設(shè)計(jì)優(yōu)化意見，為儀器儀表類的界面設(shè)計(jì)研究提供理論參考。

本研究還存在不足，如研究缺乏動(dòng)態(tài)原型測(cè)試，僅從設(shè)計(jì)原型實(shí)驗(yàn)獲取的數(shù)據(jù)無法說明交互的合理性、可用性；數(shù)據(jù)分析采用的算法也較簡(jiǎn)單；此外，由于受試者的瀏覽習(xí)慣不同，部分瀏覽時(shí)間偏長(zhǎng)，影響后續(xù)實(shí)驗(yàn)數(shù)據(jù)，具體影響還需進(jìn)一步研究。

[1] 曹繼春. 改進(jìn)型數(shù)字皮革收縮溫度測(cè)定儀的研究[D]. 西安: 陜西科技大學(xué), 2018.

CAO J C. Research on improved digital leather shrinkage temperature measuring instrument[D]. Xi'an: Shaanxi University of Science & Technology, 2018 (in Chinese).

[2] International Organization for Standardization. 1SO9241-11l: ergonomic requirements for office work with visual display terminals VI DTs: Part ll: guidance on usability [EB/OL]. [2021-06-01]. https://www.iso.org/standard/16883.html.

[3] HARTSON H R. Human-computer interaction: interdisciplinary roots and trends[J]. Journal of System and Software, 1998, 43(2): 103-118.

[4] 李淑江, 孔鵬宇, 竇如宏, 等. 游艇關(guān)鍵造型特征的眼動(dòng)追蹤研究[J]. 包裝工程, 2020, 41(24): 91-97, 117.

LI S J, KONG P Y, DOU R H, et al. Eye tracking on key modeling features of yachts[J]. Packaging Engineering, 2020, 41(24): 91-97, 117 (in Chinese).

[5] 潘飛, 姜可, 王東琦. 基于眼動(dòng)追蹤技術(shù)的購(gòu)票網(wǎng)站可用性設(shè)計(jì)研究[J]. 包裝工程, 2020, 41(24): 243-247.

PAN F, JIANG K, WANG D Q. Usability design of ticket purchase website based on eye tracking[J]. Packaging Engineering, 2020, 41(24): 243-247 (in Chinese).

[6] 張喆, 韓貝貝, 孫林輝, 等. 工商銀行網(wǎng)頁理財(cái)頁面可用性的眼動(dòng)研究[J]. 人類工效學(xué), 2019, 25(1): 65-71.

ZHANG Z, HAN B B, SUN L H, et al. Eye movement research on the usability of ICBC web financial page[J]. Chinese Journal of Ergonomics, 2019, 25(1): 65-71 (in Chinese).

[7] 王文娟, 張碧含, 符夢(mèng)婷, 等. 無人物流車的車外屏人機(jī)界面設(shè)計(jì)研究[J]. 圖學(xué)學(xué)報(bào), 2020, 41(3): 335-341.

WANG W J, ZHANG B H, FU M T, et al. Research on human-machine interface design of exterior screen of driverless delivery car[J]. Journal of Graphics, 2020, 41(3): 335-341 (in Chinese).

[8] 楊新湦, 王茜. 眼動(dòng)指標(biāo)、管制負(fù)荷及航空器動(dòng)態(tài)特征之間的相關(guān)性分析[J]. 科學(xué)技術(shù)與工程, 2018, 18(15): 333-340.

YANG X S, WANG Q. The correlation analysis of eye movement indicators, controler’s workload and aircraft dynamics[J]. Science Technology and Engineering, 2018, 18(15): 333-340 (in Chinese).

[9] 王苗輝, 李艷, 宋武, 等. 基于科學(xué)實(shí)驗(yàn)的人機(jī)交互界面設(shè)計(jì)研究: 以格力空調(diào)為例[J]. 圖學(xué)學(xué)報(bào), 2019, 40(1): 181-185.

WANG M H, LI Y, SONG W, et al. Research on man-machine interface design based on scientific experiment—a case study of the improved design of gree air conditioner interface[J]. Journal of Graphics, 2019, 40(1): 181-185 (in Chinese).

[10] 劉淼. 工業(yè)氣體檢測(cè)設(shè)備的人機(jī)界面可用性評(píng)估[J]. 機(jī)械設(shè)計(jì), 2018, 35(4): 123-128.

LIU M. HCI feasibility evaluation of the industrial gas detector[J]. Journal of Machine Design, 2018, 35(4): 123-128 (in Chinese).

[11] GRISON E, GYSELINCK V, BURKHARDT J-M , et al. Route planning with transportation network maps: an eye-tracking study[J]. Psychological Research, 2017, 81: 1020-1034.

[12] 李曉英, 周大濤, 黃楚, 等. 基于眼動(dòng)追蹤的自助掛號(hào)機(jī)界面可用性設(shè)計(jì)研究[J]. 機(jī)械設(shè)計(jì)與制造, 2018(8): 145-148.

LI X Y, ZHOU D T, HUANG C, et al. Interface usability design of self-service registration device based on eye tracking[J]. Machinery Design & Manufacture, 2018(8): 145-148 (in Chinese).

[13] 金海哲, 吳一凡, 屈慶星, 等. 基于生理與眼動(dòng)指標(biāo)的智能觸摸設(shè)備使用績(jī)效的評(píng)價(jià)研究[J]. 工業(yè)工程與管理, 2020, 25(4): 166-172.

JIN H Z, WU Y F, QU Q X, et al. The research on using performance for smart touch devices based on physiology and eye tracker metrics[J]. Industrial Engineering and Management, 2020, 25(4): 166-172 (in Chinese).

[14] 錢麗娜, 倪福生, 吳曉莉, 等. 挖泥船監(jiān)控界面的顏色編碼實(shí)驗(yàn)研究[J]. 機(jī)械設(shè)計(jì)與制造, 2020(1): 285-287, 292.

QIAN L N, NI F S, WU X L, et al. Experimental study on color encoding of dredger monitoring-interface[J]. Machinery Design & Manufacture, 2020(1): 285-287, 292 (in Chinese).

[15] 孫林輝, 韓貝貝, 張偉. 基于眼動(dòng)實(shí)驗(yàn)的英語學(xué)習(xí)類手機(jī)APP界面設(shè)計(jì)評(píng)價(jià)[J]. 人類工效學(xué), 2021, 27(2): 1-8.

SUN L H, HAN B B, ZHANG W. Evaluation of mobile APP interface design for English learning based on eye movement experiment[J]. Chinese Journal of Ergonomics, 2021, 27(2):

Evaluation and optimization of TMA interface supported eye movement technology

DUAN Yan-hua1, LIU Zi-jian1, NING Duo2

(1. College of Art and Design, Shaanxi University of Science and Technology, Xi’an Shaanxi 710021, China; 2. College of Electrical and Information Engineering, Shaanxi University of Science and Technology, Xi’an Shaanxi 710021, China)

Usability evaluation was performed for the collagen fiber thermal deformation analyzer TMA (temperature machine analyzer) user interface using eye-tracking technology, and an optimized design solution was proposed. Taking the existing collagen fiber thermal deformation analyzer TMA interface as a prototype, under experts’ guidance, four design elements were selected, and two user interfaces with different styles were redesigned. Eye movement experiments were performed, eye movement data was collected, and SPSS was employed to conduct data analysis. Combined with questionnaire surveys, the usability was evaluated in terms of background color and layout types of the user interfaces. The analyzer’s program background color and layout types could affect the experience of tested users. The T-shaped layout outperformed the upper and lower frame layout in all aspects. The TMA user interface of the collagen fiber thermal deformation analyzer was optimized by the eye tracking technology. It optimized the deficiencies of the experience-based designers who subjectively designed the original interface, and proposed the design principles for the program of experimental instruments. It could thus shed lights on the concepts for the interactive interface style of the experimental instrument and enhance the soundness and rationality of the design.

human-machine interaction; TMA interface of collagen fiber thermal deformation analyzer; eye movement test; interface optimization

21 November，2021；

Major Scientific and Technological Projects in Shaanxi Province (in the Field of Social Development) (2017ZDXM-SF-035)

DUAN Yan-hua (1996-), master student. Her main research interests cover product and interaction design. E-mail：969693924@qq.com

TB 472

10.11996/JG.j.2095-302X.2022040745

A

2095-302X(2022)04-0745-08

2021-11-21；

2022-02-18

18 February，2022

陜西省科技統(tǒng)籌型重大項(xiàng)目(社會(huì)發(fā)展領(lǐng)域) (2017ZDXM-SF-035)

段艷花(1996-)，女，碩士研究生。主要研究方向?yàn)楫a(chǎn)品與交互設(shè)計(jì)。E-mail：969693924@qq.com

劉子建(1963-)，男，教授，碩士。主要研究方向?yàn)樵O(shè)計(jì)藝術(shù)學(xué)工業(yè)設(shè)計(jì)方向。E-mail：liuzj@sust.edu.cn

1-8 (in Chinese).

LIU Zi-jian (1963-), professor, master. His main research interests cover design art industrial design direction. E-mail：liuzj@sust.edu.cn