基于眼動技術的TMA界面評估及優化

段艷花，劉子建，寧 鐸

基于眼動技術的TMA界面評估及優化

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

(1. 陜西科技大學設計與藝術學院，陜西 西安 710021；2. 陜西科技大學電氣與信息工程學院，陜西 西安 710021)

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

人機交互；膠原纖維熱形變分析儀TMA用戶界面；眼動測試；界面優化

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

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

1.1 定義與界面構成

膠原纖維熱形變分析儀TMA是一種用于檢測皮革收縮溫度的主要實驗工具，不僅適用于皮革領域，還適用于生物醫學工程領域(皮膚、心臟瓣膜、血管)等以膠原纖維為特征材質的熱穩定性測試。

膠原纖維熱形變分析儀TMA的用戶界面由4部分組成：①曲線圖區(顯示溫度、試樣長度、時長)；②試樣數據區；③按鈕區(可依設定關鍵數據)；④頂部狀態區(顯示檢測時間、實時溫度和工作狀態)，如圖1所示。

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

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

圖1 膠原纖維熱形變分析儀TMA-YD4型用戶界面結構圖

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

1.3 當前界面存在問題

經實地考察，并與專家用戶、初級用戶深入訪談、溝通，明確研究方向，對當前儀器用戶界面進行初次眼動實驗，以檢測現有儀器用戶界面的使用效率是否達到預期、其布局安排是否符合特定用戶群體的操作習慣。經實驗得出當前界面存在以下問題：

(1) 專業指向性有待加強。該實驗儀器僅供皮革檢測為例的專業用戶使用，在形式、文字、色彩等表現形式上與普通儀器的界面有所區別。

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

(3) 整體界面布局缺乏一致性。各模塊布局違背對齊原則，上下邊界不統一，試樣區和操作功能區的位置范圍超出當前以左為標準的規范，整體界面布局失去平衡。

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

2 可用性評估與眼動追蹤技術

2.1 可用性評估

根據國際定義，可用性指：在特定環境下，特定用戶使用特定產品完成任務時的有效性、效率和主觀滿意度[2]。可用性評估是一個通過分析用戶界面的可用性數值，以此為基礎對交互界面進行改進優化的過程。HARTSON[3]認為，評估產品界面或設計原型的可用性，對原界面改進或原型迭代具有實踐價值。可用性評估，既能改進現有產品界面的缺陷，又能在設計新的界面時揚長避短，為后續產品界面或產品原型迭代提供參考價值。

2.2 眼動追蹤技術在用戶界面中的應用

眼動追蹤技術是以機械視覺技術，記錄用戶的眼球運動軌跡，探究用戶心理活動的技術手段[4]。眼動追蹤技術，記錄受試者處理視覺信息的眼睛注視時長、注視點和運動軌跡，探究受試者的認知流程、心理活動和操作習慣等。當前，眼動追蹤技術在心理學、認知語言學、體育學、設計學等諸多學科均有涉獵，應用于產品可用性測試[5]、網頁測試[6]、動態分析(汽車駕駛[7]、航天航空[8]等)、人機交互[9]等多領域。

眼動追蹤技術介入儀器類用戶界面測試，分析用戶進入界面完成操作任務的注視時間、追蹤軌跡、熱點分布等，科學、理性研究分析已有界面不足，優化當前界面，以此構建評價體系或迭代設計模型。對現有的儀器界面優化改進，以實現功能要求的基礎上，降低因認知困難造成的誤操作，并通過嚴謹性、規范化的界面設計降低認知困難，增強用戶體驗。

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

因此本文以眼動實驗數據為支撐，探討眼動實驗數據輔助膠原纖維熱形變分析儀TMA用戶界面的優化設計。

3 眼動實驗

3.1 實驗目標

驗證T型布局、上下型布局以及藍、白背景用戶界面的視覺搜索效率。

3.2 實驗準備

受試者為10名皮革工程專業在校生，均有使用皮革收縮溫度檢測儀器經驗。實驗設備為Tobii X2-30眼動儀，采樣頻率為30 Hz，Ergolab 3.0同步平臺對數據進行采集和整理。

3.3 實驗材料

選用研究者自主設計的2款用戶界面作為實驗材料(圖3)，以不同的用戶界面為自變量，眼動指標為因變量，探究影響用戶體驗的因素。

(1) 設計方案A (圖3(a)和(b))：上下框架型，上方為按鈕區，背景色不同(藍A1白A2)；

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

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

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

3.4 實驗任務

依照用戶界面各區域的位置和膠原纖維熱形變分析儀TMA的功能區使用頻率，指定實驗任務，見表1。

表1 眼動實驗典型任務

3.5 實驗流程

為保證本次實驗的有效性，實驗均在無外界干擾的同一環境中進行，圖4為實驗流程圖。

圖4 實驗流程

3.6 數據分析

本研究運用SPSS Statistics25，對同組和異組間方案的眼動數據進行統計分析，置信度為95%，Sig.小于0.05為存在顯著性差異。

在選取界面設計評價的眼動指標，邀請人因工程專家3名，通過打分得出各影響因素的綜合評分，選取以下眼動指標：

(1) 總注視時間。指在一個興趣區內的總注視時間，反映了對該興趣區的關注程度及信息的加工難度。受試完成任務所需要的總時間，時間越短，說明交互界面的可讀性、可識別性越強，受試能在交互界面進行快速地搜索、認知和加工，反之亦然。

(2) 首次注視時間。落在興趣區即目標區域內的第一個注視點的持續時間，反映興趣區信息的加工難度，時間越短，說明認知難度越容易，反之則越難。

(3) 注視次數。在一個興趣區內注視的總次數，反映對某個興趣區的關注程度及信息的加工難度，注視點過多表示界面布局不合理，元素排列不當，瀏覽效率較低[15]。

3.7 結果分析

以眼動數據總注視時間驗證背景顏色對界面設計的影響，以首次注視時間驗證布局結構對界面設計的影響。各項眼動數值見表2。

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

A1與A2的總注視時間存在顯著性差異，不同背景色的用戶界面存在差異，A1各項數值優于A2；B1與B2的總注視時間不存在顯著性差異，不同背景色的用戶界面不存在差異，B1各項數值優于B2。布局相同，背景顏色確實影響用戶認知，以總注視時間為評價標準，藍色的界面優于白色背景的界面。

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

A1和B1與C均存在差異，故對A1和B1再次檢驗，結果表明，A1和B1的總注視時間存在顯著差異，且B1的各項指標均優于A1。

因此，在用戶界面設計中，顏色因素對視覺識別效率有影響，顏色越明顯搜索時間越快，可識別性、可讀性越強，任務耗時縮短、認知難度降低。

表2 眼動數據統計數據

表3 同組間總注視時間t檢驗

表4 不同組間總注視時間檢驗

Table 4 Total fixation time t test among different groups

注：顯著性水平=0.05

(2) 不同布局分析。不同背景色及不同布局結構均會影響用戶認知。相同背景色、不同布局的設計方案首次注視時間同組間檢驗，見表5。A1與B1存在顯著性差異，藍色背景相同、布局不同的界面在首次注視時間上存在差異；A2與B2不存在顯著性差異，白色背景相同、布局不同的用戶界面在首次注視時間上不存在明顯差異。背景色相同，布局結構不同的界面影響了用戶認知水平。

表5 同組間首次注視時間t檢驗

A1與B1首次注視時間存在顯著性差異，且A1和B1注視次數的各項數值均優于A2和B2，故驗證不同組間A1與C、B1與C是否存在差異，見表6。

表6 不同組間首次注視時間t檢驗

注：顯著性水平=0.05

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

設計方案與原版界面的首次注視時間存在差異，新設計方案的首次注視時間優于原版界面。

A1與C、B1與C均存在差異，A1和B1首次注視時間、注視次數的各項指標均優于C，B1優于A1，說明背景顏色相同，T型布局的可讀性、可識別性優于上下型布局，用戶能在藍色背景、T型布局的用戶界面中進行快速的任務搜索和認知，這與問卷調查的結果一致。

(3) 熱區圖分析。熱區圖，反應該區域的持續關注時間，持續時間越久，說明該區域的特征元素受到用戶的關注越多。熱點圖中紅色為關注時間最長，綠色為關注時間最短，黃色區域表示關注較少。

由圖5可知，視覺熱點主要集中在任務目標區域，關注時間長，除目標區域外的其他區域關注較少，藍色背景界面比白色背景界面熱點更為集中。任務4相較其他任務難度較大，受試者在界面搜索時間延長，注視時間拉長，因此在各個界面的熱點分布較廣。任務目標區域熱點最集中，在試樣區、曲線圖區也有少量熱點分布，表明在操作過程中受試者對2個區域也有關注，后續也需對其進行優化。

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

4 設計討論

4.1 儀器類用戶界面設計優化意見

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

在本次膠原纖維熱形變分析儀TMA的優化界面中，為功能區的按鈕添加易識易用的小型圖標，圖文結合，增加可讀性；藍色標志表明儀器適用于嚴謹的科研行業，圖文標志皆指向明確，說明儀器是陽光電子研究所的專屬產品，整體界面主色調選擇研究所標志的科技深藍主題色；輔助色選擇識別性比較強的中灰色，對比明顯、易于識別。

(2) 布局風格匹配所適用的用戶群體及所屬行業。不同的布局風格總會潛移默化地影響使用者的用戶體驗。設計師除了要考慮所屬行業的特殊性，還需仔細考量界面的布局類型、風格特征等，選擇合適、恰當的布局風格，讓使用者有一個良好的用戶體驗。建議在設計前期，做簡單的測試、調查，了解用戶群喜好，使設計更有針對性。

本次眼動實驗分別采用藍、白色背景來驗證T型和上下型布局完成實驗用時長短，以此說明界面的可用性。實驗結果證明，T型、藍色背景界面的任務完成時間、首次注視時間以及注視點數均優于對照組(上下型、白色背景)。故而對T型、藍色背景的界面(即設計方案B1)進行優化設計，并再一次進行對比實驗。

(3) 功能分區主次分明。在儀器類用戶界面設計中，設計師需對主、次區域進行合理布局安排，使用頻繁、功能性較強的區域著重設計，布局安排符合行業人員使用規范及習慣，不能僅憑設計師主觀喜好而設計。

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

(4) 界面布局符合規范且統一。各區域、各模塊的字體、間距、按鈕、對齊方式遵循頁面設計規范，統一有序，字體、字號大小符合當前頁面標準。各功能區的間距過寬或過窄可導致用戶認知障礙，按鈕過大或太小、邊緣不齊均易導致界面比例失調，因此要根據界面尺寸合理安排布局，遵循設計規范。

膠原纖維熱形變分析儀TMA的優化界面中，字體選擇界面設計常用字體——黑體，字號大小適頁面標準而定；各功能區之間的間距根據界面尺寸定為5 mm，對齊各功能區邊緣，保持界面統一、規范。

4.2 膠原纖維熱形變分析儀TMA用戶界面設計方案

被試者參與問卷調查。統計結果表明，55%的受試者認為方案B1的布局結構更好，70%認為有背景色的界面更易于讀取信息，90%更傾向于功能區的按鈕式樣需要圖文結合。

根據眼動實驗結果與問卷調查可知，T型布局、藍色背景的設計方案在搜索時間、首次注視時間、注視次數明顯優于其他備選方案，因此最終優化設計方案以B1為基礎進行優化設計(圖6)。

根據問卷及眼動實驗結果，進行新的膠原纖維熱形變分析儀TMA界面優化設計，通過眼動技術再次驗證。

以B1為基礎進行優化設計的最終設計方案，通過配對樣本檢驗以及描述統計分析，探討二次改良后被試者完成任務的總時間、首次注視時間和注視次數是否具有顯著性差異，分析結果見表7。

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

圖6 最終設計方案

表7 改良前、后數據對比

5 結束語

合理的膠原纖維熱形變分析儀TMA用戶界面是提高皮革收縮檢測效率的保障。基于眼動追蹤技術對TMA用戶界面進行可用性測試，T型布局優于上下型布局，藍色背景優于白色背景，提出儀器儀表類用戶界面設計優化意見，為儀器儀表類的界面設計研究提供理論參考。

本研究還存在不足，如研究缺乏動態原型測試，僅從設計原型實驗獲取的數據無法說明交互的合理性、可用性；數據分析采用的算法也較簡單；此外，由于受試者的瀏覽習慣不同，部分瀏覽時間偏長，影響后續實驗數據，具體影響還需進一步研究。

[1] 曹繼春. 改進型數字皮革收縮溫度測定儀的研究[D]. 西安: 陜西科技大學, 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] 李淑江, 孔鵬宇, 竇如宏, 等. 游艇關鍵造型特征的眼動追蹤研究[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] 潘飛, 姜可, 王東琦. 基于眼動追蹤技術的購票網站可用性設計研究[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] 張喆, 韓貝貝, 孫林輝, 等. 工商銀行網頁理財頁面可用性的眼動研究[J]. 人類工效學, 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] 王文娟, 張碧含, 符夢婷, 等. 無人物流車的車外屏人機界面設計研究[J]. 圖學學報, 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] 楊新湦, 王茜. 眼動指標、管制負荷及航空器動態特征之間的相關性分析[J]. 科學技術與工程, 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] 王苗輝, 李艷, 宋武, 等. 基于科學實驗的人機交互界面設計研究: 以格力空調為例[J]. 圖學學報, 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] 劉淼. 工業氣體檢測設備的人機界面可用性評估[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] 李曉英, 周大濤, 黃楚, 等. 基于眼動追蹤的自助掛號機界面可用性設計研究[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] 金海哲, 吳一凡, 屈慶星, 等. 基于生理與眼動指標的智能觸摸設備使用績效的評價研究[J]. 工業工程與管理, 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] 錢麗娜, 倪福生, 吳曉莉, 等. 挖泥船監控界面的顏色編碼實驗研究[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] 孫林輝, 韓貝貝, 張偉. 基于眼動實驗的英語學習類手機APP界面設計評價[J]. 人類工效學, 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

陜西省科技統籌型重大項目(社會發展領域) (2017ZDXM-SF-035)

段艷花(1996-)，女，碩士研究生。主要研究方向為產品與交互設計。E-mail：969693924@qq.com

劉子建(1963-)，男，教授，碩士。主要研究方向為設計藝術學工業設計方向。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