基于认知规律的用户界面信息布局设计方法

姬文渊，吕 健，刘 翔，徐小萍，赵子健

(贵州大学 现代制造技术教育部重点实验室，贵州 贵阳 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 结束语

以减少用户界面布局设计过程中的经验性和主观性和提高效率为用户界面布局的目的，本文提出了基于认知规律的界面任务信息布局设计方法。该方法以目标任务为导向进行界面布局设计，通过对任务信息的合理布置，使用户可以专注于任务本身，提高了用户的工作效率。此外，该方法实现了界面布局人工寻优过程的算法化，减少界面布局设计时对经验过多依赖，极大提高了设计效率。但目前该方法只涉及用户认知规律中的视觉部分以及界面布局中几何位置匹配的问题，针对界面布局中的其它因素，如：待布局元素的大小、颜色等因素并没有加以考虑，接下来将针对上述问题和用户注意力机制等内容进行进一步的研究。