基于認知負荷和遺傳算法的醫療APP 界面布局設計

王玲瑋， 王 菊

（中國礦業大學 建筑與設計學院， 江蘇 徐州 221116）

0 引言

目前功能強大的數字界面已經滲透到生活中的方方面面，目前用戶可以通過醫療APP、小程序進行預約掛號、問診咨詢、線上面診等。 許多用戶在使用醫療APP 的時候，會出現情感化需求、簡易化需求、人性化需求等用戶需求[1]，同時也存在許多問題，例如現今的醫療APP 界面模塊的不合理布局可能會讓患者感到醫療平臺庸俗，并且低效的界面設計并不能滿足用戶高效的預約求醫需求[2]。在信息系統龐大繁雜的前提下，醫療APP 數字界面信息量大，信息結構復雜，用戶認知與復雜的信息界面系統之間易失去平衡，易造成用戶認知負荷，尤其是對于就醫最頻繁群體之一的老年人，預約掛號等數字界面對于他們來說過于復雜。 目前， 針對用戶界面設計優化主要有兩個方向：一是通過利用算法或生成式設計等技術手段對界面布局進行設計； 二是通過主觀量表等方式搜集用戶主觀認知數據改良用戶界面[1]。

本文將認知負荷和遺傳算法進行融合， 對醫療APP界面布局設計進行界面原則分析與優化設計。 將用戶醫療APP 界面主觀認知負荷反饋與界面布局設計原則結合起來，借助遺傳算法生成最優方案。

1 認知負荷和遺傳算法

1.1 認知負荷

澳大利亞學者Sweller[3]于1988 年提出了認知負荷理論，其理論基礎主要包括資源有限論和圖式理論。 Sweller[4]將認知負荷分為三類：內在認知負荷、外在認知負荷和相關認知負荷。 用戶交互任務的可靠性和效率在人機交互研究數字界面中逐漸受到關注， 盡可能的降低界面設計對用戶決策造成的認知負荷是界面設計中試圖解決的一個重要問題[5]。 在目前認知負荷的應用領域當中，對人機交互中關于日常交互場景的研究較少， 用戶的認知負荷的變化會影響日常交互過程中的安全性和效率， 以及用戶的交互動機和情感[6]。 人機交互數字界面影響認知負荷的因素很多，主要的有以下三點：界面元素的組織和呈現方式、系統和界面的復雜性以及操作者的專長水平[7]。 而本文主要解決優化的是在醫療APP 當中由界面元素的組織以及呈現方式所造成的認知負荷問題。

1.2 遺傳算法

遺傳算法（GA）[8]是一種過程搜索最優解的算法，其基于生物界規律和自然遺傳機制，是由美國John Holland創建的，具有并行搜索、簡單通用、魯棒性強等優點，受到了國內外學者的關注。 Srinivas 等[9]曾提出一種優化界面控件和顯示的布局方法， 該方法結合了切片樹和遺傳算法。切片樹是一種界面布局的方法，它將界面布局原則轉化為一種樹狀結構的表示形式。

1.3 認知負荷與遺傳算法的結合

遺傳算法與用戶認知負荷結合的基礎在于將調研生成的用戶對于目前醫療APP 存在的主觀認知負荷和基于此總結出的界面布局設計原則相結合，首先提出基于用戶認知負荷的界面布局原則；運用切片樹方法，根據提出的界面布局原則和現有案例布局方案， 將界面元素轉化為切片樹結構，確定相應的布局指標，將界面布局方案的指標作為自變量，用戶認知負荷值作為因變量建立適應度函數，適應度函數的目的是根據界面布局方案的指標值評估其對用戶認知負荷的影響；對界面布局特征進行編碼，后進入遺傳算法中進行計算，得到優化后的界面布局方案集。 將認知負荷作為因變量融入進遺傳算法的前提適應度函數當中，在遺傳算法的計算流程中，適應度函數起到了評估和選擇個體的作用，交叉和變異操作引入了遺傳進化的機制。

2 醫療APP 界面設計方法

2.1 醫療APP 界面設計

對醫療APP 進行界面設計時， 以用戶需求為落腳點， 對交互界面進行科學合理的設計，使醫療APP 成為人們就醫問診的主要平臺之一[10]。 以結合認知負荷與遺傳算法的設計方法為要點， 解決用戶使用醫療APP時產生認知負荷較大的問題。 本文方法流程圖如圖1 所示。

圖1 用戶認知負荷導向的界面布局優化流程

2.2 建立基于認知負荷的醫療APP 界面布局設計原則

本文以現有的醫療APP——“微醫”，以首頁“去掛號”模塊中的目標醫院預約掛號界面作為調查對象，以此為例對當下醫療APP 界面設計進行認知負荷問題采集， 評估內容按照布局模塊劃分為頁面標頭與返回、醫院信息、咨詢欄、搜索欄、科室類別、選擇類型內容共六個模塊，并根據模塊搜集NASA-TLX 量表[11]，通過線上渠道發放問卷80 份，其中收回有效問卷67 份。最終梳理總結獲得醫療APP 界面設計認知負荷問題見表1。

表1 醫療APP 界面布局設計認知負荷問題

基于調研梳理出的認知負荷問題， 結合用戶對于醫療APP 界面主觀認知負荷反饋以及通用界面布局規則，提出基于用戶認知負荷的醫療界面布局設計原則如下：

原則1： 層次性原則 根據界面中元素的重要程度進行排列，內容模塊區域盡量放置在界面的中心，可操作按鍵布局放置應在顯著的區域。醫療APP 當中科室類別、咨詢與搜索欄等模塊使用頻率較高。

原則2：相關性原則 在用戶操作某一任務時，同一任務中所涉及的操作區域、界面元素應該處于相近位置。

原則3： 舒適性原則 根據用戶的訪問和操作頻率來確定元素的大小、比例、位置等。 搜索欄、咨詢以及類型選擇等模塊由于操作頻率較高，其元素面積應適當放大。 針對不同用戶端設置不同的界面元素大小、比例等。

原則4： 簡潔性原則 考慮到醫療APP 具有一定的老年人用戶群體，基于醫療APP 設計特性，界面元素應該盡量簡潔、清晰、信息易識別，省去不必要的設計元素、裝飾性元素等，減少不必要的認知負荷。

綜上， 對前文總結出的認知負荷問題給予相對應的解決問題的界面布局設計原則，生成表2 所示的醫療APP 界面認知負荷問題以及其解決問題的界面布局設計原則。

表2 醫療APP 界面布局設計認知負荷問題及布局原則

2.3 建立基于切片樹的界面布局設計指標

引入切片樹的方法對界面布局問題進行編碼， 界面中的元素需要保持交互成本最小的方式來獲得平面區域上元素的布局[12]。 基于李源楓[13]將界面布局設計原則轉化為切片樹相應的計算指標幾何勢PG 和相關勢PR， 輸出用戶認知負荷值X，消耗的交互成本越小，用戶認知負荷值X 越好，流程圖如圖2 所示。

圖2 建立數學模型及計算流程

采用兩階段遺傳算法[14]來解決布局問題， 每個布局方案都可轉化為對應的切片樹。 將醫療預約掛號界面對應分割結構和對應切片樹， 圖b 中帶有數字編號的圓為元素，稱為葉子，切割節點用方塊表示；切割方式為水平切割h 以及垂直切割v，而切割比例控制著元素的長寬比，如圖3 所示。

圖3 醫療APP 預約掛號初始界面結構布局與對應切片樹

基于李源楓[13]引入切片樹的幾何勢和相關勢概念，相關勢PR指標是用于測量元素間的相鄰程度以及用戶操作時的便捷程度；幾何勢PG指標是評估一個切片樹生產其元素符合幾何限制的布局能力。其中PR、PG的表達式如下所示。

2.4 建立評估函數

上述任務完成后，基于切片樹構建評估函數Ef， Ef表示用戶操作界面時的消耗值即用戶認知負荷值。評估函數Ef表達式如下。

2.5 編碼與計算過程

完成評估函數建立之后，根據切片樹對醫療界面布局進行編碼， 隨后進入遺傳算法流程。編碼完成之后進入計算過程，在遺傳算法優化流程中，每一個布局方案都對應一組編碼。 計算目標為淘汰元素間產生的較大消耗值的個體，消耗值較低的個體進入下一代計算流程中。 遺傳算法的算法流程如圖4 所示。

圖4 遺傳算法流程

3 醫療APP 界面設計實驗

3.1 界面布局方案的生成

醫療APP——微醫預約掛號界面作為本研究的研究載體，將前期發放的問卷匯總梳理之后，結合遺傳算法進行布局優化，且只針對界面布局進行優化，不考慮界面色彩方面。算法的界面優化是在MATLAB 中進行，來實現界面優化。當評估函數Ef 求得值為最小值時， 代表用戶認知負荷值為最小，程序輸出理論最優解和特征元素布局。 根據適應度值生成隨機的4 個科室界面布局優化解，方案如圖5 所示。

圖5 預約掛號界面布局優化方案

3.2 可用性測試

生以上4 個優化界面方案后， 需要對初始界面與生成的界面方案進行可用性測試進行對比。測試共選取20 名進行被試， 其中年齡在50 歲以上的老年人12 人，20～50 歲以下的青年8 人，女性10 人，男性10 人。選定的測試任務主要從功能的使用頻率和普遍性這兩方面考慮，選擇了較為常見的外科掛號與較為不常見的精神科門診掛號任務，以及最常用的返回功能。 可用性評估標準統計被試的完成任務率來驗證方案的有用性， 通過每個被試的完成任務時間測試績效驗證效率，通過半結構式訪談法測試被試滿意度以及認知負荷。

根據可用性測試結果表明，在有用性方面，在4 個方案以及初始界面當中，被試者均完成了目標操作任務，所有方案有用性均為100%；在效率方面，采用以秒為單位的完成任務時間進行績效統計，除了方案2 外，通過遺傳算法生成的方案績效均優于初始方案；在滿意度方面，除了方案1 外，其余方案均高于初始方案。 在認知負荷方面，方案3 與方案4 的數據優于初始界面。 方案3 的數據在4 個方案中最優。對不同年齡用戶的平均績效進行對比分析表明， 優化后的界面布局方案對老年人的影響較大，對老年人更加友好。

3.3 實驗評價

經過遺傳算法生成界面布局方案以及后續針對生成的方案和初始方案進行的可用性測試表明， 基于用戶認知負荷和遺傳算法結合的醫療APP 界面布局設計方法是可行的，生成的界面布局方案在完成任務效率、用戶滿意度方面均優于初始方案， 用戶所產生的主觀認知負荷較初始方案也有一定程度的減小， 到達了優化界面布局減少用戶認知負荷，提升用戶體驗的目的。

4 結束語

本研究以降低用戶在使用醫療APP 過程中的認知負荷為目標， 提出融合認知負荷理論的醫療APP 界面布局設計，從客觀的界面布局基本原則及用戶主觀認知出發，運用遺傳算法進行優化設計，生成優化界面布局。 醫療場景下， 優化后的醫療APP 界面布局設計一定程度上降低了用戶的認知負荷，增加了用戶對界面的滿意度，各項可用性指標有明顯提升，后續的研究中會繼續探索并完善。