基于认知负荷和遗传算法的医疗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 界面布局设计一定程度上降低了用户的认知负荷，增加了用户对界面的满意度，各项可用性指标有明显提升，后续的研究中会继续探索并完善。