基于用户满意度的图标动态形式设计①

方年丽,吕 健,金昱潼,朱姝蔓,尤 乾

(贵州大学 现代制造技术教育部重点实验室,贵阳 550025)

图形图标是人机界面关键组成部分,在信息识别和分辨方面具有不可取代的优势,使用户更高效的与应用程序、系统和设备进行交互[1].动态图标是一种其属性会随着时间改变的交互式元素,以此将特定情况下的程序运行所处状态和功能传达给用户[2].在认知心理学领域,动态图标对于认知绩效影响的研究表明,动态图标不仅能够帮助用户更好的理解人机界面[3]与任务需求[4],还可以增加用户使用界面时的愉悦感,增强界面的交互活力[5],用于吸引用户或观察者的注意力[6].用户对于动态图标的认知会随着动态形式的改变而改变.因此分析图标动态形式特征,研究在不同的动态形式下用户满意度,并针对动态图标进行优化设计,以此增强动态图标传达状态的效率.

在认知心理学领域,相关学者主要关注图标对人类感知能力与认知绩效的影响.早期学者发现动态图标对增强用户对于当下系统的任务理解有积极作用[4]；不同复杂度的图标动画对用户的理解以及偏好会导致不同的认知绩效,因此应该在图标设计中应该就采用复杂还是简单动画的问题建立准则[7]；在视觉搜索实验中,也有文献指出不同形状复杂度的形状[8]、图标颜色数量和一致性均对人类的认效率存在影响[9],结果表明,认知绩效的增长幅度随形状特征而变化,且利用颜色增大图标之间的差异,能够更有效地提升图标的视觉搜索效率.对于图标形式对于用户体验的研究发现,图标能否准确传达目的与意图直接影响用户对产品的使用效率和满意度,因此图标的设计应该达到用户的期望,并遵循于用户的认知、习惯及需求[10].

综上所述,人与动态图标的交互过程中,图标的动态形式与形状特征均会影响用户认知绩效、用户偏好与用户满意度.以上研究从图标的几何形状、抽象性、复杂度、颜色等方面对人体的生理及心理的影响,发现了动态图标可以增强用户对于人机界面的理解性与认知绩效,而图标形式则会影响用户的满意度.研究图标动态形式的设计准则对提高用户满意度及体验具有实践价值和理论意义,但是以上研究大多只是基于人类视觉系统对于图标设计的感性判断,并没有形成量化分析模型,尚缺乏对图标动态形式的量化研究,未深入探讨图标动态形式与用户的使用感受之间的关联性.

本文在已有研究的基础上首先考量Kineticons[11]类动态图标4 种物理属性——路径、范围、方向与速度并加以描述,并通过阈限测量方法调查动作时间阈值,利用回归分析建立动作幅度与动作时间的预测模式,获得图标最佳动作时间的量化模式,最后通过动态范围适合度调查提供最佳动作幅度的设定依据,提供人机界面动态图标形式设计的参考依据.

1 动态图标形式研究方法

1.1 动态图标分类与形式研究

动态图标的应用广泛多元,众多学者提出了不同的动态效果,而这些动态效果所参照的动作来源也不尽相同,有的是简单的移动、旋转,有些则是依照物理和自然运动进行设计[12].因此按照动态图标的设计来源,可以将动态图标分为常规图标、动画式图标、动作式图标、情绪图标四类.

常规图标(Conventional Icon)的内容通常是象形文字或表意文字,它们的视觉属性也可以沿着其他维度进行修改以传递额外的信息；Chen 等[13]提出了情绪式图示(Empatheticons),此类动态图示模拟用户情绪,在一款音乐推荐系统Group Fun 中加上不同情绪的动态图标来推荐音乐；Baecker 等[1]和Bodner 等[14]率先使用了动画图标(Icon with Animated Graphics),动画图标是一种其图形内容随着时间的改变而改变的一类图标,并且用动画序列来描述变化；Harrison 等[11]依照自然界中的动作给予图像动态效果,并且定义了一种基于运动的图像方案——Kineticons,它是一系列几何操作(例如：缩放、旋转、变形、平移)的结果,与静态图标和带有动画图形的图标相比,动态行为不会改变视觉内容、像素、RGB 值.

1.2 图标动态形式

根据Harrison 等[11]提出的Kineticons 图标的定义,Kineticons 图标为一系列动力学行为的结果；同时,有研究指出影响动态图标形式的4 种物理属性,分别是路径(path)、范围(area)、方向(direction)以及速率(speed)[15].也有实验表明,用户会因为移情作用对动态效果存有特定的情绪,动态形式(速率、范围、方向、路径)的细微变化也会引起用户的感受变化[16].速率是指图标运动发生的速度,如果图标动作速度太慢,可能会使用户感到厌烦或沮丧；而速度太快会导致用户来不及反应而丢失交互目标或正在进行的交互任务,适当的过渡速度可促进用户跟随人机界面交互,而不会使任务复杂化[17].Google Material Design 建议在满足持续时间尽可能短的条件下,同时避免太过突然或震颤；有研究指出动态图标的方向能够向用户传达正确的信息,方向是制作动态图标中最重要以及最有用的设计原则,当动态图标从一种状态切换到另一种状态应该总是在一个方向上的.但是,当一个人想要取消或者撤销一个操作,移动的方向应该是相反的[18]；路径指图标的运动轨迹,范围指元素在动画的两个帧之间移动的距离,图标运动一般依照自然界中的物体运动,例如对角线运动看起来就是自然的弧线运动,动态图标的设计应根据重要级别使用简单或复杂的运动[19].

上述围绕图标动态形式的设计与研究大多是基于相关设计人员根据经验和感觉的设计,缺少一定的理论模型.在已有的研究基础上,本文依照Kineticons 类图标左右移动、上下移动、缩放、旋转4 种动力学行为,通过对动态图标的4 种物理属性(路径、范围、方向与速度)的适合范围调查,从而确定动态图标设计的基本准则.

1.3 心物关系测量方法

本文采用阈限测量法测量图标动作时间的上阈、下阈、舒适阈值,从中调查动态图标动作幅度与动作时间的相互关系.Darley 等[20]认为物理刺激和人的感觉之间存有一致性关系,这种关系常被称为心物关系(psychophysical relation),感觉器官接受的刺激在引起任何感觉之前必须达到最低强度,这种刺激感觉系统所需的最低物理能量即刺激强度称为绝对阈.阈限测量法主要有上下法(up-and-down method)、阈限追踪法、定值刺激法等.上下法主要由实验人员操作,调整刺激量至受测者第一次发现刺激时则终止测试,其中不断增加刺激量,该方法称为提升试验(ascending trial),也可以搭配刺激量降低的方式进行,称为下行试验(descending trial)；定值刺激法的操作方式主要由实验者给定刺激强度的最大值及最小值,并且定义每次刺激变化量的值,此变化量的值在两极端刺激量之间.进行阈值测验时,以随机的方式呈现各个刺激量并纪录感觉阈值.

本文参考相关研究与感觉测量方式,探讨动态图标的动作幅度与动作时间舒适阈值之间的相互关系,并考虑受测者自行调整可能造成的数值记忆问题,将采用上下法与定值刺激法的拓展使用,从而测量出用户所能接受的图标动作时间的上阈值、下阈值,最佳阈值,为进一步测量图标动作幅度提供数据支撑.

2 图标动态形式调查实验

2.1 实验材料

实验依据Kineticons 图标所定义的动力学行为,定义了图标左右移动、上下移动、缩放与旋转4 种基本动态形式,并以路径、范围、方向与速度[15]描述动态图标.本研究中的实验设计采用Illustrator 软件进行图形设计,使用After Effects 软件生成gif 动画,最后使用Proto.io 开发应用程序原型.该原型是为模拟在线社交而开发的移动应用程序.

如图1所示,考虑到动态图标的特性与时下动态图标设计软件的偏好设置,范围即为动作幅度,速率修改为动作时间.4 种图标动态形式的定义如下：如图1(a)、图1(b)所示,左右/上下移动的图标沿着X/Y 轴来回匀速移动,图标以坐标轴原点为基点,图标的移动幅度不断增加,在一定的移动幅度下动作时间不断增加,动作幅度与动作时间决定了图标运动速率.

图1 图标动态形式

图标以圆心为原点进行前后缩放,并以对角线放大后与放大前的半径增幅△R：△R=R2-R1为图标缩放前后的半径增量,R1为原始图标半径,R2为放大之后的图标半径.即图标按照设定好的倍率增大随即缩小至原有大小,在一定的缩放倍率中动作时间不断增加,缩放倍率与动作时间决定了图标缩放速率,如图2(c)所示.图标旋转以坐标轴原点为旋转中心,图标的旋转角度按照一定的增量变化,在一定的旋转角度中动作时间不断增加,旋转角度与动作时间决定了图标旋转速率,如图2(d)所示.

在动作幅度的设定上：上下/左右移动的图标自原点上下移动15 px 开始,动作幅度以15 px 的变化量增加至135 px (自0 px 开始),每段动作幅度的运动时长以50 ms 的变化量增加至2000 ms,一共得到360(40×9)个上下/左右移动样本,如图1、图2；图标旋转阈值测量以15°的变化量旋转至360°位置(自0°开始),每段动作幅度的动作时间以50 ms 的变化量增加至2500 ms,一共获得1200 (50×24)个样本；前后缩放的半径增幅量为2 px,半径增量自2-40 px,每段动作幅度的动作时间以50 ms 的变化量增加至2000 ms,总共800 (40×20)个样本.

2.2 实验被试

据中国互联网络信息中心《2018年中国互联网络发展状况统计报告》报告称,出生于1981～1991年之间,年龄在19～29 岁之间的青年人群是网民占比最多的且中国网民中学生群体最多,占比达24.8%.在这种情况下,在贵州大学现代制造技术教育部重点实验室学习的19～29 岁的互联网用户被选为该研究的样本.16 男,14 女,年龄19～29 岁(描述性统计如表1),视力或矫正视力正常,无色盲色弱,实验开始之前熟悉实验程序,被试距离屏幕中心300～350 cm.

表1 实验参与者特征

图2 动作时间阈值调查

2.3 实验1.动态图标动作时间阈值调查

实验调查动态图标的最佳、上阈、下阈动作时间,以被试的舒适感为判断标准,分别测量被试在不同幅度下四种动态图标形式的最佳动作时间(被试感觉上最舒适的图标运动时长)、动作时间上阈和动作时间下阈,上阈/下阈的测量均在不引起被试不舒适感的前提下,被试能够忍受的动作最长/最短时长.

本文不考虑手机外观对于被试的影响,仅限于具有屏幕尺寸和图形设计限制的手机屏幕,且关注动态图标本身的运动形式对于用户满意度的影响,因此不考虑界面中的其他因素[21].实验1 的样本呈现在15 英寸(38.1 cm)的显示器中央,设定样本背景颜色为白色(RGB：255 255 255),显示屏分辨率为2560×1600 px,亮度为180 cd/cm2,移动端的尺寸采用目前市场占比较多的750×1334 px,界面显示为灰色(RGB：62 62 62)位于屏幕中央.为了避免情感效应[15]以及熟悉度对图标动作时间阈值选择的影响,动态图标4 种样式均选用生活中常用样式：其中图标的上下、左右移动与前后缩放形式设定参考iOS 设计规范与Material Design[16]建议的44×44 px 的圆形；为了方便测量观察旋转角度的动作时间阈值,旋转图标选用2×35 px 的圆角矩形.所有图标刺激采用蓝色(RGB：62 159 255),以降低刺激背景与前景一致性所产生的视觉疲劳,如图2所示.

实验1 开始前由实验人员向被试阐述实验注意事项,实验第一阶段由实验人员控制图标动作幅度与动作时间的升降,并记录受测过程中每段动作幅度下被试感觉最舒适的动作时间.为防止被试受记忆值影响,每次受测前将数据归零.受测过程中被试需要每10 min休息一次,以避免被试产生生理性疲劳.每段动作幅度均由最短动作时间提升至被试感觉最佳动作时间,在被试感觉达到最佳动作时间时,在此基础上再次增加50～100 ms 动作时间供被试选择最佳动作时间；接着在最长动作时间的测量中,实验由最佳动作时间逐步增加动作时间,直至被试感觉无法忍受时记录该数值便终止实验；而在测量动作时间下阈时,实验由最佳动作时间以50 ms 的变化量逐渐下降至被试无法忍受的最短动作时间并记录该数据.

2.4 实验2 设计.动态图标动作幅度适合度调查

实验2 在实验1 的基础上进行,调查动态图标的最佳动作幅度.首先利用实验1 中所得的线性回归方程求出每个动作幅度下最合适的动作时间的预测值,动作幅度搭配对应的最佳动作时间获得调查图标动作幅度适合度的样本.实验样本根据动作形式被分为上下/左右移动、缩放与旋转四种,每种形式下的样本依据动作幅度从小到大、从上到下排列,被试依次对实验样本的动作幅度进行Likert 量表评分,以1-5 分为舒适度评判等级,分值越高舒适度越大,实验1-2 整体流程如图3所示.

图3 实验程序设计

3 实验数据分析与讨论

3.1 实验1 结果分析

3.1.1 动态图标沿X/Y 轴移动的回归结果

根据实验1 所获得的图标沿X/Y 轴方向的动作幅度与动作时间的数据,实验结果动作时长反映了3 种阶段下用户能接受的上阈、下阈、最佳动作时间.图4、图5显示了沿X 轴/Y 轴移动的动作幅度与动作时间的上阈、舒适值、下阈的线性回归,图标的动作时间为因变量y,动作幅度为自变量x.T 检验的结果显示不同性别的被试在感知X/Y 轴上的动作时间和动作幅度方面无显著性差异(P=0.0921＜0.05).

如图4、图5所示,对于X/Y 轴上的动作时间与动作幅度的拟合图,动作时长与动作幅度成正线性关系.随着左右移动幅度的增大,动作时长的上阈、最佳、下阈也逐渐增加,但是当动作幅度趋近与140 px时,动作时间的值几乎不受动作幅度的影响.

图4 图标左右移动与动作时间模型拟合的散点图

图标在X/Y 轴上的动作时间上阈值与下阈值无明显差别,但在舒适动作时间方面,数据表明图标在X 轴上动作时间值均小于Y 轴上的动作时间值,说明用户倾向于垂直方向上的动作幅度大于水平方向上的动作幅度.图4和图5中调整后的R2剔除了回归分析中自变量的个数得到,图标在X 轴上移动的动作时间舒适值拟合为R2=0.998(调整R2=0.982).在Y 轴上移动的动作时间舒适值拟合R2=0.970(调整R2=0.966),拟合度较高.

图5 图标上下移动与动作时间模型拟合的散点图

基于所有受试者的动作时间的最佳、上阈、下阈平均值,在Spss 中执行变量相关性分析(F表示显著性水平,P表示检验水平),从表2可以看出动态图标沿X 轴移动的动作幅度与最佳动作时间显著正相关F(1,7)=40.661,P=0.000＜0.05.动态图标左右移动的动作时间上阈线性回归方程为：y=4.935x+398.89 (R2=0.991,P=0.000＜0.05)；下阈线性回归方程为：y=1.699x+27.685(R2=0.991,P=0.000＜0.05)；动作时间舒适值线性回归方程为：y=3.196x+191.06 (R2=0.982,P=0.000＜0.05).动态图标沿X 轴移动的动作幅度与最佳动作时间显著相关,F=24.996,P=0.000＜0.05,动态图标Y 轴方向移动的动作时间上阈线性回归方程为：y=4.197x+418.7(R2=0.990,P=0.000＜0.05),上下移动距离与动作时间下阈线性回归方程为：y=1.002x+48.009(R2=0.975,P=0.000＜0.05),上下移动距离动作时间舒适值线性回归方程：y=2.101x+223(R2=0.970,P＜0.0001).

表2 动态图标移动映射模型系数

3.1.2 动态图标前后缩放回归分析

基于动态图标前后缩放量与动作时间实验数据合理的拟合模型,图6回归线显示图标缩放与最佳动作时间拟合为99.8%(调整拟合99.8%),不考虑受试者之间的差异,拟合度较高.半径增幅△R与动作时长上阈值、下阈值、舒适值呈现正线性关系图,并且随着半径增幅越大,动作时长则越大.动态图标缩放量与动作时间上阈线性回归方程为：y=16.098x+463.3 (R2=0.994,P=0.000＜0.05),缩放量与动作时间下阈值线性回归方程为：y=6.317x+62.397 (R2=0.985,P=0.000＜0.05),图标缩放量与动作时间舒适阈值线性回归方程为：y=13.529x+221.5 (R2=0.998,P=0.000＜0.05).表3提供了最佳动作时间、上阈、下阈的映射模型系数,显示半径增量与最佳动作时间显著正相关(F=47.65,P=0.001＜0.05).

图6 图标前后缩放与动作时间模型拟合的散点图

表3 动态图标缩放映射模型系数

3.1.3 动态图标旋转形式回归分析

在图标的旋转度实验中,被试会因为各种情况而导致个别实验数据出现突变,针对此类数据再次试验之后数据恢复正常.除此之外实验过程中,相比速度较慢的旋转图标,被试对旋转速度快的图标容忍度更低,这与旋转速度快的图标引起的视觉不适有关系.图7为图标旋转度与动作时间的散点图.如图7所示,基于所有被试选择的旋转形式下动作时间平均值计得到拟合模型,对动作时间的平均值进行组内ANOVA 分析,表明图标自变量旋转角度与因变量动作时间的线性关系显著,均不考虑受试者之间的差异,拟合度较高.由图7所示,随着旋转角度的增大,动作时间则越长,但是当旋转角度趋近360°的情况下,被试对于动作时间上阈的容忍度也逐渐增加,也就是说被试能接受更长的动作时间.

表4提供了最佳动作时间、上阈、下阈的映射模型系数,动态图标的旋转角度与动作舒适时间显著相关F=57.223,P=0.000＜0.05,随着旋转角度的增加,动作时间也呈正相关增长.动态图标旋转角度上阈线性回归方程为：y=3.444x+410.05 (R2=0.997,P＜0.001),下阈线性回归方程：y=1.101x+128.67(R2=0.979,P=0.000＜0.05),舒适值线性回归方程：y=2.075x+242.96(R2=0.993,P=0.000＜0.05).

图7 图标旋转角度与动作时间模型拟合的散点图

表4 动态图标旋转映射模型系数

3.2 动作幅度适合度(实验2)数据分析

实验2 目标是确定动态图标4 种形式在该移动设备下的最佳动作幅度,将不同最佳动作时间下的动态幅度所获得的评分进行单因子变异数分析,失踪动态形式均显示显著差异,为了解不同的差异情况,再次将平均评分进行Duncan 法多重检验.

由表5,左右移动的图标最合适的动作幅度是75 px,其平均评分至3.79 分,动作幅度120 px、90 px、105 px与75 px 的评分无明显差别.上下图标的最佳动作幅度为90 px,其最高评分为3.83 分,动作幅度75 px、105 px、120 px 的评分与最高评分的移动幅度无显著差异,略高于左右移动最佳动作幅度,这与移动端的尺寸有关.

表5 Duncan 法鉴定结果

图标旋转角度在120°的时候获得最高平均评分3.71 分,旋转角度在90°、135°、60°、75°、360°的评分无显著差异,可以发现,用户对图标的旋转角度并无绝对的偏好,用户对旋转角度的偏好可以将旋转角度分为75°、120°、270°、360°四个阶段,可以满足设计师对不同意象的设计需求.图标前后缩放最高的是半径增幅为18 px,平均评分为3.78 分,其与半径增幅量为20 px、16 px、22 px 的评分无明显差别,与旋转的用户偏好的动作幅度不同的是,用户对于缩放的比例倾向于不超过原本图标的2 倍.

根据实验2 中得到的最佳动作幅度,将4 种动态形式下的最佳动作幅度运用在实验1 中得到的回归方程中,获得4 种动态形式的最佳动作时间、上阈与下阈.如表6所示,不同的动态形式推荐使用不同的动作时间；左右移动与上下移动的动作时间上阈、下阈数值上无明显差别；前后缩放与旋转形式的动作时间上阈、下阈、舒适值的数值也无明显差别；4 种动态形式的动作时间舒适值通常在450 ms 左右,动作时间均未超过1 s.

表6 动态效果设计参考值

4 讨论

从本文的实验结果可以看出,动态图标的动态形式与运动方向、速率、路径、范围显著相关,用户对于不同的动态形式会产生不同的情绪感受与满意度.根据实验1 和实验2 中动作时间阈值测试及分析结果,结合Google Material Design 与Fluent Design 推荐的动画时长,发现在4 种动态形式下,移动端的动态图标运动时长在450 ms 左右最为合适；即使是动作时间的上阈也不大于1 s,不然会使用户产生迟缓、卡顿的感觉.

4.1 图标复杂度与动作时间变化

根据实验1 的数据显示,当相同元素的图标沿X/Y 轴做匀速运动的动作时间明显小于图标做前后缩放以及旋转运动的动作时间,因此推测动作时间的偏好与动态图标复杂度相关.为了确定图标复杂度对动作时间偏好的影响,基于五分量表法计算了4 个运动图标的复杂度,包括形状复杂度和运动复杂度,将简单形状的复杂度设置为1,评价结果示于表7.

表7 动态图标复杂度

该结果表明,旋转形式的复杂度最高,且与之对应的运动时间最高.结果与之前的假设一致,用户对复杂形状和运动模式(旋转、缩放)的关注负荷高于简单运动模式(水平运动和垂直运动),用户的注意力负荷小于复杂的运动模式,因此用户需要更多的时间认知动态图标,因此,除了表6中得到的一般状态下的动作幅度与动作时间外,针对复杂的形状以及运动模式下,动态图标的动作时长应该合理增加.

4.2 设备尺寸与动作幅度变化

当相同元素的图标做沿X/Y 轴的匀速运动时,用户更加偏向Y 轴上的动作幅度大于X 轴上的动作幅度,这或许与智能设备的尺寸与重力(weigh)相关,实验中采用的设备模型长宽比大于1,除此之外,研究显示用户更加倾向于重力方向一致的运动方向,为用户增加了Y 轴方向上的动作幅度接受程度.因此,与之前的一些研究结果类似,最佳动作幅度的数值与设备尺寸呈正相关,较大的屏幕需要更大的动作幅度,更多的运动时间,以确保图标不会移动得太快.除此之外,动作幅度的大小与设备尺寸以及需要表达的意向相关,根据实验过程中被试反馈,不同的动作时间与相同的动作幅度形成了不同的图标运动速率,即使在试验前并未对被试提及联想意象,被试在试验过程中仍旧会联想到旋转速度相似的意象,例如：汽车的雨刷、时针摇摆、晃荡的秋千等,用户偏好的动作速率总是与自然界中的运动相对应,说明用户更加偏好于接近自然界中平滑连贯的动效.

综上所述针对图标动态形式设计时,为了达到高满意度与低认知负荷,除了依照实验1 中得到的预测模型与表6中的建议数值,根据情况的不同动作时间与动作幅度可以做相应的调整：(1)复杂的形状以及复杂的运动模式,动态图标的动作时长应该合理增加；(2)幅度大、复杂的、全屏过渡的动画需要更长的持续时间,相同时间内图标做长距离运动时,动作时间应该比短距离运动时更大,更大的屏幕需要更多的动作时间来确保图标不会移动过快；(3)动作幅度与动作时间的设定应尽量贴近自然界中的运动.

5 结论与展望

研究结果表明,动态图标运动方向、速率、路径、范围对动态形式有显著影响；对动态图标的最佳、上阈、下阈动作时间设定影响最大的是图标动作幅度,其次为动作复杂度,而动作幅度的设定与设备的尺寸相关.本研究基于用户偏好满意度对动态图标进行改善,为人机界面以及动态图标设计提供了理论参考.

本研究调查对象为移动端APP 界面中使用的动态图标的影响,但仅限于具有屏幕尺寸和图形设计限制的手机屏幕,许多研究限制仍有待解决.未来需要研究动态图标对用户指导的作用,以及动态图标对用户脑力负荷的影响进行详细的评估,该评估将使用眼动追踪和神经生理学办法完成,深入探索动态图标对于视觉搜索和认知负荷的影响,为动态图标的设计模式制定更详细的标准是提高用户对人机界面的认知绩效以及体验的重要环节.