基于眼動儀的洗衣機操作界面的設計

文/尚鑫偉 葉信尉

隨著科技的不斷發展，眼動儀成為一種廣泛應用于人機交互領域的技術工具。本文研究將應用眼動儀技術于洗衣機操作界面，以提高用戶體驗和操作效率。首先，介紹了眼動儀的原理、分類及其在人機交互領域中的應用。然后，分析了傳統洗衣機操作界面存在的問題。接著，提出了基于眼動儀的洗衣機操作界面設計方案，并詳細討論了其設計原則和具體實施方法。最后，通過實驗驗證了該設計方案的有效性，并探討了可能的改進措施。本研究結果表明，基于眼動儀的洗衣機操作界面設計能夠顯著提升用戶的操作效率和體驗，具有很大的潛力和應用前景。

洗衣機作為家庭生活中常用的家電產品，其操作界面的設計直接關系到用戶的使用體驗和操作效率。良好的用戶界面設計應該是好的可用性、功能性和美感的綜合體。然而，傳統洗衣機操作界面常常存在著諸如按鈕過多、功能復雜、操作模糊等問題，給用戶帶來不便和困擾。隨著眼動儀技術的發展和普及，將該技術應用于洗衣機操作界面設計中，有望解決上述問題，提高用戶的操作效率和體驗。

基于眼動儀的洗衣機操作界面設計需要遵循一些設計原則。首先，界面布局應簡潔明了，避免過多的按鈕和信息。其次，界面元素的大小和位置應根據用戶的注意力分布進行調整，以提高用戶的操作效率。此外，語音交互功能的設計需要考慮用戶的習慣和口語表達習慣。最后，實時反饋功能應以簡潔、直觀的方式向用戶展示洗衣機的工作進度和狀態。

實驗設計

實驗目的

該實驗旨在通過問卷調查、家庭走訪和專家咨詢的方式，探究不同設計因素對于用戶的視覺搜索效率、用戶體驗和操作效率的影響。具體研究方向包括對稱和T 型布局、色彩對比度、圖文結合程度以及界面背景使用藍色和白色四個方面[2]。研究者將通過對比不同實驗條件下的數據，以便全面地了解不同設計因素對于用戶感知效果的影響，并為界面設計提供相關實踐建議，從而進行界面設計。

實驗準備

實驗設備

被試：眼動儀實驗被試7 人，視力正常，綜合考慮到洗衣機的使用范圍廣，因此我們選擇了不同年齡階段的群體進行實驗。

實驗材料：實驗的界面材料根據實驗目的進行設計，以不同的用戶界面為自變量，眼動儀為因變量，探究不同自變量下對于用戶的影響。

設計方案A：布局形式為對稱布局，以中間圓形為對稱中心，在圓形的兩側分別布置3 個按鈕、色彩對比度相同、不采用圖文結合，背景顏色不同（A1 為藍色、A2 為白色）。

設計方案B：布局采用T 字型布局，將6 個按鈕分布在圓形顯示的上方，色彩對比度相同、不采用圖文結合，景顏色不同（A1 為藍色、A2 為白色）。

設計方案C：布局采用（填寫由A、B 方案得出較好的布局），色彩對比度分別設置為25%、50%、75%、100%，不采用圖文結合，背景顏色不同（A1 為藍色、A2 為白色）。

設計方案D，布局采用（填寫由A、B 方案得出較好的布局），色彩對比度采用（填寫由C 方案得出最好對比度）、采用圖文結合，根據[1]得知界面可以在按鈕添加易識易用的小型圖標， 圖文結合，增加可讀性、可視性；因此在每個按鈕下設置相應的小圖標，背景顏色不同（A1 為藍色、A2 為白色）。

實驗流程

在實驗開始前，主持人向被試者解釋了任務和注意事項。被試者被要求觀察四組按順序出現的圖片，并可以自由地觀察圖片上的內容。在實驗開始之前，每位被試者必須進行眼動儀的校準，以確保準確跟蹤受試者的眼球運動。在整個實驗過程中，被試者只能觀察屏幕上的圖片，并且不能移開視線超出眼動儀的監測范圍。為了確保被試者在實驗過程中感到舒適和放松，提供了安靜的實驗環境，并確保實驗照明不會干擾被試者，避免對實驗結果產生影響。

在登記信息階段，被試者的年齡、眼睛度數、身高和性別被記錄下來，以確保被試者在各個年齡段和性別上的分布，從而提高實驗結果的完整性和全面性。

設備調試階段，被試者被安排在規定位置，通過設備自帶的軟件進行距離調試，并將設備與眼睛瞳孔進行匹配，以為后續測試做好準備。

測試開始時，將圖片導入眼動儀自帶的應用程序，并設置播放速度為10 秒。也就是說，第一張圖片出現后經過10秒會自動播放下一張，直到所有圖片播放完畢。

在實驗過程中，眼動儀會自動記錄實驗數據，包括被試者的熱點圖和軌跡圖。最后對實驗數據進行分析。7 位被試者都按照以上實驗步驟進行了測試。

實驗結果分析

熱點圖和軌跡圖分析

界面對稱分布和T 型分布分析。熱點圖是使用顏色來顯示眼動數據分布的一種圖像，用于確定被試者在觀看圖像時的注意力集中區域。通過熱點圖，研究者可以快速獲取受試者在特定任務中感興趣的區域，從而理解視覺注意的分布并確定洗衣機界面布局。眼動儀軌跡圖是一種基于眼動儀數據生成的可視化圖表，用于展示眼球在觀察過程中的移動路徑和注意力分布。它可以評估用戶對界面的注意力分配和交互行為。軌跡圖逐點連續地顯示了被試注視點的位置和注視時間等信息，其中圓圈的大小反映了被試在該點的注視時間和注視次數。因此，眼動儀軌跡圖可用于評估用戶對界面的注意力分配和交互行為。設計師可以利用軌跡圖分析用戶在使用界面時關注的區域和瀏覽路徑，以優化界面設計，提高可用性和用戶滿意度。

實驗A 研究了洗衣機界面的適用性與操作界面的T 型分布和對稱分布之間的關系。為了模擬真實的洗衣機環境，參與者被要求想象自己正在使用洗衣機，并對界面進行操作。測試任務是在規定的10 秒內自由觀察洗衣機界面上的內容。測試采用了白色背景，洗衣機的操作界面由六個小按鈕和一個圓形大按鈕組成。這六個小按鈕分別屬于電源、轉速、延時、程序、預約和暫停六個模塊。而圓形大按鈕則用于顯示溫度和時間。不同布局方式下，按鈕的分布也不同：對稱布局中，大按鈕位于中心，小按鈕分別布局在大按鈕的兩側；而在T型分布中，六個小按鈕均勻地布局在大按鈕的上方，形成了一個T 字型結構。

通過熱點圖，觀察到對稱布局界面的熱點較少，主要集中在中間按鈕上。相比之下，T 型布局的熱點較多且分布較為分散。這表明對稱分布的界面更加簡潔明了，熱點主要集中在少數按鈕上。對比而言，T 型分布由于極端的按鈕排列方式，導致被試者的關注點較多且分散。對稱布局的界面熱點呈綠色，而T 型分布的界面熱點主要為黃色。這進一步證明了對稱布局更易于理解和解釋，能夠幫助用戶直觀地了解界面情況，因此熱點多為綠色。而T 型分布的形態有時候可能需要被試者的大腦進行額外的加工才能更好地理解，因此熱點呈現黃色。

在軌跡圖中，相對T 型布局界面，對稱布局界面展示了更多的軌跡線。然而，根據熱點圖所顯示的綠色熱點分布，這并不意味著注意力分散，而是指被試者在觀察完整個界面內容后，返回或重新觀察其他內容。這說明在相同的10 秒內，對稱布局的瀏覽速度更快。對稱布局的軌跡線主要集中在按鈕和按鈕之間，點與點之間的距離較近。相比之下，T 型分布的軌跡線上的點之間距離較遠，導致被試者難以快速到達他們想要觀察的區域。

根據熱點圖和軌跡圖的結果顯示，對稱布局展示了高度可讀性，能夠幫助用戶快速獲取關鍵信息并提升用戶體驗。對稱布局的設計方式減輕了認知負擔，適用于各個年齡段的用戶，進一步提升了用戶體驗。

對稱和T 型分布下藍白背景分析

實驗C 對比了T 型分布和對稱分布的熱點圖和軌跡圖，并在不同背景條件下進行了測試。為了模擬洗衣機使用環境，我們要求受試者設想自己在使用洗衣機并操作界面。測試任務是在規定時間內瀏覽洗衣機界面，我們收集并分析了兩組對照組的熱點圖和軌跡圖。

軌跡圖的線條數量反映了圖像的復雜程度，線條數量越多則表示觀察過程中在不 同位置來回移動的次數越多，表明圖像較難理解且復雜度較高。根據白色背景和藍色背景中的軌跡圖的結果可知，相對于藍色背景，白色背景下的軌跡線條更多，這表明藍色背景更適合作為洗衣機界面。

因此，在用戶界面設計中，顏色因素對視覺識別效率產生影響。顏色對比越明顯的用戶界面搜索時間越短，可識別性和可讀性也越強。這導致任務耗時縮短，認知難度降低。

界面不同對比度分析

實驗C 是一項針對洗衣機界面對比度的測試，改變其對比度。被試者被要求設想自己在使用洗衣機并操作界面，每張圖片的觀察時間限定為10 秒。本組測試采用了背景為藍色、對稱布局的交互界面，但按鈕和按鈕之間的對比度不同，分別為25%、50%、75%、100%。

在熱點圖中，由于對比度較低，圖標與圖標的邊界模糊，區域難以區分，導致熱點較少且顏色較深，主要呈現紅色，并且點與點之間距離較近。由于區域之間的差異不明顯，觀看界面需要更長的時間，導致頻繁的交互。因此，這些區域呈現出高熱度的特征，并且彼此相鄰。熱點較少且點與點之間距離較近表明用戶在特定區域或功能上持續關注和交互。這可能表示用戶對該按鈕有更高的需求，因此這些區域顯示出較高的熱度且彼此靠近。隨著對比度的增加，紅色熱點減少，但是熱點數量增加且點與點之間的距離增大。當對比度達到100%時，幾乎所有小按鈕和中心大按鈕都有熱點，并且主要呈現綠色。這表明在相同的十秒內，高對比度的界面能夠更快速地瀏覽，并且更符合被試者對洗衣機界面操作習慣的需求。

在軌跡圖中，由于對比度的影響，對比度較低的軌跡圖多集中于一個區域，且軌跡圖中的點相對較大，這表明在該點的觀察時間較長。隨著對比度的增加，軌跡圖中的軌跡線密度減小，范圍增大，涉及的區域更廣。當對比度達到100%時，大部分被試者的軌跡圖幾乎覆蓋了整個界面，證明高對比度能夠增強面元素的可識別性和可讀性，使其更易于理解和操作。

實驗D 研究了洗衣機界面中小圖標的適用性。參與者被要求在10 秒內盡可能多地觀察界面內容，以模擬真實使用洗衣機的情境。測試任務中，采用了對稱布局和藍色背景，并在右側界面的按鈕上添加了顯示功能的小圖標。

在熱點圖中，右側界面的按鈕帶有圖標，相比之下，左側界面的按鈕沒有圖標。熱點圖顯示，右側界面的按鈕更受關注，熱點主要呈現綠色，少量為紅色，其中紅色熱點主要集中在圖標上。相反地，右側沒有圖標的界面，熱點主要集中在中間的大按鈕上，只有左側的小按鈕有較多的熱點，右側小按鈕的熱點較少。這表明，在10 秒的時間內，參與者難以完全閱讀界面上的所有內容，導致后續觀察右側小按鈕時，熱點圖顯示更多的綠色。相比之下，帶有小圖標的洗衣機界面中，每個按鈕都有較多的熱點，而且熱點主要分布在按鈕上的小圖標上，而不是文字上。帶有小圖標的熱點圖具有廣泛分布且大部分為綠色的特點。這證明帶有圖標的洗衣機界面有助于參與者快速理解按鈕的功能，因此在相同時間內，參與者可以多次觀察相同的按鈕。此外，我們還發現少數帶有圖標的按鈕上有紅色熱點，這表明帶有圖標的按鈕能夠吸引參與者的注意力。當熱點圖中包含小圖標時，這些小圖標成為熱點圖上的熱點。參與者頻繁觀察小圖標以進行交互，因此帶有小圖標的按鈕顯示出較高的熱度。

相對于沒有圖標的左側界面，右側帶有小圖標的小按鈕顯示出較少的軌跡線和較低的線條密度。這表明沒有圖標的界面閱讀速度較慢，而帶有小圖標的界面能夠準確傳達按鈕的功能和操作，使用戶更容易理解和記憶，從而提高界面的閱讀速度。

此外，帶有圖標的界面使參與者更容易理解按鈕的功能，簡化了交互流程，減少了用戶的困惑和疑惑。帶有圖標的界面的軌跡線主要集中在兩側的功能性交互界面，而沒有圖標的界面的軌跡線主要集中在界面中心的大按鈕上。帶有圖標的小按鈕能夠更好地吸引參與者的注意力，并引導用戶采取特定的操作，例如電源開關和轉速調節。此外，帶有圖標的界面的軌跡圖更加規整，證明了該界面能夠吸引參與者的注意力，提高界面的可用性。

洗衣機操作界面的優化設計方案

以用戶提供更好的洗衣機交互界面為目的，在洗衣機操作界面的優化設計方案中，界面的布局采用中間為大按鈕，在大按鈕兩側分布兩排小按鈕的對稱布局；背景采用藍色背景，加強按鈕與背景的對比度，讓使用者更好地區分按鈕，提高按鈕的關注度；界面的對比度采用100%；在是否有圖標的實驗中，被試者對于有圖標的操作界面有更多的興趣，且更能提升瀏覽速度和理解程度，因此在優化設計方案中將洗衣機的操作界面中的6 個小按鈕上添加相應的小圖標，加強界面的可閱讀性。

本研究基于眼動儀的洗衣機界面設計，得出洗衣機操作界面上不同的背景、對比度、布局的分布、圖標的設置，提出冰箱操作界面的優化設計方案，為市面上洗衣機的操作界面提供了參考依據。并且在將來的洗衣機界面設計實驗中，可以在這個基礎上，對于界面上小圖標設計的大小、復雜程度進行研究；或者對于圖標和文字位置關系進行研究。得到更適合洗衣機使用者的操作界面，給使用者帶來更好的使用體驗。