融合認知負荷的用戶界面布局優(yōu)化①

陳 磊,呂 健,潘偉杰,劉 翔

(貴州大學 現(xiàn)代制造技術教育部重點實驗室,貴陽 550025)

隨著人機交互技術的發(fā)展,用戶界面的呈現(xiàn)方式越來越多樣化,如何為用戶打造高效、滿意的用戶界面是界面設計的熱點. 界面質(zhì)量是界面設計有效性和用戶滿意度的關鍵因素,布局方式更是界面質(zhì)量的重要組成部分. 影響布局方式的主要因素是界面元素本身所要表達信息量的大小、用戶的生理行為及心理認知等人因特性因素,界面設計不僅需要滿足用戶生理特性的基本需求,更是需要滿足心理特性的認知層,進而發(fā)展到人機系統(tǒng)設計中偏重用戶體驗的感性層[1]. 目前基于管理平臺界面設計中以用戶體驗為導向的設計差距還較大,因此優(yōu)化用戶界面設計對于提升平臺系統(tǒng)可用性及滿意度具有重要意義.

1 相關工作

界面中布局方式所構成信息理解的難易程度決定了用戶對于界面布局認知的準確性和高效性[2],良好的布局方式有助于提升用戶的認知效率. 目前針對界面布局優(yōu)化的方向主要有兩種: 一種是通過主觀測量數(shù)據(jù)優(yōu)化界面,另一種則是利用算法等技術手段進行界面布局設計. 前者,許永生等人[3]通過模擬實驗測量駕駛員的注意力分配情況,通過主觀量表工作負荷以及訪談對高鐵操縱臺布局進行優(yōu)化; 后者,Wu 等人[4]建立誤差因子-視覺感知-界面布局的關聯(lián)模型并利用遺傳算法尋求最優(yōu)解進行界面優(yōu)化; 康慧[5]基于工效學及美度評價原則建立布局準則,并運用遺傳算法對產(chǎn)品界面布局進行優(yōu)化; 劉昕等人[6]引用改進粒子群算法提出了我國飛行員人機布局優(yōu)化新方法; 國外,Diego-Mas等人[7]使用眼動跟蹤、鼠標移動和切片樹的遺傳算法對界面進行布局優(yōu)化; Oulasvirta 等人[8]對用戶界面設計中元素組合優(yōu)化的方法進行闡述. 近年來在用戶認知過程中有關認知負荷的研究越來越受到學者重視,袁義凡[9]歸納了近10 年認知負荷在界面設計中應用研究的熱點領域、重點、研究趨勢等,表明負荷大小是影響界面可用性設計和提升用戶體驗的重要因素之一.然而,目前將認知負荷引入界面布局優(yōu)化的研究并不多.

界面布局優(yōu)化本身屬于多目標優(yōu)化問題,遺傳算法、粒子群算法、蟻群算法等啟發(fā)式算法已在許多布局優(yōu)化問題研究中得到了應用. 趙子健等人[10]運用蟻群算法對操縱器布局進行優(yōu)化排列,葉坤武等人[11]引入帶有慣性權重的粒子群算法對飛機駕駛艙界面布局進行優(yōu)化. 但算法之間各有優(yōu)劣,遺傳算法可以求全局最優(yōu)解,但收斂速度較慢,局部搜索能力較差、控制變量較多; 群智能優(yōu)化算法因易操作、魯棒性強等優(yōu)點被廣泛應用,典型的群智能優(yōu)化算法有粒子群算法、蟻群算法,但是粒子群對于參數(shù)的設置依賴性較強,易陷入局部最優(yōu)解中; 蟻群算法計算量較大,收斂速度較慢且容易局部最優(yōu); Xue 等人[12]受麻雀覓食和反捕食行為的啟發(fā)提出了麻雀搜索算法(sparrow search algorithm,SSA),該算法結構簡單且控制參數(shù)較少,收斂速度快、穩(wěn)定性好、全局搜索能力強,可以滿足全局的搜索能力和局部探索能力,在進行優(yōu)化問題時具有良好的性能,一定程度上提升了優(yōu)化搜索空間的探索利用能力. 李雅麗等人[13]使用標準基準測試函數(shù)對2010 年以來新提出的6 種典型群智能優(yōu)化算法進行分析,結果表明SSA各方面性能優(yōu)于其他算法. 因此本文運用SSA 對所建立的優(yōu)化目標函數(shù)進行求解.

界面布局優(yōu)化問題受到很多學者的研究,并出現(xiàn)許多相關的應用案例,但針對客觀的工效學布局原則與用戶心理認知規(guī)律相結合進行研究的較少. 針對用戶界面布局優(yōu)化問題,本文建立了融合認知負荷以及界面美度計算為設計原則的多目標優(yōu)化模型,利用SSA模擬種群的捕食和反捕食過程,生成界面優(yōu)化布局解集. 以某鐵路建造智能化協(xié)同管理平臺首頁為例,展開優(yōu)化方案的生成,并通過生理測量數(shù)據(jù)建立布局與認知負荷之間的評價目標函數(shù),最后選取20 名用戶對初始方案及優(yōu)化方案進行評價驗證,本文流程如圖1 所示.

圖1 結合負荷的界面布局優(yōu)化流程圖

2 建立界面布局設計原則

人機界面交互過程中,用戶作為界面信息的接收者和使用者,始終是人機交互中的核心要素. 界面布局是將元素按可行性約束放置于界面中,影響其設計的因素眾多,需要綜合考慮人機關系、人的認知模式、系統(tǒng)功能、界面設計美學、計算機技術、信息識別和獲取等多方面的因素[14]. 在用戶認知模型支持下,需要同時滿足用戶心理及生理的前提下并綜合考慮用戶認知過程中會受到的影響因素[15]. 界面設計在不斷發(fā)展過程中,形成了許多通用的界面布局設計原則:Sanders 等人[16]建立了界面信息元素排列的基本設計原則; Wickens 等人[17]提出了鄰近相容原則,要求相關元素應緊密的呈現(xiàn)在一起,此外還需考慮到各元素的使用頻率.

2.1 結合認知負荷的工效學布局原則

人機界面中的負荷主要存在于用戶認知過程中,隨著界面信息數(shù)量的增多或信息難度的上升,會加大用戶在認知過程中的負荷量,容易造成誤操作等失誤情形. 認知負荷理論劃分了外在認知負荷、內(nèi)在認知負荷和相關認知負荷3 種類型的認知負荷. 李晶等人[18]在均衡認知負荷中提出要減少外在認知負荷,保持內(nèi)在認知負荷,增加相關認知負荷. 本文首先歸納了調(diào)節(jié)界面中外在認知負荷的策略,與工效學原則進行結合并形成界面工效學基本布局原則.

外在認知負荷主要受信息元素的布局呈現(xiàn)方式影響,因此界面布局設計中應著重關注如何降低外在認知負荷的策略. 界面設計中形成認知負荷的原因有: 信息量超過工作記憶; 信息難度超過認知加工水平; 注意力資源分配不均等. 因此界面設計中需要根據(jù)元素的重要程度來進行排列,把重要元素放置在最佳視覺區(qū)域; 人的工作記憶有限,因此需要減少無關信息干擾,界面中可以利用鄰近減負原則來減少不必要的設計.調(diào)節(jié)外在認知負荷策略布局設計原則如表1 所示.

表1 調(diào)節(jié)外在認知負荷策略及布局設計原則

界面布局優(yōu)化最理想的結果是將每一個信息元素放置在最優(yōu)位置,充分發(fā)揮人機效率,但布局原則之間會存在相互重疊,為避免這種情況,需要添加系數(shù)進行調(diào)控,從而對設計原則進行優(yōu)先排序. 布局優(yōu)化要求優(yōu)化方案整體評價最高,布局原則約束下需要使目標函數(shù)得到最大值. 在優(yōu)化模型中可以得出重要度越高、使用越頻繁則需要靠近視覺最佳布置點,加權值也就越大. 本文通過調(diào)節(jié)認知負荷策略原則,確定界面元素操作順序、重要程度、使用頻率以及元素間相關性的設計原則,由此建立目標函數(shù)如式(1)所示:

其中,Si表示操作順序;Pi表示重要度和操作頻率;Oi是相關性原則; ω1i和 ω2i是位置控制系數(shù);dia是元素i的幾何中心的位置坐標與最佳布置點a的距離;damax是待布局區(qū)域中的元素位置點與最佳布置點a的最大距離.

① 將界面元素按照一定的操作順序放置,有助于提升用戶認知效率. 根據(jù)視覺認知規(guī)律,元素應當按照從左到右或從上到下進行排列. 操作順序矩陣C可以表示為:

矩陣中,n為界面元素個數(shù),d為不同任務下的操作順序,Cij為元素i在任務j狀態(tài)下的操作順序. 操作順序的數(shù)學模型可以表示為:

其中,i=1,2,···,n;j=1,2,···,d,ω1i為信息元素i的操作順序權重.

② 重要度由專家進行評價,重要度矩陣可以表示為:

矩陣中,h為專家人數(shù);Iij表示信息元素i由專家j進行評估的重要程度,專家權重矩陣可以表示為ωC=[ωC1ωC2··· ωCg]T.

信息元素的操作頻率矩陣F可以表示為:

矩陣中,fij是指信息元素在使用過程中的操作頻率,操作的權重由其操作的概率決定,表示為:

元素i的加權操作頻率可表示為:Zi=ωz fij; 因此,重要度和操作頻率原則的數(shù)學模型可以描述為:

③ 相關性是反映信息元素之間關系的密切程度,關系緊密的應靠近布置,因此相關度矩陣可以表示為:

矩陣中,Oij表示信息元素i和信息元素j的相關度,n為待布局的信息元素數(shù),信息元素i與其他信息元素的相關性的數(shù)學模型可以表示為:

dij是指信息元素i與信息元素j之間的距離,計算方式為當相關性越大,dij取值就越小.

2.2 美度計算設計原則

Ngo 等人[19]在圖形顯示上制定了14 種審美指標:平衡、均衡、對稱、順序、凝聚力、統(tǒng)一性、比例、簡單性、密度、規(guī)律性、經(jīng)濟性、均勻性、節(jié)奏性、順序性和復雜性. 周蕾等人[20]從界面的感性意象出發(fā)對美度計算進行定量分析,建立界面美度的感性意象結構,根據(jù)界面的平衡度、比例美度、簡潔美和呼應美度4 個方面進行12 個美度指標的建立,進一步完善了美度評價指標. 根據(jù)已有研究中的美度指標,并針對于項目管理平臺凝聚成12 個美度感性詞匯,并邀請專家進行項目建設管理平臺界面美度的語義進行評價,根據(jù)最后的評價結果,選取了簡潔、統(tǒng)一、協(xié)調(diào)、舒適4 個美度指標如表2,以此構建界面美度評價目標函數(shù):

表2 界面布局美度評價度量指標[20]

其中,ε為歸一化因子,為保證兩部分量綱統(tǒng)統(tǒng)一,把數(shù)據(jù)映射在[0,1]之間處理并使它們的最優(yōu)結果最大值接近1; θ為加權因子,θ1,θ2,θ3,θ4分別表示每一個因素的權重,若影響因素簡潔影響較大,則 θ1相對于其他θ2,θ3,θ4的值則較大,且必須滿足θ1+θ2+θ3+θ4=1.

3 基于麻雀搜索算法的界面布局優(yōu)化

3.1 構建數(shù)學模型

首先建立界面元素布局坐標系,通過簡化處理降低目標函數(shù)求解的難度,將信息元素轉(zhuǎn)化為矩陣形狀,在二維坐標上進行設計布局. 將界面大小設為1920 px×1080 px (px 代表像素)的矩形,將需要放置的信息元素抽象為矩陣,長和寬已知,各信息元素在界面中和坐標軸平行.L表示界面總長度,W表示界面總寬度,布局如圖2 所示.

圖2 界面布局示意圖

針對布局優(yōu)化問題,上述建立了結合認知負荷的工效學以及美度計算的界面布局設計原則,并將布局原則量化轉(zhuǎn)為可進行計算的數(shù)學建模指標進行編碼,建立如下的優(yōu)化目標函數(shù):

設界面中有n個待布局信息元素,li,wi分別代表物體i的長和寬,(xi,yi)表示物體i在界面上的中心坐標. 待布局信息元素i的中心坐標和待布置元素j的中心坐標之間的距離通過式(11)進行計算:

最后求解得到滿足設計原則的設計變量,即信息元素坐標系集X={(xi,yi)|i=1,2,···,n}. 界面中的元素需要遵循界面大小的限制,目標函數(shù)的構建需要確認信息元素不能超出布局范圍且要確保元素信息之間不能重合,因此需要加入間距及邊界約束條件如下.

(1)間距約束: 信息元素應該保持一定的距離,即要滿足公式:

dxmin和dymin分表表示元素A和元素B在x和y方向的最小間距;Ai和Aj分別表示元素A的長寬大小.

(2)邊界約束: 保證信息元素與界面邊界保持一定的距離,即要滿足公式:

其中,damin和dbmin分別表示元素與邊界x方向和y方向的最小間距.

3.2 算法求解

本文運用SSA 對目標函數(shù)全局尋找最優(yōu)解,適應度函數(shù)值最大時得到最優(yōu)參數(shù),算法流程具體如圖3 所示.

圖3 麻雀搜索算法流程圖

Step 1. 初始化變量和麻雀搜索算法各參數(shù),設置種群規(guī)模以及迭代次數(shù).

Step 2. 計算初始適應度值,得出初始適應度的極值及位置并且進行標記.

Step 3. 計算預警值. 在算法中,發(fā)現(xiàn)者為整個麻雀種群尋找食物并對所有追隨者提供捕食方向,因此具有較好適應度值的發(fā)現(xiàn)者會優(yōu)先獲取食物,而且發(fā)現(xiàn)者可以獲取更大的覓食搜索范圍.

以預警值大小更新發(fā)現(xiàn)者的位置,在每次迭代中,發(fā)現(xiàn)者的位置更新如下:

其中,t為當前迭代次數(shù),j=1,2,···,d.Xit,j表示第i只麻雀在迭代t次時的第j維值.itermax是迭代次數(shù)最多的常數(shù). α ∈(0,1]是一個隨機數(shù).R2(R2∈[0,1])和ST(ST∈[0.5,1])分別表示報警值和安全閾值.Q是一個服從正態(tài)分布的隨機數(shù).L表示一個1×d的全1 矩陣,其中每個元素都是1. 當R2

追隨者是適應度比較差的個體,它們監(jiān)視發(fā)現(xiàn)者尋找食物,為競爭食物會改變當前的位置. 更新追隨者的位置,根據(jù)式(15)更新追隨者的位置.

其中,Xp是發(fā)現(xiàn)者所占據(jù)的最佳位置.Xworst表示當前全局最差位置.A表示1×d矩陣且其中每個元素隨機分配1 或?1,A+=AT(AAT)?1. 當i>n/2時,表明第i個適合度值較差的麻雀最有可能挨餓.

在模擬實驗中,我們假設意識到危險的麻雀占總數(shù)的10%–20%. 這些麻雀最初的位置是在種群中隨機產(chǎn)生的. 根據(jù)式(16)更新位置,數(shù)學模型可以表示為:

為簡單起見,當fi>fg表示麻雀在種群的邊緣.Xbest代表人口中心的位置,在它周圍是安全的.fi=fg的研究表明,處于種群中間的麻雀意識到了危險,需要靠近其他麻雀.K為麻雀移動的方向,也是步長控制系數(shù).

4 實例分析與驗證

4.1 實例驗證

本文以某鐵路項目管理平臺首頁為研究對象,對所提方法進行驗證. 首先以平臺界面首頁為目標任務構建任務模型,通過專家對信息元素的評價獲取該目標任務所需要的任務信息元素以及之間關系. 首先對該平臺首頁所包含的決策信息元素: 系統(tǒng)名稱、數(shù)字工廠、驗工計價、物資管理、進度報表、合同管理、變更設計、質(zhì)量工程、竣工資料、用戶管理、系統(tǒng)設置以及平臺菜單進行編碼,根據(jù)各個信息元素類型不同,將每個類型以及同類元素進行標準化設定,如表3所示.

表3 12 個待布局元素的編碼以及重要度、使用頻率

邀請平臺專家針對各決策元素進行打分以此確定布局元素之間的重要度、使用頻率以及元素之間的相關性,布局與本身之間的相關性為1,所有確定的評分數(shù)據(jù)都確定在[0,1]之間,待布局元素之間的影響因素越大則數(shù)值越大. 將評價結果進行綜合計算,重要度、使用頻率見表3,待布局元素間的相關性見表4.

表4 12 個待布局元素間的相關性

通過上述步驟完成對布局元素的編碼、界面以及待布局元素尺寸的定義以及相關數(shù)據(jù)的計算,再設定SSA 控制參數(shù): 迭代的最大次數(shù)為3 000,種群大小設置為300 (n=300),發(fā)現(xiàn)者數(shù)量和SD 分別占20%和10%,ST=0.8,通過問卷調(diào)研以及專家打分確定加權系數(shù),將數(shù)據(jù)輸入SSA 中,運用Matlab R2019b 進行輔助優(yōu)化計算求解,根據(jù)初始信息和約束條件,得到適應度隨迭代次數(shù)的變化曲線如圖4 所示.

從圖4 中可得,在迭代至20 次左右時獲得最優(yōu)解,此時12 個待布局元素在界面中的位置見表5.

表5 計算結果布局

圖4 適應度隨迭代次數(shù)的變化曲線

結合表5 的數(shù)據(jù),將重要度及使用頻率高的放置在視覺認知的最佳位置,按相關性與操作順序確定了布局元素之間的位置和距離關系,從上到下進行縱向排列得到優(yōu)化后的布局方案如圖5 所示.

圖5 兩種界面布局方案

4.2 方案有效性評價

為驗證本文方法的有效性,運用眼動生理測量實驗進行分析驗證. Holsanova 等人[21]指出不同布局對于眼睛運動行為有顯著影響,且已有眼動指標被證實與認知負荷具有顯著相關性. 本文首先歸納出5 種常用布局方式以及6 種眼動指標,運用方差分析計算F比求證不同布局與所選眼動指標之間是否具有相關性,并以眼動數(shù)據(jù)構建計算負荷量大小的評價函數(shù),用以計算不同布局間負荷量的大小.

從現(xiàn)有項目管理平臺界面中歸納出5 種常用的界面布局方式: 上下型、左右型、廠字型、口字型、T 字型,以驗工計價界面為例形成實驗樣本,如圖6 所示. 選取6 種眼動指標: 注視點數(shù)目、每秒注視點數(shù)量、平均注視持續(xù)時間、平均掃視長度、平均掃視速度以及掃視總長度. 由易到難設計5 種實驗任務: 流程審批、清單內(nèi)計價、量差計價、變更設計、價差計價,測量用戶在界面認知過程中眼睛運動行為數(shù)據(jù).

圖6 布局結構示意圖

為避免被試者因界面有序瀏覽順序而影響實驗結果,本文采用拉丁方設計實驗. 選取20 名來自工業(yè)設計專業(yè)的碩士研究生,年齡(25±3.5)歲,視力正?；虺C正視力正常. 實驗首先確定自變量是不同布局設計,因變量是眼動數(shù)據(jù),根據(jù)拉丁方設計,隨機將行與列調(diào)換形成拉丁方表格,如圖7 所示.

圖7 實驗處理順序的分配方案

通過5 種布局方式6 種眼動指標進行雙因素無交互作用方差分析計算F比,有關布局方式與眼動指標的F比值為:

SA為因素A的平方和,SE為誤差E的平方和,SB為因素B的平方和,因素A的自由度為(a–1),因素B的自由度為(b–1),誤差E的自由度為(a?1)(b?1). 由于無法避免用戶之間的個性差異,因此顯著性水平取值α=0.05,實驗數(shù)據(jù)結果如表6 所示. 查得F0.08(4,20)=2.81,F0.08(5,20)=2.71,計算得出F1=3.14>2.81,F2=6.27>2.71,結果表明不同布局方式與所選眼動指標具有顯著的影響,所得眼動數(shù)據(jù)具有有效性,基于此數(shù)據(jù)可以建立測量眼動負荷大小的評價函數(shù).

表6 雙因素方差顯著性計算分析

實驗獲取到20 名被試人員的眼動指標數(shù)據(jù),由此建立測量眼動負荷的目標函數(shù):

Ldn是指被試者界面認知過程中d布局的第n種眼動指標,矩陣可以表示為:

a是指被試者的d布局的第n種眼動指標的均值大小,矩陣可以表示為:

根據(jù)數(shù)據(jù)結果求得a值,運用Matlab R2019b 計算相乘求得界面認知過程中負荷量的大小. 讓20 名被試者對項目管理首頁初始界面及優(yōu)化后的布局界面進行驗證分析,計算結果如表7 所示.

表7 測量負荷大小結果

計算結果顯示優(yōu)化后的布局數(shù)值低于初始布局數(shù)值,表明本文基于SSA 的界面布局優(yōu)化模型后的界面相對于初始界面,降低用戶認知負荷量,提升用戶認知效率,增強了界面的可用性.

5 結語

本文以降低用戶認知過程中的負荷大小及減少界面設計的主觀性為目標,建立融合眼動負荷的界面布局設計原則并運用SSA 進行優(yōu)化設計. 該方法綜合考慮到界面對用戶影響因素,從客觀的界面布局基本原則及用戶主觀認知出發(fā),建立結合認知負荷的工效學和美度計算的目標優(yōu)化函數(shù),通過對信息元素的合理布局,提升用戶的認知效率,降低用戶認知過程中負荷大小,增加用戶對界面的滿意度,提升了系統(tǒng)平臺的可用性. 此次研究還未考慮到布局元素的顏色、動效等視覺因素對用戶認知過程負荷大小的影響,后續(xù)的研究中會進一步探索并完善該研究.