界面視覺(jué)設(shè)計(jì)干擾子對(duì)搜索效率的影響機(jī)制研究

李娟，李思原

【視覺(jué)傳達(dá)設(shè)計(jì)】

界面視覺(jué)設(shè)計(jì)干擾子對(duì)搜索效率的影響機(jī)制研究

李娟，李思原

（西華大學(xué) 美術(shù)與設(shè)計(jì)學(xué)院，成都 610039）

探討移動(dòng)應(yīng)用界面中視覺(jué)設(shè)計(jì)干擾子對(duì)搜索效率的影響機(jī)制，為提高視覺(jué)界面搜索效率提供搜索界面設(shè)計(jì)策略和方法。通過(guò)文獻(xiàn)研究，梳理視覺(jué)搜索理論及行為模型，并在此基礎(chǔ)上探究視覺(jué)信息搜索思維邏輯。并基于某大學(xué)圖書(shū)館研修室預(yù)約系統(tǒng)，設(shè)計(jì)制作7組界面視覺(jué)干擾子實(shí)驗(yàn)樣本，通過(guò)動(dòng)態(tài)界面交互眼動(dòng)實(shí)驗(yàn)研究，探明界面視覺(jué)設(shè)計(jì)干擾子對(duì)搜索效率的影響機(jī)制。在界面結(jié)構(gòu)、功能布局、交互方式、信息表現(xiàn)、信息層級(jí)、色彩搭配與UI動(dòng)效7組不同界面視覺(jué)設(shè)計(jì)干擾子樣本中，用戶(hù)目標(biāo)任務(wù)的搜索效率都有顯著差異。搜索類(lèi)型界面設(shè)計(jì)應(yīng)使界面結(jié)構(gòu)清晰，主次功能分布合理，嘗試靈活多樣的交互方式，盡量減少信息層級(jí)以及進(jìn)行適當(dāng)?shù)男畔⒖梢暬?，給用戶(hù)舒適的色彩對(duì)比度以及恰當(dāng)?shù)腢I動(dòng)效引導(dǎo)。

界面視覺(jué)設(shè)計(jì)；干擾子；信息加工；搜索效率

搜索效率是影響搜索類(lèi)信息界面設(shè)計(jì)的可用性及用戶(hù)體驗(yàn)的重要指標(biāo)，現(xiàn)有文獻(xiàn)關(guān)于視覺(jué)搜索效率的研究側(cè)重于界面結(jié)構(gòu)背景與搜索目標(biāo)之間的關(guān)系對(duì)搜索效率的影響，如：侯文軍等[1]對(duì)手機(jī)界面的典型結(jié)構(gòu)視覺(jué)瀏覽差異展開(kāi)了研究；姜婷婷等[2]基于不同任務(wù)類(lèi)型探究分面搜索對(duì)高校用戶(hù)體驗(yàn)及搜索效率的影響；方浩等[3]等實(shí)驗(yàn)對(duì)比分析了移動(dòng)端新聞平臺(tái)中信息密度、圖文結(jié)構(gòu)和文字粗細(xì)3個(gè)設(shè)計(jì)要素對(duì)視覺(jué)搜索效率的影響機(jī)制；楊海波等[4]研究了消費(fèi)者在電商APP的搜索效率與界面背景及圖片特征的關(guān)系；孔雪利[5]詳細(xì)分析了手機(jī)懸浮球界面圖標(biāo)搜索效率的影響因素。搜索任務(wù)效率的干擾子包括環(huán)境因素、任務(wù)類(lèi)型、用戶(hù)認(rèn)知、視覺(jué)設(shè)計(jì)、搜索內(nèi)容等，視覺(jué)設(shè)計(jì)因素在引導(dǎo)用戶(hù)搜索行為中起到重要作用。用戶(hù)進(jìn)行視覺(jué)搜索和信息加工時(shí)的認(rèn)知邏輯具有一定規(guī)律，多種視覺(jué)設(shè)計(jì)因素都會(huì)受制于這一規(guī)律，基于設(shè)計(jì)優(yōu)劣成為引導(dǎo)項(xiàng)或干擾項(xiàng)從而影響其搜索行為及效率。因此探討交互界面搜索效率的視覺(jué)設(shè)計(jì)因素，找出引導(dǎo)項(xiàng)與干擾項(xiàng)的共性特征，對(duì)界面視覺(jué)設(shè)計(jì)提高搜索效率具有參考價(jià)值。

1 視覺(jué)信息搜索思維邏輯

1.1 搜索任務(wù)類(lèi)型

用戶(hù)在進(jìn)行信息搜尋時(shí)會(huì)涉及多種搜索任務(wù)，根據(jù)難易程度、目標(biāo)明確程度、搜尋過(guò)程的動(dòng)態(tài)性或開(kāi)放程度等多個(gè)屬性維度可以劃分為常見(jiàn)的簡(jiǎn)單任務(wù)、復(fù)雜任務(wù)、已知任務(wù)、探尋式任務(wù)、開(kāi)放式任務(wù)和封閉式任務(wù)。其中已知任務(wù)搜索目標(biāo)明確，搜索范圍集中，分析重點(diǎn)在于用戶(hù)達(dá)到目標(biāo)的路徑與任務(wù)完成時(shí)間。探尋式任務(wù)較為自由開(kāi)放，其基本特征是: 不熟悉目標(biāo)領(lǐng)域，不清楚搜索目標(biāo)，不確定達(dá)到目標(biāo)的路徑[2]。用戶(hù)在該任務(wù)情境下進(jìn)行信息搜索的行為具有迭代性、機(jī)遇性和探索性。探尋式任務(wù)持續(xù)時(shí)間更久，可以發(fā)現(xiàn)更多已知任務(wù)表現(xiàn)不出來(lái)的搜索行為特點(diǎn)。

1.2 信息搜索思維

信息搜索是一個(gè)認(rèn)知加工過(guò)程，包含信息感知、信息處理和行為3個(gè)基本階段。在視覺(jué)信息搜索中，視覺(jué)搜索與信息加工同時(shí)進(jìn)行[6]。針對(duì)有關(guān)人的視覺(jué)搜索行為研究，許多學(xué)者提出了不同的理論，包括特征整合理論[7]，引導(dǎo)搜索理論[8]、相似性理論[9]和動(dòng)態(tài)控制理論等[10]。這些理論相互補(bǔ)充相互延伸，綜合來(lái)說(shuō)，用戶(hù)在進(jìn)行視覺(jué)搜索時(shí)思維分為兩個(gè)階段：平行加工和系列加工。在前一階段，視覺(jué)系統(tǒng)對(duì)視野中刺激信息的基本特征進(jìn)行平行式加工。后一階段則把這些特征進(jìn)行提取整合形成一個(gè)完整的知覺(jué)對(duì)象，在特征地圖上隨機(jī)采用系列方式進(jìn)行逐個(gè)掃描，通過(guò)產(chǎn)生一個(gè)暫時(shí)的客體表征來(lái)實(shí)現(xiàn)對(duì)信息的加工和識(shí)別。優(yōu)化平行加工對(duì)系列加工的引導(dǎo)，降低目標(biāo)與干擾子的相似度，同時(shí)增加干擾子之間的相似度，以及提高目標(biāo)與搜索任務(wù)匹配度等途徑可以使加工更多地表現(xiàn)為平行方式，提高視覺(jué)搜索效率。

WICKENS在1984年提出，信息加工模型包括注意資源、感覺(jué)存儲(chǔ)、知覺(jué)、記憶、決策、執(zhí)行、反饋[11]。知覺(jué)系統(tǒng)有自上而下和自下而上2種路徑加工模式?；赪ICKENS的信息加工模型理論構(gòu)建交互界面信息加工模型，見(jiàn)圖1。從人的知識(shí)背景體系出發(fā)直接對(duì)界面刺激信息進(jìn)行匹配并加工處理是自上而下式，常存在于人熟悉的信息領(lǐng)域。經(jīng)知覺(jué)系統(tǒng)加工處理后決策系統(tǒng)再進(jìn)行判斷，無(wú)需決策的信息進(jìn)入工作記憶或長(zhǎng)時(shí)記憶，最后融為知識(shí)經(jīng)驗(yàn)。需要決策的信息通過(guò)指令效應(yīng)器產(chǎn)生交互行為，若交互中產(chǎn)生知識(shí)背景體系外的新信息，則進(jìn)入自下而上式加工模式，形成加工閉環(huán)。自下而上式往往存在于人較為陌生的信息領(lǐng)域，界面刺激信息先通過(guò)感覺(jué)系統(tǒng)編碼，進(jìn)入短時(shí)記憶再傳輸給知覺(jué)系統(tǒng)進(jìn)行一系列決策行為。

1.3 搜索行為邏輯

BATES于1989年提出信息搜索視覺(jué)行為采莓模型[12]：用戶(hù)的信息搜索行為如同采莓，始于一個(gè)“點(diǎn)”，在初期隨機(jī)并逐步按照一定視覺(jué)軌跡進(jìn)行跳躍來(lái)尋找目標(biāo)信息，在整個(gè)搜索過(guò)程的各個(gè)階段中用戶(hù)可以隨時(shí)發(fā)現(xiàn)需要的信息片段及新的搜索方向，并在干擾子間不斷游移進(jìn)行篩選，游離初始目標(biāo)[13]。在進(jìn)行搜索任務(wù)時(shí)，用戶(hù)的行為表現(xiàn)出整體性、交互性和動(dòng)態(tài)性的非線(xiàn)性特征。“非線(xiàn)性”強(qiáng)調(diào)思維層面的動(dòng)態(tài)復(fù)雜性分析[14]，指綜合用戶(hù)認(rèn)知、任務(wù)情境以及交互系統(tǒng)等主要因素的共同影響，是在動(dòng)態(tài)、復(fù)雜的非線(xiàn)性思維指導(dǎo)下描述的信息搜尋行為。綜合視覺(jué)信息搜索思維和Forster非線(xiàn)性搜尋行為模型[15]，構(gòu)建非線(xiàn)性用戶(hù)界面搜索行為邏輯模型，如圖2。界面信息包含搜索任務(wù)的目標(biāo)與其他干擾子，經(jīng)過(guò)用戶(hù)認(rèn)知思維進(jìn)行平行加工與系列加工，由決策系統(tǒng)發(fā)出指令循著搜索任務(wù)進(jìn)行一系列交互行為形成閉環(huán)，直至完成搜索任務(wù)，整個(gè)搜索過(guò)程受目標(biāo)清晰度、任務(wù)與目標(biāo)的匹配度以及平行加工對(duì)系列加工的引導(dǎo)優(yōu)劣影響，整體呈現(xiàn)復(fù)雜的非線(xiàn)性。

圖1 交互界面信息加工模型

圖2 界面搜索行為邏輯模型

2 界面視覺(jué)設(shè)計(jì)干擾子

根據(jù)界面搜索思維邏輯模型，在搜索界面中，各個(gè)設(shè)計(jì)因素都可能會(huì)成為干擾子，影響搜索目標(biāo)清晰度，從而左右平行加工對(duì)系列加工的引導(dǎo)優(yōu)劣，進(jìn)而影響搜索效率。在界面設(shè)計(jì)發(fā)展的過(guò)程中，無(wú)論是功能架構(gòu)、交互方式還是UI風(fēng)格等等諸多因素都在不斷更新迭代，但迭代目標(biāo)都指向提升用戶(hù)體驗(yàn)。當(dāng)交互過(guò)程涉及到信息搜索時(shí)，為了用戶(hù)能夠更快更準(zhǔn)確地搜尋到自己想要的信息，提升界面搜索效率就顯得尤為重要。

2.1 搜索應(yīng)用類(lèi)型界面特征

廣義來(lái)說(shuō)，所有的界面都涉及到視覺(jué)搜索，只要用戶(hù)使用眼睛去瀏覽界面就會(huì)產(chǎn)生視覺(jué)搜索。如果在視覺(jué)搜索下加入信息搜索，就會(huì)涉及到視覺(jué)信息搜索認(rèn)知邏輯。常見(jiàn)的搜索應(yīng)用類(lèi)型依據(jù)搜索的信息種類(lèi)可分為生活類(lèi)、資訊類(lèi)和綜合類(lèi)共3大類(lèi)。生活類(lèi)應(yīng)用主要包含的典型信息搜索行為是購(gòu)物、出行和娛樂(lè)；資訊類(lèi)應(yīng)用主要包含的典型信息搜索行為是獲取訊息和數(shù)字資源；綜合類(lèi)應(yīng)用主要包含的典型信息搜索行為是綜合式搜索。3大類(lèi)各自代表的搜索界面案例如圖3。

圖3 搜索應(yīng)用類(lèi)型

總結(jié)分析以上搜索應(yīng)用界面發(fā)現(xiàn)，導(dǎo)航界面結(jié)構(gòu)上標(biāo)簽與宮格并存，頂或底部標(biāo)簽加宮格的結(jié)構(gòu)居多。信息往往直接呈現(xiàn)在首頁(yè)，并且占據(jù)大幅版面，信息的分布方式依信息類(lèi)別而變化。以文字信息居多的應(yīng)用會(huì)選擇將內(nèi)容垂直堆疊為列表型，如知乎。圖片信息居多的應(yīng)用會(huì)將內(nèi)容以卡片式左右錯(cuò)落分布?？ㄆ鳛橄乱粚蛹?jí)的入口，同時(shí)可以承載文字、圖片、音頻等元素，保證功能性的同時(shí)兼顧畫(huà)面的美觀[16]，如小紅書(shū)?；蛘咭杂镜佬问捷嗭@，如貓眼電影首頁(yè)。部分應(yīng)用甚至?xí)⒁恍┬畔⒖梢暬?，如貓眼電影選座界面。搜索界面承載信息類(lèi)別繁雜時(shí)往往伴有搜索框，當(dāng)出現(xiàn)需要信息選擇的情況時(shí)，部分應(yīng)用會(huì)提供篩選功能，如預(yù)訂酒店時(shí)的日期和時(shí)間篩選功能模塊。交互手勢(shì)點(diǎn)擊和上下滑動(dòng)居多，動(dòng)效往往是反饋型，如小紅書(shū)點(diǎn)贊動(dòng)效，帶有功能引導(dǎo)含義的動(dòng)效較少。背景多為純色或簡(jiǎn)單幾何圖形，重點(diǎn)文字會(huì)通過(guò)改變字體、字號(hào)、粗細(xì)、色彩等達(dá)到凸顯和區(qū)分的目的。

2.2 界面視覺(jué)設(shè)計(jì)干擾子與搜索效率

侯文軍在基于眼動(dòng)瀏覽規(guī)律的手機(jī)典型界面結(jié)構(gòu)研究中提出[1]，手機(jī)界面的交互結(jié)構(gòu)類(lèi)型對(duì)注視點(diǎn)數(shù)目、注視時(shí)間和搜索總距離的影響顯著，且推薦效率型應(yīng)用選擇宮格式、標(biāo)簽式框架。在布局上，視覺(jué)注意會(huì)受到畫(huà)面平衡的影響[17]，功能布局還應(yīng)考慮到主要功能的畫(huà)面占比與凸顯度。與此同時(shí)，同個(gè)搜索功能會(huì)在迭代中出現(xiàn)不同的交互方式，例如2020年蘋(píng)果系統(tǒng)更新為iOS14時(shí)鬧鐘的時(shí)間設(shè)置方式變?yōu)榱随I盤(pán)輸入，在后續(xù)的更新中又改回上下滾動(dòng)模式。信息表現(xiàn)在界面中指具有一定含義的多類(lèi)型數(shù)據(jù)信息的表現(xiàn)形式，主要體現(xiàn)在信息可視化設(shè)計(jì)上。好的可視化可以讓受眾迅速、高效地對(duì)有關(guān)圖形信息進(jìn)行識(shí)別和處理，獲得對(duì)信息的認(rèn)知[18]。針對(duì)不同級(jí)別的信息層級(jí)要掌握視覺(jué)的秩序，把握信息層級(jí)本身的可理解性與視覺(jué)元素潛在的邏輯性基礎(chǔ)[19]。運(yùn)用不同的視覺(jué)秩序可能會(huì)對(duì)搜索效率產(chǎn)生影響。色彩搭配涉及到色相與明度、飽和度等，界面的色彩搭配可能會(huì)對(duì)功能凸顯度造成影響，是影響搜索效率的重要因素。根據(jù)HUANG和SHIEH等[20-21]人的研究發(fā)現(xiàn)，背景與目標(biāo)圖形之間顏色的對(duì)比度較高時(shí)搜索較快。在眾多色彩搭配中，黑色與黃色組合在搜索效率、用戶(hù)體驗(yàn)等方面都高于其他組合。袁泳凡[22]指出黃色的圖標(biāo)在深色的背景下具有更高的視覺(jué)識(shí)別度。另外，適當(dāng)?shù)奶崾疽龑?dǎo)對(duì)新手用戶(hù)非常重要[23]，以動(dòng)利導(dǎo)可以通過(guò)動(dòng)效為用戶(hù)提供引導(dǎo)，幫助用戶(hù)更快地掌握界面的操作以及功能的方向位置。朱田牧[24]研究發(fā)現(xiàn)在多目標(biāo)視覺(jué)搜索任務(wù)中，當(dāng)區(qū)分目標(biāo)重要程度時(shí)，動(dòng)態(tài)突顯相對(duì)于全部同等凸顯的傳統(tǒng)凸顯方式績(jī)效較高。朱奧等[25]指出無(wú)論目標(biāo)還是背景區(qū)域的圖像，都是越復(fù)雜越不利于視覺(jué)搜索。根據(jù)調(diào)研現(xiàn)大多數(shù)搜索應(yīng)用界面的背景都較簡(jiǎn)潔，搜索效率影響主要來(lái)自于目標(biāo)本身的復(fù)雜度。復(fù)雜目標(biāo)的搜索界面條件較簡(jiǎn)單目標(biāo)的搜索效率低，當(dāng)界面背景與搜索目標(biāo)對(duì)比度較大時(shí)搜索效率較高[4]。移動(dòng)界面選用字體的結(jié)構(gòu)規(guī)律性要求共性大于個(gè)性，閱讀性能高[26]，文字顯示趨近標(biāo)準(zhǔn)化，以信息傳遞為主。綜合以上研究，搜索界面的9個(gè)主要效率影響視覺(jué)設(shè)計(jì)干擾子見(jiàn)圖4，除去研究較為充分的界面復(fù)雜度與文字，本文主要探究界面結(jié)構(gòu)、功能布局、交互方式、信息表現(xiàn)、信息層級(jí)、色彩搭配和UI動(dòng)效7個(gè)干擾子對(duì)搜索效率的影響機(jī)制。

圖4 影響搜索效率的界面視覺(jué)設(shè)計(jì)干擾子

3 視覺(jué)設(shè)計(jì)干擾子對(duì)搜索效率的影響機(jī)制

3.1 實(shí)驗(yàn)方案及實(shí)施

根據(jù)已確定的7個(gè)界面視覺(jué)設(shè)計(jì)干擾子，選擇某大學(xué)圖書(shū)館研修室預(yù)約系統(tǒng)作為研究媒介，該系統(tǒng)為典型的資源類(lèi)搜索界面，預(yù)約過(guò)程中主要涉及已知任務(wù)和探尋式任務(wù)。界面設(shè)計(jì)要素包括首頁(yè)導(dǎo)航、時(shí)間、研修室與樓層篩選功能的實(shí)現(xiàn)與布局、研修室與主題的信息表現(xiàn)、層級(jí)關(guān)系、整體色彩搭配和動(dòng)效引導(dǎo)。分別針對(duì)每個(gè)影響因素設(shè)計(jì)多個(gè)界面，每個(gè)界面或功能模塊的差異符合設(shè)計(jì)要求和原則。使用Axure RP9軟件制作界面交互原型，模擬用戶(hù)真實(shí)的操作環(huán)境和預(yù)約流程。為每一個(gè)影響因素設(shè)定已知或探尋式任務(wù)，任務(wù)設(shè)定簡(jiǎn)短、自然，符合用戶(hù)正常操作情境且能夠達(dá)到目標(biāo)實(shí)驗(yàn)數(shù)據(jù)。任務(wù)重復(fù)優(yōu)勢(shì)理論認(rèn)為任務(wù)設(shè)置在執(zhí)行后的一段時(shí)間內(nèi)持續(xù)存在，并對(duì)隨后的任務(wù)產(chǎn)生影響[27]。為消除受試者因任務(wù)重復(fù)而產(chǎn)生的對(duì)實(shí)驗(yàn)結(jié)果的影響，實(shí)驗(yàn)方案將給不同的受試者隨機(jī)實(shí)驗(yàn)組順序。實(shí)驗(yàn)設(shè)備采用眼動(dòng)儀，眼動(dòng)數(shù)據(jù)采集軟件Eyevision Studio，使用屏幕錄制的眼動(dòng)采集方法，最后分析實(shí)驗(yàn)數(shù)據(jù)。

為了降低眼動(dòng)設(shè)備匹配電腦顯色度不強(qiáng)帶來(lái)的視覺(jué)影響，增強(qiáng)實(shí)驗(yàn)效果，綜合前期的研究結(jié)果與當(dāng)前大學(xué)生審美，界面配色采用黃色系圖標(biāo)與深紫色背景組合，風(fēng)格采用扁平式，保持樣本主體文字、色彩搭配及界面復(fù)雜度基本一致。方案模擬真實(shí)預(yù)約系統(tǒng)，用戶(hù)可以上下滑動(dòng)查看更多信息，實(shí)驗(yàn)方案界面設(shè)計(jì)見(jiàn)表1。

表1 實(shí)驗(yàn)方案界面設(shè)計(jì)

Tab.1 Interface design of experiment scheme

7組實(shí)驗(yàn)方案分別對(duì)應(yīng)7個(gè)干擾子。

1）一組界面結(jié)構(gòu)采用標(biāo)簽式與宮格式的對(duì)比，其中標(biāo)簽式為原預(yù)約系統(tǒng)界面形式。預(yù)約系統(tǒng)的第二層級(jí)主要功能有日期選擇、時(shí)間選擇、研修室類(lèi)型篩選和研修室樓層篩選。

2）二組針對(duì)多個(gè)功能設(shè)計(jì)3種布局并搭配不同的篩選方式。2-a為原預(yù)約系統(tǒng)分布及篩選形式；2-b將重要功能凸顯并使用響應(yīng)式抽屜篩選；2-c則全部顯示。

3）三組對(duì)時(shí)間預(yù)約功能給出上下滾動(dòng)式、手動(dòng)輸入式和左右滑動(dòng)式3種交互方式進(jìn)行對(duì)比實(shí)驗(yàn)。

4）四組共對(duì)研修室設(shè)計(jì)了6種可視化類(lèi)型，同時(shí)關(guān)注時(shí)間、研修室名稱(chēng)、類(lèi)型的合理表達(dá)并兼顧趣味性。其中細(xì)條式為原預(yù)約系統(tǒng)界面形式。原系統(tǒng)共有89個(gè)研修室，實(shí)驗(yàn)簡(jiǎn)化為40個(gè)，共5個(gè)樓層，每個(gè)樓層分別有3個(gè)單人研修室，2個(gè)3人研修室，2個(gè)6人研修室和1個(gè)互動(dòng)研修室。每一組中研修室的空余時(shí)間段隨機(jī)排列，不同組隨機(jī)時(shí)間相同。

5）五組提交信息頁(yè)面涉及研修室主題的選擇，給出3種選擇形式：5-a為原系統(tǒng)形式，進(jìn)入下一層級(jí)頁(yè)面進(jìn)行羅列式點(diǎn)選；5-b為全部顯示；5-c是可視化后滾動(dòng)選擇。

6）六組色彩搭配6-a與6-b對(duì)比相同明度功能模塊色相與背景差異。6-b與6-c對(duì)比相同色相功能模塊明度與背景差異的情況下用戶(hù)的搜索效率。

7）七組UI動(dòng)效對(duì)時(shí)間、樓層及研修室篩選功能模塊添加跳動(dòng)、旋轉(zhuǎn)和縮放等基礎(chǔ)動(dòng)態(tài)形式，在選擇研修室主題模塊中，采用動(dòng)態(tài)凸顯的形式。

將手機(jī)交互原型放置在電腦上，鼠標(biāo)代替手指模擬操作。在受試者進(jìn)行交互時(shí)，實(shí)驗(yàn)人員間歇語(yǔ)音播報(bào)任務(wù)內(nèi)容，見(jiàn)表2。在受試者遇到困惑的界面停留過(guò)長(zhǎng)時(shí)間（實(shí)驗(yàn)結(jié)果已經(jīng)顯著）時(shí)，實(shí)驗(yàn)人員予以適當(dāng)提示讓受試者完成當(dāng)前任務(wù)。實(shí)驗(yàn)共進(jìn)行10人，其中有效9人。

表2 任務(wù)內(nèi)容

Tab.2 Task content

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

3.2.1 視覺(jué)搜索關(guān)注區(qū)域

視覺(jué)熱點(diǎn)圖與焦點(diǎn)圖的價(jià)值在于呈現(xiàn)用戶(hù)對(duì)圖片中感興趣或視覺(jué)集中的部分，因此對(duì)于第4組信息表現(xiàn)即研修室可視化方式的設(shè)計(jì)形式使用焦點(diǎn)圖分析較有意義，見(jiàn)圖5。綜合9名被試的實(shí)驗(yàn)結(jié)果，對(duì)比原系統(tǒng)的細(xì)條式與其他可視化的信息表現(xiàn)形式，將研修室類(lèi)型信息可視化后，受試者的視覺(jué)焦點(diǎn)從文字轉(zhuǎn)移到了圖形。對(duì)比純色化前后的矩形式與圓弧式，將無(wú)效時(shí)間純色化后，被試在無(wú)效的灰色與粉色時(shí)間條上的注視點(diǎn)明顯減少，視線(xiàn)焦點(diǎn)集中在研修室名稱(chēng)與有效的綠色時(shí)間條上。

3.2.2 視覺(jué)搜索效率分析

根據(jù)采集的眼動(dòng)軌跡視頻實(shí)驗(yàn)數(shù)據(jù)，從眾多分析指標(biāo)中選取3個(gè)最符合本實(shí)驗(yàn)研究的指標(biāo)，分別是首次注視時(shí)間、回視型眼跳和掃描持續(xù)時(shí)間，其指標(biāo)意義見(jiàn)表3。實(shí)驗(yàn)綜合方差齊性檢驗(yàn)和配對(duì)t檢驗(yàn)兩種分析方法檢驗(yàn)數(shù)據(jù)有效性，對(duì)7個(gè)視覺(jué)設(shè)計(jì)干擾子在用戶(hù)視覺(jué)搜索過(guò)程中的影響進(jìn)行探討，以首次注視時(shí)間、掃描持續(xù)時(shí)間來(lái)衡量被試的視覺(jué)搜索效率，以回視型眼跳為參考，并結(jié)合主觀滿(mǎn)意度對(duì)被試視覺(jué)搜索行為進(jìn)行分析。

1）第一組界面結(jié)構(gòu)，經(jīng)過(guò)方差齊性檢驗(yàn)發(fā)現(xiàn)兩種不同的界面結(jié)構(gòu)在搜索效率上存在顯著差異，見(jiàn)表4。宮格式的預(yù)約研修室功能模塊平均首次注視時(shí)間（2.219 s）短于標(biāo)簽式（6.386 s），差異顯著（=8.881，<0.01）。從掃描持續(xù)時(shí)間看，宮格式的任務(wù)完成時(shí)間（3.590 s）相比標(biāo)簽式（9.511 s）效率提升164.9%，且差異顯著（=12.123，<0.01），回視型眼跳次數(shù)也顯著少于標(biāo)簽式。綜合分析表明在功能分類(lèi)導(dǎo)航的信息搜索界面，采用宮格式的界面結(jié)構(gòu)會(huì)比標(biāo)簽式更加合理，用戶(hù)搜索效率更高。

圖5 信息表現(xiàn)典型焦點(diǎn)圖

表3 軌跡圖指標(biāo)及意義

Tab.3 Index and significance of track chart

表4 界面結(jié)構(gòu)方差分析結(jié)果

Tab.4 ANOVA results of interface structure

注：**表示差異非常顯著，*表示差異顯著。

2）第二組功能布局，經(jīng)過(guò)方差齊性檢驗(yàn)，3種不同的功能布局和篩選方式在掃描持續(xù)時(shí)間上存在顯著差異（=23.426，<0.001），羅列式點(diǎn)選用時(shí)最長(zhǎng)（23.994 s），其次是響應(yīng)式抽屜（11.062 s），全部顯示方式的用時(shí)最短（6.652 s）。在篩選條件較少時(shí)，將篩選內(nèi)容全部顯示在二級(jí)界面上會(huì)有效降低用戶(hù)的總篩選時(shí)間。對(duì)于兩種不同的主次功能設(shè)計(jì)界面，篩選按鈕的首次注視時(shí)間2-b（0.989 s）比2-a（13.031 s）更短，差異顯著（=16.704，<0.001），且回視型眼跳也顯示篩選按鈕設(shè)計(jì)的影響差異顯著，2-a比2-b平均多出1個(gè)回視型眼跳，說(shuō)明主功能模塊增大顯示面積并放置界面中心位置能夠提高用戶(hù)視覺(jué)搜索效率。目標(biāo)篩選區(qū)任務(wù)中，2-a和2-b需要點(diǎn)擊按鈕觸發(fā)篩選區(qū)域，2-c則直接顯示在第一頁(yè)面層級(jí)，因此在首次注視時(shí)間上全部顯示快于前兩者，但在搜索效率上的差異并不顯著（=1.490，>0.05），見(jiàn)表5。

3）第三組交互方式的掃描持續(xù)時(shí)間為從被試開(kāi)始對(duì)時(shí)間模塊進(jìn)行操作到時(shí)間篩選完成，經(jīng)過(guò)方差齊性檢驗(yàn)發(fā)現(xiàn)3種不同的交互方式在搜索效率上有顯著差異（=9.115，=0.001<0.01）。受電腦交互原型滾輪操作不便的影響，上下滾動(dòng)式真實(shí)平均時(shí)長(zhǎng)應(yīng)略短于實(shí)驗(yàn)結(jié)果（17.300 s），高于左右滑動(dòng)式（7.886 s）和直接輸入（7.706 s）。

4）第四組信息表現(xiàn)的掃描持續(xù)時(shí)間為從被試開(kāi)始搜尋任務(wù)目標(biāo)研修室到被試結(jié)束該可視化形式下的篩選動(dòng)作。任務(wù)正確結(jié)果分別是103、106、206、207、307、406、502、503，共8個(gè)，任務(wù)完成情況分為找到完成目標(biāo)研修室數(shù)量、正確數(shù)量、錯(cuò)誤數(shù)量、完成率（正確數(shù)量/8）與掃描持續(xù)時(shí)間5個(gè)指標(biāo)來(lái)分析，經(jīng)過(guò)方差齊性檢驗(yàn)，6種不同的可視化形式的5個(gè)指標(biāo)均有顯著差異（<0.05），掃描持續(xù)時(shí)間從高到低排序?yàn)榧?xì)條式>矩形式>表盤(pán)式>圓弧式>圓弧純色化>矩形純色化。完成數(shù)量上表盤(pán)式最多，由于存在一定錯(cuò)誤數(shù)量，因此完成率不同，錯(cuò)誤數(shù)最低的為圓弧式，最高的為矩形式。完成率表盤(pán)式最高（87.5%），矩形式最低（47.2%），見(jiàn)表6。另對(duì)4-b與4-c、4-d與4-e兩組進(jìn)行純色化變量的實(shí)驗(yàn)組進(jìn)行配對(duì)t檢驗(yàn)，分析結(jié)果顯示在矩形式的可視化形式中，錯(cuò)誤數(shù)指標(biāo)差異顯著（=3.411，=0.009<0.01），將無(wú)效時(shí)間純色化可以降低被試搜索的錯(cuò)誤率，掃描持續(xù)時(shí)間結(jié)果也具有顯著性（=2.670，=0.028<0.05），矩形純色化的形式任務(wù)完成時(shí)間更短。在信息顯示可視化過(guò)程中，精簡(jiǎn)信息呈現(xiàn)有助于提高搜索效率，但圓弧式的對(duì)比組差異不明顯，說(shuō)明不同的可視化方式對(duì)信息表現(xiàn)的搜索效率存在影響。

表5 功能布局方差分析結(jié)果

Tab.5 ANOVA results of function layout variance

注：表中**表示差異非常顯著，*表示差異顯著。

表6 信息表現(xiàn)方差分析結(jié)果

Tab.6 ANOVA results of information performance

注：**表示差異非常顯著，*表示差異顯著。

5）第五組信息層級(jí)，被試的視覺(jué)軌跡在羅列式中為從上向下的直線(xiàn)順序型，全部顯示中呈隨機(jī)跳動(dòng)型，可視化滾動(dòng)中為持續(xù)N字型。經(jīng)過(guò)方差齊性檢驗(yàn)發(fā)現(xiàn)3組不同的信息提交設(shè)計(jì)形式的首次注視時(shí)間和掃描持續(xù)時(shí)間都有顯著差異，羅列式的首次注視時(shí)間最短，但相比另外兩組多一個(gè)頁(yè)面層級(jí)，因此總?cè)蝿?wù)時(shí)長(zhǎng)更長(zhǎng)。全部顯示形式的總?cè)蝿?wù)完成時(shí)長(zhǎng)最短，但隨機(jī)跳動(dòng)的視覺(jué)搜索延長(zhǎng)了首次注視的時(shí)間，增加了回視型眼跳的次數(shù)?？梢暬瘽L動(dòng)的搜索形式速度較慢，但會(huì)減少回視型眼跳次數(shù)，見(jiàn)表7。

表7 信息層級(jí)方差分析結(jié)果

Tab.7 ANOVA results of information level

注：**表示差異非常顯著，*表示差異顯著。

6）第六組色彩搭配，經(jīng)過(guò)方差齊性檢驗(yàn)，3組設(shè)計(jì)方案效率指標(biāo)上差異不顯著（>0.05）。分別對(duì)比6-a/6-b與6-b/6-c的平均值發(fā)現(xiàn)功能模塊與背景色相相近或明度相近會(huì)使首次注視功能模塊時(shí)間變長(zhǎng)，會(huì)在一定程度上削弱信息凸顯度，降低搜索效率。

7）第七組UI動(dòng)效的實(shí)驗(yàn)將6-a與樣本7進(jìn)行對(duì)比，經(jīng)過(guò)配對(duì)檢驗(yàn)，效率指標(biāo)差異顯著（<0.05），見(jiàn)表8。首次注視時(shí)間為從界面進(jìn)入視線(xiàn)開(kāi)始到被試注視點(diǎn)分別首次到達(dá)篩選模塊、篩選后的研修室、小組討論主題模塊的時(shí)間。根據(jù)分析結(jié)果，有UI動(dòng)效引導(dǎo)的平均首次注視時(shí)間（0.298 s）比無(wú)UI動(dòng)效引導(dǎo)（0.876 s）更短，效率提升194.0%。有UI動(dòng)效的任務(wù)完成時(shí)間（30.954 s）比無(wú)UI動(dòng)效（46.093 s）也更短，效率提升48.9%，為關(guān)鍵模塊添加引導(dǎo)動(dòng)效可以有效提升被試搜索效率。

表8 UI動(dòng)效檢驗(yàn)結(jié)果

Tab.8 T-test results of UI dynamic effect

注：表中**表示差異非常顯著，*表示差異顯著。

3.2.3 用戶(hù)滿(mǎn)意度訪(fǎng)談

在受試者完成了全部搜索任務(wù)后，對(duì)受試者進(jìn)行滿(mǎn)意度訪(fǎng)談，內(nèi)容包括：調(diào)查受試者在每個(gè)搜索界面中的偏好；發(fā)現(xiàn)受試者在搜索過(guò)程中遇到的問(wèn)題；評(píng)估搜索過(guò)程中影響受試者到達(dá)目標(biāo)的干擾子特征。絕大部分受試者傾向于宮格式的導(dǎo)航界面布局，更喜歡放大后的篩選按鈕和全部顯示的功能布局。但全部顯示的信息偏多，剛進(jìn)入界面的時(shí)候會(huì)有些不知所措。抽屜點(diǎn)選的篩選方式最不受歡迎，時(shí)間篩選方式上多偏向于左右滑動(dòng)。對(duì)于研修室可視化形式，喜歡矩形式的居多，且有88.9%的受試者都更傾向于將無(wú)效時(shí)間純色化。表盤(pán)式因占據(jù)太大空間，在研修室過(guò)多的時(shí)候翻找會(huì)形成負(fù)擔(dān)。對(duì)比文字更多的細(xì)條式，受試者更喜歡研修室和人數(shù)可視化成圖形。在信息提交頁(yè)面，77.8%的受試者喜歡全部顯示，不喜歡將信息藏在滑動(dòng)模塊里。多數(shù)用戶(hù)覺(jué)得在篩選后的研修室和研修室主題選擇的標(biāo)簽上添加了UI動(dòng)效之后有引導(dǎo)作用，但其他功能模塊上的多個(gè)動(dòng)效沒(méi)有任何幫助。

4 結(jié)語(yǔ)

從視覺(jué)信息搜索認(rèn)知邏輯角度出發(fā)，基于某圖書(shū)館研修室預(yù)約系統(tǒng)設(shè)計(jì)并進(jìn)行搜索效率實(shí)驗(yàn)，分析得出影響搜索效率的界面設(shè)計(jì)要素，并基于此提出設(shè)計(jì)策略。在對(duì)搜索類(lèi)型界面進(jìn)行設(shè)計(jì)時(shí)，要注意減少信息層級(jí)、分布方式合理、信息可視化，選擇恰當(dāng)?shù)慕换シ绞?，色彩搭配合理及給用戶(hù)適當(dāng)?shù)腢I動(dòng)效引導(dǎo)。

信息及功能布局應(yīng)注意歸類(lèi)準(zhǔn)確、表現(xiàn)合理、主次關(guān)系清晰。當(dāng)文字信息較少時(shí)宜在界面分塊展示，如導(dǎo)航界面適合宮格式；較多時(shí)，可以采取列表式；同時(shí)具有圖片信息時(shí)，合理分配兩者之間的關(guān)系。盡量避免讓用戶(hù)閱讀繁瑣的文字信息，在界面設(shè)計(jì)中可進(jìn)行多種嘗試選擇恰當(dāng)?shù)男畔⒖梢暬问剑p少干擾子以減輕用戶(hù)信息加工的負(fù)擔(dān)，同時(shí)注意多信息的布局。減少不必要的層級(jí)，能在一個(gè)頁(yè)面中完成的搜索/篩選動(dòng)作盡量不要放到下一級(jí)頁(yè)面中，增加層級(jí)會(huì)顯著增加用戶(hù)搜索時(shí)間，降低效率。注意信息層級(jí)對(duì)視覺(jué)秩序的影響，可以明顯展示給用戶(hù)的信息或功能最好不要隱藏在功能模塊中，在保證界面簡(jiǎn)潔的前提下將可以全部顯示的信息顯示出來(lái)，但不同信息的種類(lèi)不宜超過(guò)4種，過(guò)多的信息呈現(xiàn)會(huì)增加用戶(hù)平行加工負(fù)擔(dān)。

羅列式的篩選應(yīng)注意信息呈現(xiàn)方式，并考慮更多交互可能——將信息放在模塊里讓用戶(hù)滾動(dòng)選擇、或是滑動(dòng)選擇等，避免采用響應(yīng)式的彈出抽屜。在區(qū)域選擇型的信息篩選上，例如時(shí)間、分?jǐn)?shù)等的選擇可以采用左右滑動(dòng)、或捏合等更加符合用戶(hù)對(duì)區(qū)域的范圍把控習(xí)慣的交互方式，也更加自然有趣。利用界面布局、色彩搭配和動(dòng)效為用戶(hù)制造視覺(jué)引導(dǎo)和體驗(yàn)，可以根據(jù)人的閱讀習(xí)慣進(jìn)行引導(dǎo)式的界面布局，制造視覺(jué)搜索軌跡傾向，讓用戶(hù)遵循設(shè)計(jì)的視覺(jué)軌跡來(lái)進(jìn)行交互。功能模塊與背景的色彩搭配明度和色相不宜太過(guò)相近，同時(shí)注意對(duì)比度與美觀度。UI動(dòng)效可以有效提升用戶(hù)的視覺(jué)捕捉效率，但同一界面添加過(guò)多動(dòng)效會(huì)造成用戶(hù)視覺(jué)混亂，應(yīng)在恰當(dāng)?shù)臅r(shí)候選擇適宜的動(dòng)效形式，如對(duì)同一界面多個(gè)同級(jí)信息可以采用動(dòng)態(tài)凸顯逐漸顯示。舒適的視覺(jué)引導(dǎo)可以讓用戶(hù)更高效地完成搜索任務(wù)，同時(shí)提升搜索體驗(yàn)。

[1] 侯文軍, 秦源. 基于眼動(dòng)瀏覽規(guī)律的手機(jī)典型界面結(jié)構(gòu)研究[J]. 北京郵電大學(xué)學(xué)報(bào)(社會(huì)科學(xué)版), 2014, 16(1): 25-30. HOU Wen-jun, QIN Yuan. Mobile Typical Interface Structure Based on Eye-Tracking Browsing Rules[J]. Journal of Beijing University of Posts and Telecommunications (Social Sciences Edition), 2014, 16(1): 25-30.

[2] 姜婷婷, 范水香, 王昊. 高校圖書(shū)館OPAC中的分面搜索對(duì)用戶(hù)體驗(yàn)的影響——基于不同任務(wù)的對(duì)比實(shí)驗(yàn)分析[J]. 圖書(shū)情報(bào)工作, 2015, 59(4): 114-121. JIANG Ting-ting, FAN Shui-xiang, WANG Hao. Impact of Faceted Search in Academic Library OPAC on the User Experience: Based on the Comparison of the Experimental Analysis[J]. Library and Information Service, 2015, 59(4): 114-121.

[3] 方浩, 陳印超, 趙瑩, 等. 移動(dòng)端新聞平臺(tái)信息設(shè)計(jì)要素對(duì)視覺(jué)搜索效率的影響機(jī)制[J]. 圖書(shū)情報(bào)工作, 2019, 63(22): 58-67. FANG Hao, CHEN Yin-chao, ZHAO Ying, et al. The Influencing Mechanism of Information Design Elements of Mobile News Platform on Visual Search Efficiency[J]. Library and Information Service, 2019, 63(22): 58-67.

[4] 楊海波, 汪洋, 張磊. 電商手機(jī)APP界面背景和圖片特征對(duì)消費(fèi)者搜索效率影響的研究[J]. 包裝工程, 2016, 37(20): 45-49. YANG Hai-bo, WANG Yang, ZHANG Lei. Influence of the Background and Picture Features of the Mobile APP Interface on the Consumer Search Efficiency[J]. Packaging Engineering, 2016, 37(20): 45-49.

[5] 孔雪利. 背景模式及圖標(biāo)呈現(xiàn)方式對(duì)手機(jī)懸浮球用戶(hù)界面圖標(biāo)搜索效率的影響[D]. 天津: 天津師范大學(xué), 2021. KONG Xue-li. Influence of Background Mode and Icon Presentation Mode on Icon Search Efficiency of Mobile Phone Levitation Ball User Interface[D]. Tianjin: Tianjin Normal University, 2021.

[6] 徐夢(mèng)怡. 80-8神經(jīng)類(lèi)型與視覺(jué)搜索能力的關(guān)系研究[D]. 蘇州: 蘇州大學(xué), 2016. XU Meng-yi. Study on the Relationship between 80-8 Nerve Types and Visual Search Ability[D].Suzhou: Soochow University, 2016.

[7] TREISMAN A M, GELADE G. A Feature-Integration Theory of Attention[J]. Cognitive Psychology, 1980, 12(1): 97-136.

[8] CAVE K R, WOLFE J M. Modeling the Role of Parallel Processing in Visual Search[J]. Cognitive Psychology, 1990, 22(2): 225-271.

[9] NOTHDURFT H C. Feature Analysis and the Role of Similarity in Preattentive Vision[J]. Perception & Psychophysics, 1992, 52(4): 355-375.

[10] POIESE P, SPALEK T M, DILOLLO V. Attentional Capture by a Salient Distractor in Visual Search: The Effect of Target-Distractor Similarity[J]. Canadian Journal of Experimental Psychology, 2008, 62(4): 233-236.

[11] WICKENS C D,HELTON W S, HOLLANDS J G, et al. Engineering Psychology and Human Performance[M]. New York: Routledge, 2021.

[12] BATES M J.The Design of Browsing and Berrypicking Techniques for the Online Search Interface[J]. Online Information Review, 1989, 13: 407-424.

[13] 喬歡. 信息行為學(xué)[M]. 北京: 北京師范大學(xué)出版社, 2010. QIAO Huan. Information Behavior[M]. Beijing: Beijing Normal University Press, 2010.

[14] 周曉英, 張璐. 基于活動(dòng)理論的非線(xiàn)性信息搜尋行為模型研究[J]. 圖書(shū)情報(bào)知識(shí), 2018(1): 4-15. ZHOU Xiao-ying, ZHANG Lu. A Research on the Non- Linear Information Seeking Behavior Model Based on Activity Theory[J]. Document, Informaiton & Knowledge, 2018(1): 4-15.

[15] FOSTER A. A Nonlinear Model of Information-Seeking Behavior[J]. Journal of the American Society for Information Science and Technology, 2004, 55(3): 228-237.

[16] 馮波. 基于用戶(hù)體驗(yàn)下的App界面設(shè)計(jì)中版式設(shè)計(jì)的探索——以妙讀App為例[J]. 裝飾, 2021(7): 134-135. FENG Bo. Exploration of Layout Design in App Interface Design Based on User Experience: Taking Miaodu App as an Example[J]. Art & Design, 2021(7): 134-135.

[17] 戴濛濛. 不同畫(huà)面平衡狀態(tài)下大學(xué)生視覺(jué)注意行為的眼動(dòng)實(shí)驗(yàn)研究[D]. 蕪湖: 安徽師范大學(xué), 2020. DAI Meng-meng. Experimental Study on the Visual Attention Behavior of College Students under Different Picture Balance[D]. Wuhu: Anhui Normal University, 2020.

[18] 劉歡. 探討手機(jī)APP界面中信息圖形的設(shè)計(jì)[J]. 信息記錄材料, 2021, 22(6): 223-224. LIU Huan. Discussion on the Design of Information Graphics in the Interface of Mobile APP[J]. Information Recording Materials, 2021, 22(6): 223-224.

[19] 黃穎宜. 手機(jī)界面信息層級(jí)可視化設(shè)計(jì)的秩序[J]. 包裝工程, 2018, 39(4): 59-64. HUANG Ying-yi. Visual Design Order of Mobile Interface Information Hierarchy[J]. Packaging Engineering, 2018, 39(4): 59-64.

[20] HUANG K C. Effects of Computer Icons and Figure/ Background Area Ratios and Color Combinations on Visual Search Performance on an LCD Monitor[J]. Displays, 2008, 29(3): 237-242.

[21] SHIEH K K, KO Y H. Effects of Display Characteristics and Individual Differences on Preferences of VDT Icon Design[J]. Perceptual and Motor Skills, 2005, 100(2): 305-318.

[22] 袁泳凡. 對(duì)手機(jī)界面圖標(biāo)識(shí)別度研究[D]. 北京: 北京交通大學(xué), 2016. YUAN Yong-fan. Research on Recognition Degree of Mobile Phone Interface Icons[D]. Beijing: Beijing Jiaotong University, 2016.

[23] 奚柯. 動(dòng)效設(shè)計(jì)在手機(jī)APP界面中的應(yīng)用研究[D]. 南京: 東南大學(xué), 2018. XI Ke. Research on Application of Motion Design in Mobile App Interface[D]. Southeast University, 2018.

[24] 朱田牧. 動(dòng)態(tài)突顯對(duì)視覺(jué)搜索績(jī)效的影響及其影響因素研究[D]. 杭州: 浙江理工大學(xué), 2020. ZHU Tian-mu. The Effect of Dynamic Highlighting on the Performance of Visual Search and Its Effective Factors[D]. Hangzhou: Zhejiang Sci-Tech University, 2020.

[25] 朱奧, 王曉彬, 李曉鶴, 等. 復(fù)雜信息界面視覺(jué)搜索效能量化評(píng)估方法與模型[J]. 空軍工程大學(xué)學(xué)報(bào), 2022, 23(6): 84-90. ZHU Ao, WANG Xiao-bin, LI Xiao-he, et al. Quantitative Evaluation Method and Model of Visual Search Efficiency in Complex Information Interface[J]. Journal of Air Force Engineering University, 2022, 23(6): 84-90.

[26] 黃穎宜. 基于信息層級(jí)的移動(dòng)端界面文字量化設(shè)計(jì)模型[J]. 裝飾, 2019(2): 138-139. HUANG Ying-yi. A Quantitative Design Model of Mobile Interface Text Based on Information Hierarchy[J]. Art & Design, 2019(2): 138-139.

[27] 袁旦, 張智君. 任務(wù)轉(zhuǎn)換加工機(jī)制的研究述評(píng)[J]. 應(yīng)用心理學(xué), 2009, 15(3): 236-244. YUAN Dan, ZHANG Zhi-jun. Review on the Mechanism of the Task Switching Process[J]. Chinese Journal of Applied Psychology, 2009, 15(3): 236-244.

Influence Mechanism of Interface Visual Design Distractors on Search Efficiency

LI Juan, LI Si-yuan

(School of Art and Design, Xihua University, Chengdu 610039, China)

The work aims to explore the influence mechanism of visual design distractors on search efficiency in mobile application interface, and propose design strategies and methods to improve the search efficiency of visual interface. Literature research, visual search theories and behavioral models were sorted out. And on this basis, visual information search thinking logic was explored. Based on the study room reservation system of a university library, 7 sets of experimental samples of interface visual distractors were designed. Through dynamic interface interaction experimental research on eye movement, the mechanism of influence of interface visual design distractors on search efficiency was ascertained. Among the 7 sets of different interface visual design distractors in interface structure, functional layout, interaction mode, information presentation, information hierarchy, color matching and UI animation guide, the search efficiency of user target tasks was significantly different. Search type interface design should make the interface structure clear and the distribution of primary and secondary functions reasonable. It is required to be more flexible in interaction, minimize information hierarchy and visualize information appropriately, and give users comfortable color contrast and appropriate UI motion guidance.KEY WORDS: interface visual design; distractors; information processing; search efficiency

J525.2

A

1001-3563(2023)14-0235-09

10.19554/j.cnki.1001-3563.2023.14.025

2023–02–12

四川省教育廳人文社科重點(diǎn)研究基地—?dú)庀鬄?zāi)害預(yù)測(cè)預(yù)警與應(yīng)急管理研究中心項(xiàng)目（ZHYJ22-YB05）；四川省哲學(xué)社會(huì)科學(xué)重點(diǎn)研究基地現(xiàn)代設(shè)計(jì)與文化研究中心項(xiàng)目（MD22E032）；四川省高校哲學(xué)社會(huì)科學(xué)重點(diǎn)研究基地工業(yè)設(shè)計(jì)產(chǎn)業(yè)研究中心項(xiàng)目（GYSJ2022-06）

李娟（1985—），女，博士，講師，主要研究方向?yàn)樾畔⒔换ピO(shè)計(jì)及人機(jī)工程學(xué)。

李思原（1998—），女，碩士研究生，主攻信息交互與用戶(hù)體驗(yàn)。

責(zé)任編輯：藍(lán)英僑