基于認知規律的用戶界面信息布局設計方法

姬文淵，呂 健，劉 翔，徐小萍，趙子健

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

0 引 言

用戶界面使用過程中雜亂無章的信息會給用戶帶來搜索時間長、延遲決策、無法專注于主要任務以及認知負荷過大等問題[1]。在用戶界面設計過程中對信息進行合理組織與呈現，可以把用戶從繁重的交互負擔中解脫出來，讓用戶只需專注于任務本身，從而減輕用戶的認知負荷、縮短認知時間，提高交互效率。

用戶界面中信息元素的布局方式是影響交互效率的重要因素。目前，國內外學者對用戶界面布局設計已有一些研究。S Raeisi等[2]使用鏈值分析方法計算面板元素間鏈路的重要性和頻率綜合權重，進行界面的布局設計。Storrle等[3]指出布局時需考慮符合用戶的使用習慣。在國內，李晶等[4]通過研究結果表明，用戶界面中符合認知特征的布局設計可以提高操作人員的工作效率。鄧麗等[5]的研究結果表明，將遺傳-蟻群算法引入司鉆控制室操縱器，進行多目標求解布局問題，有效提高了布局的效率。葉坤武等[6]提出了一種基于注意力分配問題的用戶界面布局優化設計的方法。

上述文獻對界面研究做出了參考價值的研究，但并未涉及到新系統用戶界面布局設計的方法以及如何定量化構建認知規律與用戶界面布局之間的關系等方面，本文將通過以下3個方面進行進一步的研究：

(1)本文通過建立任務模型，為新系統的界面布局設計提供合理的待布局任務信息元素，并通過任務模型確定任務間的操作順序和優先級關系；

(2)以目標任務為驅動結合人的認知規律總結出布局原則，以定量化的形式構建數學模型，以求解出符合人認知規律的布局方案；

(3)在傳統用戶界面布局設計時，存在一定的經驗性和不確定性的問題，通常無法以全局最優的思想進行界面的布局設計。因此，本文通過粒子群算法將人工尋優的過程算法化，極大提高了界面布局設計的效率。

1 界面布局的相關研究

1.1 任務建模

任務建模是通過對用戶歷史行為的研究獲取用戶完成目標任務的操作行為信息，為更好的描述用戶與系統的交互過程提供支持[1]。為更好分析用戶的行為以適應界面布局可用性的需求，需構建合理的任務模型。

構建任務模型的流程如下[7]，如圖1所示。

步驟1 確定目標任務：通過現場觀察、視頻、訪談等方式獲取以往用戶完成該目標所需的行為序列，以此進行數據收集；

步驟2 任務分析：對收集到的數據進行分析，提取關鍵交互行為；

步驟3 任務建模：根據交互行為執行時間序列的關系進行任務建模。通過CTT中對任務間暫態關系的定義構建任務模型[8]。

圖1 任務建模流程

暫態關系是指任務之間存在的時間關系[9]。本文所用到的暫態關系如下：

t1|||t2并發關系、t1[]?t2帶有信息交換的使能關系、 t1[]t2選擇關系和t1[>t2鈍化關系。暫態關系的詳細定義請參見文獻[8]。

根據暫態關系的定義，對任務信息間的操作順序和優先級的關系做如下定義：

定義1 當任務間有鈍化關系時 (t1[>t2)，若禁用關系后的任務沒有執行，則前面的任務按暫態關系中的時間順序依次執行；

定義2 當任務間有鈍化關系時 (t1[>t2)，若執行禁用關系后中的任一子任務，則前面的所有任務被禁用，此時后一任務較之于前一任務有優先級。若將后一任務的優先級設定為1，前面的任務的優先級則為0。

1.2 根據人的認知規律確定布局原則

為提高用戶界面的可用性，設計師在布局設計時，需了解用戶的認知規律，以人對信息的處理、加工特性為基礎，運用人的認知規律，使用戶界面布局符合操作者對界面信息的認知加工過程，以縮短操作者在界面使用過程中認知時間，同時減輕認知負荷。下面總結一些界面布局設計中涉及到的人的認知規律，并將其轉化為布局的指導原則。

(1)視野可達性原則

視覺可達性是結合人視覺系統的特點，確定操作者能夠獲得的清晰的視野區域。從生理學的角度分析，結合GJB2873-1997軍事裝備設施的人機工程準則，根據人眼對信息察覺效果的優劣，可將視野區域分為3個區域：最佳視野區域(A)、可達視野區域(B)和條件視野區域(C)。

根據視野形成視錐的特點[10]，視錐橫截面可以表示為圖2。其中視野A區域是以水平和垂直視野范圍30°左右的視錐；B區域是水平視野范圍70°左右，垂直視野范圍為60°左右的視錐；C區域是除了A、B區域以外的條件區域，是在轉動頭部或移動身體的條件下才能看到的視野范圍。當界面中有多個待布局元素時，在滿足界面空間可容性的需求下，盡可能將待布局元素布置于A和B區域，使操作者可以快速搜索到目標任務，減少搜索時間。

(2)視覺搜索原則

圖2 視野可達區域等級劃分

視覺搜索是要求用戶在眾多視覺刺激中快速、準確搜索出目標刺激。視覺搜索率的高低取決于目標刺激所處的位置。根據古登堡圖表[11,12]顯示人在審閱信息時視覺搜索運動的基本模式是遵循Z字規律的，即從左上到右下的搜索軌跡，如圖3所示。當一個界面上有多個待布局任務信息元素時，可以根據視覺搜索軌跡按照任務間的操作順序依次排布，即在操作順序上后操作的待布局元素放置于先操作的待布局元素的右面或者是下面，使布局與用戶的歷史使用經驗以及和視覺的搜索軌跡相一致，盡可能減少用戶對界面的學習和記憶時間，以避免和減少誤操作。

圖3 古登堡圖表(視覺搜索軌跡)

(3)信息的組織原則

信息組織原則是指在視野中離散的刺激可以由于它們之間的某種關系組織到一起而形成的一個整體感[13]。當大量待布局元素需要布局時，可根據人類認知規律中的視覺組織原則將相關信息進行布置，按待布局元素之間的相關程度確定其之間的距離，如相關程度高的待布局元素之間的距離小，使相關程度高的待布局元素間形成整體感，便于操作者對界面信息的搜索與組織。

2 構建及求解目標函數

2.1 構建目標函數

該目標函數是以布局原則為目標函數的評價函數，評價函數由待布局元素的x、y軸坐標為變量構成，用以評價布局方案的優劣。當目標函數取最大值時，布局方案為最優。

為了構建目標函數，將上述3個布局原則定量化建立數學模型。

(1)視野可達性原則

視野可達性原則是在分析待布局元素在界面中所處位置與視野區域等級的關系，從理論上講，待布局元素的優先級越高其所處的視野區域更好，即待布局元素如有優先級，其所處位置一定在最佳視野區域內，如沒有優先級其所處位置可能在3個區域內的任意一個。

對用戶視野可達性的評價，主要是依據待布局元素所處區域的視野等級。對處于不同等級區域內的待布局元素的視野可達性進行賦值表示，見式(1)

(1)

式中：待布局元素i的形心的坐標為 (xi,yj)，區域A的圓心的坐標為 (xA,yA)，r為區域A的半徑；區域B的橢圓心坐標為 (xB,yB)，a為區域B的長軸，b為區域B的短軸。其中待布局元素i的形心的坐標處于最佳視野區域A內，Vi賦值為1，待布局元素i的形心處于可達視野區域B內，Vi賦值為0，待布局元素i的形心處于條件視野區域C內時，Vi賦值為-1。L為界面的總長度，W為界面的總寬度，如圖4所示。

(2)視覺搜索原則

視覺搜索原則是在探討根據人對信息視覺搜索軌跡和任務元素間操作順序之間的關系進行布局設計的原則，即后操作的待布局元素應放置于先操作的元素的右方或下方。

圖4 界面元素布局

根據任務模型可以得出完成目標任務所需執行的任務序列。在布局設計時，根據任務序列間的操作順序對待布局元素的位置進行組織。操作順序用矩陣可以表示為

(2)

式中：oi為待布局元素i在目標任務下任務信息元素間的操作順序，n為待布局元素的個數。

在獲得任務間的操作順序后對任務進行位置關系的表述，如圖5所示。位置關系可以表示為Sij，Sij表示待布局信息元素i的形心和待布局信息元素j的形心相互位置關系。

圖5 待布局元素間的位置關系

根據視覺搜索原則和待布局元素操作順序的分析，任務間共有3種位置關系，分別為：Sij={2,3,4} 時，表示待布局元素j可以放在待布局元素i的右面和下面，即j的操作順序上是在i的后面；Sij={4,1,2} 時，表示j可以放在i的左面和上面，即j的操作順序上是在i的前面；Sij={1,2,3,4} 時，表示j可以放在i的任何位置，即j與i之間沒有操作順序的要求。

操作順序與位置之間的關系用μsk表示，用以衡量各待布局元素之間在不同操作順序下相對位置變化的取值關系。當Sij={2,3,4} 時，μs1的取值見式(3)

(3)

式中：α為布局設計中兩個待布局元素之間的夾角，α=arctanyi-yj/xi-xj；根據式(3)，類似可構建μs2、μs3。

(3)信息的組織原則

信息的組織原則是在討論待布局元素之間相關性程度與其距離之間的關系，相關性程度越高待布局元素之間距離越近。

待布局元素之間的相關性程度可以用矩陣表示為

(4)

式中：cij待布局任務信息元素i和j的功能相關程度;n為待布局任務信息元素個數。

待布局元素i和其余待布局元素相關性程度與距離之間的關系可以用Ci表示

(5)

(4)目標函數

目標函數是在布局原則的條件約束下使所確定的布局方案解得到最優值。綜合考慮上述4個布局原則的數學模型，將目標函數定義為

(6)

s.t.

(7)

(8)

式中：n為待布局信息元素的個數；Vi為待布局元素i所在位置的可視區域等級；δ為布局原則的權重。待布局元素i的坐標為 (xi，yi)，其長和寬分別為li和wi，待布局元素j的坐標為 (xj，yj)，其長和寬分別為lj和wj，如圖4所示。其中式(7)為元素間重疊約束，式中兩個條件滿足其中之一即可，式(8)為邊界約束，式中兩個條件必須全部滿足。

2.2 求解算法

2.2.1 粒子群算法

粒子群算法(particle swarm optimization，PSO)常用于動態目標的尋優。PSO算法在可行解空間中每個粒子都代表用戶界面布局方案P達到最優的一個潛在解。在傳統的粒子群算法中引入慣性權重wk，使粒子群保持全局搜索尋優的同時，又能增強粒子群的局部搜索尋優能力。為更好地平衡算法的全局與局部搜索能力，本文運用線性遞減慣性權重法[14]，表示為

w(k)=wmax-(wmax-wmin)·k/Tmax

(9)

式中：k為當前迭代代數，Tmax為最大的迭代代數，一般來說，慣性權值取值為wmax=0.9、wmin=0.4時算法性能最好。

2.2.2 構建適應度函數

根據目標函數(6)可確定適應度函數為

(10)

式中

其中，U和V的取值根據具體情況設置。

2.2.3 算法實現過程

根據上述適應度函數的設計，通過粒子位置初始化獲得初始化待布局元素的布局，通過粒子速度和位置的更新來實現搜索最佳布局方案，適應度函數最終在適應度值取到最大時開始收斂。該算法的基本實現流程見表1。

表1 界面任務信息元素布局的粒子群算法

3 實例分析與驗證

3.1 實例研究

本文以隧道應急救援培訓(考試)系統的現場救援決策界面為研究對象，對該方法進行驗證。

首先，以現場救援決策界面為目標任務，進行任務建模。通過對用戶歷史行為數據的收集與分析，可獲得完成該目標任務所需的所有任務信息元素以及其之間的暫態關系。其中，目標任務為隧道應急救援培訓系統中救援現場部分所有需要決策的信息；完成該目標任務需要對以下5個子任務進行決策，分別為：救援現場信息勘測T1、次生災害判斷T2、生命體征探測T3、救援實施決策T4以及救援狀態決策T5，此5個子任務由12個任務信息元素組成，如圖6所示。5個子任務之間的暫態關系為：(T1[]?T2[]?T3[]?T4)[>T5由于T1-T4與T5間是鈍化關系，由上述定義1和定義2可知，待布局任務元素間的操作順序為(T1-T2-T3-T4)，將待布局任務元素間的優先級關系定義為：T1、T2、T3、T4的優先級為0，T5的優先級為1。

圖6 現場救援決策界面任務建模

其次，對界面區域和待布局元素進行簡化處理，構建數學模型，利于設計變量的數學描述。在該救援系統中，決策界面的尺寸為1920px×1080px。根據圖6中任務模型可知共有12個待布局任務信息元素，對12個待布局元素進行編碼，見表2。為排除尺寸的變化對認知效果的影響，將所有待布局元素的尺寸設定為280px×210px。

表2 待布局任務信息元素的編碼

然后，將決策界面看作為一個尺寸為1920px×1080px二維平面，建立以界面左下角為原點的坐標系，如圖7所示。根據決策頁面的尺寸和視野可達性原則中視野A、B、C區域的范圍可計算得不同區域在界面上所處的具體位置。結果可得，區域A的圓心坐標為(960px,360px)r=270px，區域B的為橢圓心坐標為(960px,540px),a=630px，b=540px，區域C為L為1920，W為1080的矩形減去A和B區域。

最后，確定待布局元素間的相關性cij, 待布局元素與自身的相關性是1，待布局元素與其它待布局元素的相關性用0-1之間的數值來表示，待布局元素間的相關程度越高數值越大。對有經驗的專業隧道救援人員和相關專家進行問卷調查和相關性打分，將調查結果進行綜合計算，獲得待布局元素間的相關性程度，見表3。

圖7 決策界面的坐標系

表3 12個待布局任務信息元素間的相關性

通過以上步驟，完成了待布局元素的編碼、界面以及待布局元素尺寸的定義以及相關數據的計算。將這些數據輸入到粒子群算法中并設置相關控制參數，運用MATLAB軟件進行求解。針對本布局實例，將粒子種群規模設置為：n=100，學習因子c1=c2=1.5，最大迭代次數t=100次，wmin=0.4,wmin=0.9,即w線性遞減。得到優化后的maxP≈17，計算結果平均花費2 s～5 s，在20代左右時獲得最優解，此時12個待布局元素在界面中所處的位置見表4。

使用戶界面布局獲得最優布局方案，不僅要使上述目標函數獲得最大值還要考慮待布局元素在界面上的布局是否符合人的基本審美觀和歷史經驗。結合表4中的數據，得到優化后的布局方案如圖8所示，具有優先級的待布局元素t11和t12的形心位于最佳視野區域A內，其余待布局元素的形心在滿足重疊約束和邊界約束基礎上也全部位于最佳視野區域A和可達視野區域B內。根據任務間的操作順序和相關性程度確定了待布局元素間的位置和距離關系。通過以上驗證可見，使用本文提出的方法以帶有慣性權重的粒子群算法求解最優布局方案有著較高的計算效率，也可獲得較為滿意的布局結果。

表4 12個待布局元素的位置

圖8 優化后的用戶界面布局最優方案

3.2 布局方案實驗結果與討論

本文實驗挑選20位用戶，均為具有專業隧道救援知識的工作人員，年齡在20歲～45歲之間。分別使用由設計人員根據12個待布局元素進行布局設計的界面和由本方法生成的界面進行測試(圖9)，比較相同類型用戶于兩種界面布局中執行不同難度任務的平均完成時間。如圖10(a)所示，用戶在救援決策界面中依次執行結束救援、現場災情勘測和判斷次生災害等決策，任務難度分別從單擊“結束救援”按鍵結束救援任務到使用相關探測儀器判斷現場災情狀況再到根據現場災情狀況對是否會發生再此坍塌等次生災害進行判斷，使任務的難度逐漸加大；圖10(b)是分別由設計人員將12個待布局元素隨機布局與使用本文該方法布局所需的平均時間。

圖9 兩種界面布局方案

圖10 布局方案的實驗結果

實驗結果表明，以上兩種情況下本文提出的方法均能提高工作效率，不論是界面布局設計時的效率還是用戶的完成指定目標任務的效率。從實驗結果中可發現，當任務難度提高時，使用本文方法布局的界面完成任務的效率顯著高于隨機布局的界面，但當任務難度較低時,兩者完成任務效率的效果相對區別不大，即在執行認知負荷大、較為困難的任務時，本文提出的布局方法相對有更大的優勢，此外，從兩種不同布局方法完成界面布局的時間上來看，本文提出的界面布局方法有著較為顯著的優勢。

4 結束語

以減少用戶界面布局設計過程中的經驗性和主觀性和提高效率為用戶界面布局的目的，本文提出了基于認知規律的界面任務信息布局設計方法。該方法以目標任務為導向進行界面布局設計，通過對任務信息的合理布置，使用戶可以專注于任務本身，提高了用戶的工作效率。此外，該方法實現了界面布局人工尋優過程的算法化，減少界面布局設計時對經驗過多依賴，極大提高了設計效率。但目前該方法只涉及用戶認知規律中的視覺部分以及界面布局中幾何位置匹配的問題，針對界面布局中的其它因素，如：待布局元素的大小、顏色等因素并沒有加以考慮，接下來將針對上述問題和用戶注意力機制等內容進行進一步的研究。