基于眼動(dòng)儀的洗衣機(jī)操作界面的設(shè)計(jì)

文/尚鑫偉 葉信尉

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

洗衣機(jī)作為家庭生活中常用的家電產(chǎn)品，其操作界面的設(shè)計(jì)直接關(guān)系到用戶的使用體驗(yàn)和操作效率。良好的用戶界面設(shè)計(jì)應(yīng)該是好的可用性、功能性和美感的綜合體。然而，傳統(tǒng)洗衣機(jī)操作界面常常存在著諸如按鈕過(guò)多、功能復(fù)雜、操作模糊等問(wèn)題，給用戶帶來(lái)不便和困擾。隨著眼動(dòng)儀技術(shù)的發(fā)展和普及，將該技術(shù)應(yīng)用于洗衣機(jī)操作界面設(shè)計(jì)中，有望解決上述問(wèn)題，提高用戶的操作效率和體驗(yàn)。

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

實(shí)驗(yàn)設(shè)計(jì)

實(shí)驗(yàn)?zāi)康?/h3>

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

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

實(shí)驗(yàn)設(shè)備

被試：眼動(dòng)儀實(shí)驗(yàn)被試7 人，視力正常，綜合考慮到洗衣機(jī)的使用范圍廣，因此我們選擇了不同年齡階段的群體進(jìn)行實(shí)驗(yàn)。

實(shí)驗(yàn)材料：實(shí)驗(yàn)的界面材料根據(jù)實(shí)驗(yàn)?zāi)康倪M(jìn)行設(shè)計(jì)，以不同的用戶界面為自變量，眼動(dòng)儀為因變量，探究不同自變量下對(duì)于用戶的影響。

設(shè)計(jì)方案A：布局形式為對(duì)稱布局，以中間圓形為對(duì)稱中心，在圓形的兩側(cè)分別布置3 個(gè)按鈕、色彩對(duì)比度相同、不采用圖文結(jié)合，背景顏色不同（A1 為藍(lán)色、A2 為白色）。

設(shè)計(jì)方案B：布局采用T 字型布局，將6 個(gè)按鈕分布在圓形顯示的上方，色彩對(duì)比度相同、不采用圖文結(jié)合，景顏色不同（A1 為藍(lán)色、A2 為白色）。

設(shè)計(jì)方案C：布局采用（填寫(xiě)由A、B 方案得出較好的布局），色彩對(duì)比度分別設(shè)置為25%、50%、75%、100%，不采用圖文結(jié)合，背景顏色不同（A1 為藍(lán)色、A2 為白色）。

設(shè)計(jì)方案D，布局采用（填寫(xiě)由A、B 方案得出較好的布局），色彩對(duì)比度采用（填寫(xiě)由C 方案得出最好對(duì)比度）、采用圖文結(jié)合，根據(jù)[1]得知界面可以在按鈕添加易識(shí)易用的小型圖標(biāo)， 圖文結(jié)合，增加可讀性、可視性；因此在每個(gè)按鈕下設(shè)置相應(yīng)的小圖標(biāo)，背景顏色不同（A1 為藍(lán)色、A2 為白色）。

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

在實(shí)驗(yàn)開(kāi)始前，主持人向被試者解釋了任務(wù)和注意事項(xiàng)。被試者被要求觀察四組按順序出現(xiàn)的圖片，并可以自由地觀察圖片上的內(nèi)容。在實(shí)驗(yàn)開(kāi)始之前，每位被試者必須進(jìn)行眼動(dòng)儀的校準(zhǔn)，以確保準(zhǔn)確跟蹤受試者的眼球運(yùn)動(dòng)。在整個(gè)實(shí)驗(yàn)過(guò)程中，被試者只能觀察屏幕上的圖片，并且不能移開(kāi)視線超出眼動(dòng)儀的監(jiān)測(cè)范圍。為了確保被試者在實(shí)驗(yàn)過(guò)程中感到舒適和放松，提供了安靜的實(shí)驗(yàn)環(huán)境，并確保實(shí)驗(yàn)照明不會(huì)干擾被試者，避免對(duì)實(shí)驗(yàn)結(jié)果產(chǎn)生影響。

在登記信息階段，被試者的年齡、眼睛度數(shù)、身高和性別被記錄下來(lái)，以確保被試者在各個(gè)年齡段和性別上的分布，從而提高實(shí)驗(yàn)結(jié)果的完整性和全面性。

設(shè)備調(diào)試階段，被試者被安排在規(guī)定位置，通過(guò)設(shè)備自帶的軟件進(jìn)行距離調(diào)試，并將設(shè)備與眼睛瞳孔進(jìn)行匹配，以為后續(xù)測(cè)試做好準(zhǔn)備。

測(cè)試開(kāi)始時(shí)，將圖片導(dǎo)入眼動(dòng)儀自帶的應(yīng)用程序，并設(shè)置播放速度為10 秒。也就是說(shuō)，第一張圖片出現(xiàn)后經(jīng)過(guò)10秒會(huì)自動(dòng)播放下一張，直到所有圖片播放完畢。

在實(shí)驗(yàn)過(guò)程中，眼動(dòng)儀會(huì)自動(dòng)記錄實(shí)驗(yàn)數(shù)據(jù)，包括被試者的熱點(diǎn)圖和軌跡圖。最后對(duì)實(shí)驗(yàn)數(shù)據(jù)進(jìn)行分析。7 位被試者都按照以上實(shí)驗(yàn)步驟進(jìn)行了測(cè)試。

實(shí)驗(yàn)結(jié)果分析

熱點(diǎn)圖和軌跡圖分析

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

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

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

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

根據(jù)熱點(diǎn)圖和軌跡圖的結(jié)果顯示，對(duì)稱布局展示了高度可讀性，能夠幫助用戶快速獲取關(guān)鍵信息并提升用戶體驗(yàn)。對(duì)稱布局的設(shè)計(jì)方式減輕了認(rèn)知負(fù)擔(dān)，適用于各個(gè)年齡段的用戶，進(jìn)一步提升了用戶體驗(yàn)。

對(duì)稱和T 型分布下藍(lán)白背景分析

實(shí)驗(yàn)C 對(duì)比了T 型分布和對(duì)稱分布的熱點(diǎn)圖和軌跡圖，并在不同背景條件下進(jìn)行了測(cè)試。為了模擬洗衣機(jī)使用環(huán)境，我們要求受試者設(shè)想自己在使用洗衣機(jī)并操作界面。測(cè)試任務(wù)是在規(guī)定時(shí)間內(nèi)瀏覽洗衣機(jī)界面，我們收集并分析了兩組對(duì)照組的熱點(diǎn)圖和軌跡圖。

軌跡圖的線條數(shù)量反映了圖像的復(fù)雜程度，線條數(shù)量越多則表示觀察過(guò)程中在不 同位置來(lái)回移動(dòng)的次數(shù)越多，表明圖像較難理解且復(fù)雜度較高。根據(jù)白色背景和藍(lán)色背景中的軌跡圖的結(jié)果可知，相對(duì)于藍(lán)色背景，白色背景下的軌跡線條更多，這表明藍(lán)色背景更適合作為洗衣機(jī)界面。

因此，在用戶界面設(shè)計(jì)中，顏色因素對(duì)視覺(jué)識(shí)別效率產(chǎn)生影響。顏色對(duì)比越明顯的用戶界面搜索時(shí)間越短，可識(shí)別性和可讀性也越強(qiáng)。這導(dǎo)致任務(wù)耗時(shí)縮短，認(rèn)知難度降低。

界面不同對(duì)比度分析

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

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

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

實(shí)驗(yàn)D 研究了洗衣機(jī)界面中小圖標(biāo)的適用性。參與者被要求在10 秒內(nèi)盡可能多地觀察界面內(nèi)容，以模擬真實(shí)使用洗衣機(jī)的情境。測(cè)試任務(wù)中，采用了對(duì)稱布局和藍(lán)色背景，并在右側(cè)界面的按鈕上添加了顯示功能的小圖標(biāo)。

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

相對(duì)于沒(méi)有圖標(biāo)的左側(cè)界面，右側(cè)帶有小圖標(biāo)的小按鈕顯示出較少的軌跡線和較低的線條密度。這表明沒(méi)有圖標(biāo)的界面閱讀速度較慢，而帶有小圖標(biāo)的界面能夠準(zhǔn)確傳達(dá)按鈕的功能和操作，使用戶更容易理解和記憶，從而提高界面的閱讀速度。

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

洗衣機(jī)操作界面的優(yōu)化設(shè)計(jì)方案

以用戶提供更好的洗衣機(jī)交互界面為目的，在洗衣機(jī)操作界面的優(yōu)化設(shè)計(jì)方案中，界面的布局采用中間為大按鈕，在大按鈕兩側(cè)分布兩排小按鈕的對(duì)稱布局；背景采用藍(lán)色背景，加強(qiáng)按鈕與背景的對(duì)比度，讓使用者更好地區(qū)分按鈕，提高按鈕的關(guān)注度；界面的對(duì)比度采用100%；在是否有圖標(biāo)的實(shí)驗(yàn)中，被試者對(duì)于有圖標(biāo)的操作界面有更多的興趣，且更能提升瀏覽速度和理解程度，因此在優(yōu)化設(shè)計(jì)方案中將洗衣機(jī)的操作界面中的6 個(gè)小按鈕上添加相應(yīng)的小圖標(biāo)，加強(qiáng)界面的可閱讀性。

本研究基于眼動(dòng)儀的洗衣機(jī)界面設(shè)計(jì)，得出洗衣機(jī)操作界面上不同的背景、對(duì)比度、布局的分布、圖標(biāo)的設(shè)置，提出冰箱操作界面的優(yōu)化設(shè)計(jì)方案，為市面上洗衣機(jī)的操作界面提供了參考依據(jù)。并且在將來(lái)的洗衣機(jī)界面設(shè)計(jì)實(shí)驗(yàn)中，可以在這個(gè)基礎(chǔ)上，對(duì)于界面上小圖標(biāo)設(shè)計(jì)的大小、復(fù)雜程度進(jìn)行研究；或者對(duì)于圖標(biāo)和文字位置關(guān)系進(jìn)行研究。得到更適合洗衣機(jī)使用者的操作界面，給使用者帶來(lái)更好的使用體驗(yàn)。