扁平化设计vs传统设计:对比实验研究外文翻译资料

 2022-11-27 14:57:20

英语原文共 9 页，剩余内容已隐藏，支付完成后下载完整资料

扁平化设计vs传统设计:对比实验研究

Ivan Burmistrov1,2(✉), Tatiana Zlokazova1, Anna Izmalkova1, and Anna Leonova1

1 俄罗斯莫斯科罗蒙诺索夫莫斯科国立大学工作心理学实验室{t.zlokazova,ableonova}@gmail.com,mayoran@mail.ru 2

InterUX 可用性工程工作室,爱沙尼亚塔林 ivan@interux.com

摘要：在过去的几年中，平面用户界面设计成为在操作系统、网站和移动终端应用程序的主流视觉风格。虽然扁平化设计受到了HCI和可用性专家的广泛争议但是关于扁平化设计的研究仍然很少。我们将传统实验的结果和扁平化设计的视觉效果比较研究。检查了以下类型的视觉搜索任务：（1）搜索目标文字中的单词; （2）在图标矩阵中搜索目标图标; （3）搜索可点击的网页上的对象。视觉搜索的时间和精度参数，如以及眼球运动的活动，进行了测量。结果表明，在平面搜索文本模式（与传统模式相比）拥有更高的可认知能力。相对于扁平化图标搜索实际存在的图标需要两倍的时间，并且也具有更高的认知负荷。识别平面网页上的可点击对象需要更多的时间，并且特点是显着更多的错误。我们的研究结果建议用基于几十年来研究和开发的设计原理，扁平化样式用户界面替换HCI和可用性工程实践的界面。

关键词: 扁平化设计·可用性·视觉搜索·认知负荷·眼睛追踪

1.简介

在2012-2014年，电脑和手机的操作系统，手机应用以及网站的用户界面设计在扁平化设计出现后，用户界面外观设计出现了巨大的变化。第一款设计出现在2010年的移动操作系统Windows Phone 7中。两年后，操作系统Windows 8用于个人电脑。 这种用户界面设计的新方法受到了扁平化设计界以及许多用户的热烈欢迎，因此被另外两家领先的软件供应商Apple和Google所采用。

基本的设计原则指的是电脑屏幕代表了一个独立的二维数字环境，在这个环境中没有任何东西可以复制真实世界的三维物体[2]。用户界面元素简化：使用抽象图形形式，空间用大胆的颜色填充。

文字和字体在设计时尤其重要。特别是，这导致广泛使用浓淡，轻盈和超轻的字体变体。屏幕信息的密度通常非常低[10]。

在推出后不久，设计就受到了HCI和可用性专家的批评[3,6,10-12,18]。主要的批评是设计忽略了人类大脑的三维特性，它对连接界面与现实世界的视觉线索极其敏感。从交互界面对象中移除ff指令意味着用户经常将交互式元素视为非交互式元素，而将非交互式元素视为交互式元素。

尽管存在这些限制，设计变得越来越普遍，软件行业和图形设计人员普遍忽视了HCI和可用性方面的专家。与这些专家评估（从2012年起）不同，设计实证研究的结果还不是很多，所以重要的是要进行更多的扁平化和传统设计的比较实验研究。

2.背景和相关工作

最近的实证研究主要考虑传统和流行界面的用户对性能测量的量化比较，以及用户对现实和图标的情绪反应和偏好。

Windows 8（fl in interface）及其前身Windows 7（传统界面）的可比性可用性研究表明，Windows 7在可用性的三个方面（有效性，效率和满意度）中均优于Windows 8。

在Idler [8]进行的研究中，100位网络专业人员完成了与网站上四个物体可点击性相关的任务，并评估了设计的优缺点。结果显示，在工地上工作的“虚惊”错误数量从16％到38％不等（平均29％）。作者总结说，尽管设计明显简洁，但要达到可接受的网站可用性水平并不容易。用户对桌面计算机和移动设备的应用程序图标进行比较研究表明，用户喜欢逼真的图标以75:25的比例显示图标[7]。在另一项研究中，图标在“时间性”和“简单性”等语义量表上得分更高，但在“身份”，“兴趣”和“熟悉”方面，它们的表现比现实的图标差。对iOS 6（真实图标）和iOS 7（图标中的标准应用程序）的图标进行符号学检查表明，在图标中从现实到图形的不成功转换通常与“简化”过程中语义上重要属性的丢失有关在设计时固有的[16]。

3.方法

从上述研究可以看出，对设计的实证分析仍处于早期阶段。 在我们的实验中，我们试图建立在以前的研究基础上，但也包括在我们的分析中的几个新方面。 为了对传统界面和界面进行准确的比较研究，我们选择了以下设计元素：字体，图标和网页。 除了诸如任务时间和错误数量之类的经典性能指标之外，我们还包括对认知负荷的眼动指标的分析。

实验包括两个系列：传统和佛罗里达。 在每个系列的实验参与者中进行了三种类型的任务：

（1）在包含三个段落的页面上搜索目标词，全部使用相同的字体输入（图1）。

图1.传统和文本刺激的例子

对于传统的系列，我们使用了三种类似的字体：Helvetica Neue，Arial和Tahoma（这些字体是在较早版本的OS Windows中使用的字体，以及在时代网站上的前缀）; 我们使用Helvetica Neue字体的三种变体：Condensed Normal，Light和UltraLight（浓缩字体在现代网站上很流行，而Helvetica UltraLight和Light分别是iOS 7，Beta和Final版本中的系统字体）（表1）。 目标词（例如“结构”）被随机放置在第一段，第二段或第三段中。 参与者被指示点击目标词。

表1.实验中使用的字体

（2）在显示在屏幕上的9times;9图标的矩阵中搜索描绘特定对象（例如“冰淇淋”）的图标（图2）。 目标图标的位置随机分布在矩阵的九个象限之间。 参与者被指示点击目标图标。

图2.实际和fl图标刺激的例子

（3）在现有网站的屏幕截图上搜索可点击的对象（即点击后在屏幕上改变内容的对象）（图3）。 指示参与者点击所有看起来可点击的屏幕对象（按钮，链接，菜单，图像，横幅等）。

图3.传统和fl网页刺激的例子

在每个系列的实验中，参与者获得了9张带有文字的幻灯片，9张带有图标的幻灯片和9张网页截图。每个系列的任务顺序如下：首先给参与者一个文本搜索任务（每个系列在一系列中出现三次），然后是一个图标搜索任务，然后是一个屏幕截图搜索任务。然后重复这种模式，直到所有27个任务完成。实验的不同系列（首先是传统的，然后是 - 或反过来）的顺序是平衡的。实验开始之前，参与者接受指导和培训。

这些刺激呈现在具有4：3宽高比的19英寸液晶显示器上。为了测量参与者的眼球运动，使用了EyeLink 1000眼动仪。使用TechSmith Morae 3.2数据记录应用程序记录所有屏幕事件和鼠标移动。

为了搜索目标词和图标，测量了演奏时间。对于截图任务，我们测量了单击幻灯片上所有可点击对象所花费的平均时间，并且还记录了“未命中”和“虚警”错误的数量。

对于每种任务类型，均分析眼动追踪指标，包括固定和扫视参数。这些参数在文献中被认为是认知负荷的指标，并且当认知负荷增加时显示以下动力学：注视持续时间[4,14]增加，眼跳波幅减小[13,19]，以及扫视峰值速度[1,5]。

参与者包括：来自莫斯科的19名女性和1名男性大学生，年龄在18-28岁（平均21.2岁），经验丰富的网络，智能手机和平板电脑用户。实验会议于2014年11月进行。在那时，桌面和手机已经占据了主导地位，所有参与者都对他们很熟悉。

4.结果和讨论

Fonts.文本搜索任务的表现时间和动眼测量的平均值如表2所示。

表2.文本搜索的结果

统计分析结果没有显示任何显着的表现时间差异。与此同时，认知负荷增加的眼球运动指标 - 固定持续时间的增加，眼跳波幅和眼跳峰值速度的减小 - 在传统和流行系列中显示出统计学显着差异。这种类型的测量组合（长固定和短扫视）是焦点视觉信息处理的特征：即有意识地分析信息，精确识别物体和事件，当视觉搜索任务的复杂性增加时实施这些[17 ]。在使用传统字体的文本搜索中，受试者有更多机会切换到与较低认知负荷相关联的“半自动”信息处理（其由较短的文字和较长的扫视所指示）。此外，扫视峰值速度的较低值提供了有利于将系列中的文本搜索与较高的认知负荷相关联的证据。

Icons.表3中显示了图标搜索任务的性能时间和动眼测量的平均值。

表3.图标搜索的结果

在图标搜索时间的平均值中发现显着差异：对于平面图像和现实图标几乎两倍高。与以前的任务不同，图形对象搜索中眼球运动活动的比较没有显示平均注视持续时间的任何显着差异。然而，平均扫视幅度和扫视峰值速度的差异仍然存在，就像在文本搜索任务中那样。平面系列中的值较低，这可能表明任务的较高复杂性以及平面图标搜索中较高的认知负荷。

通过监视此任务的执行过程，我们可以假设平板系列中的许多参与者在初始“快速”幻灯片扫描期间找不到目标图标。在搜索的后面，这些参与者倾向于在扫描图像时更加小心，使他们能够找到目标对象。然而，这导致搜索时间的显着增加。

Websites.表4显示了表现时间和动眼神经测量值的平均值，以及“错过”和“虚警”错误率。

正如预期的那样，传统网站的总任务执行时间更长，因为屏幕上的信息密度比平板屏幕截图上的高得多。在传统网站上，有110个可点击的屏幕区域和64个不可点击的屏幕区域（共174个），而在平面网站上有78个可点击的屏幕区域和54个不可点击的屏幕区域（共132个）。由于这个原因，计算了单个屏幕区域的平均演出时间（对于传统和平面网站）。结果表明，平面网站的屏幕区域的平均处理时间（包括对对象的可点击性和点击可点击对象做出决定）显着较高。

一个对“错过”和“虚惊”错误类型的分析揭示了传统平面网站与平面网站之间的显著差异的分析：这两种类型的错误在平面网站上显着更频繁。 值得注意的是，在我们的实验中（28％）平坦网站上的误报率与Idler [8]所做的研究中的误报率（29％）几乎完全一致。

表4.可点击对象搜索的结果

应该注意的是，在网络搜索任务中揭示了动眼神经效应，这与文本和图标搜索中发现的效果相反：在具有平坦设计的页面上搜索可点击对象的特征在于较高的扫视幅度和扫视峰值速度。然而，我们不倾向于将这些结果解释为支持传统网站工作时认知负荷较高的证据。我们认为，刺激材料的特征差异在这里起着关键作用。这些影响可能与传统平面网站设计的根本差异有关，这些差异迫使主体使用不同的扫描策略。因此，在我们对具有传统设计的网站的实验中，图形对象的数量和密度更高，接口控制工具更加明显。初始定位后，用户可以制定一个系统化的搜索策略 - 在较长的注视和较短的扫视持续时间组合中看到。相比之下，扁平化设计网站最初包含较少的图形和文本信息，这通常有助于搜索界面控制工具。这使得对象多次执行搜索活动并且多次返回查看网页的某些区域，这通过降低注视持续时间以及增加扫视的幅度和速度特性来显示。因此，对平面网站的搜索更“混乱”，这对时间和任务执行的准确性参数产生了负面影响。

5.结论

我们的研究表明，扁平化设计在我们分析的大多数方面都不如传统设计。尽管在客观度量 - 搜索时间方面没有显着差异，但在使用扁平化设计流行的字体的文本搜索会导致比在传统字体文本中搜索更高的认知负荷。平面图标搜索的速度几乎是现实图标搜索的两倍，并且具有较高的认知负荷。对扁平化设计的网页上的用户界面对象的分析和处理比传统网站（每个屏幕区域计算）花费更多的时间，并伴随着显着更高的错误率;动眼神经活动的差异反映了传统平面网页设计的特异性。

我们的实验研究支持许多HCI和可用性专家所表达的观点，即扁平化设计在用户界面领域是一种有害趋势，应该根据几十年来在HCI和可用性工程研究和实践中开发的设计原则来替代。

该研究得到了俄罗斯基础研究基金会（14-06-00371）的资助。

参考文献:

  1. App, E., Debus, G.: Saccadic velocity and activation: development of a diagnostic tool for assessing energy regulation. Ergonomics 41, 689–697 (1998)

2. Banga, C., Weinhold, J.: Essential Mobile Interaction Design: Perfecting Interface Design in Mobile Apps. Addison-Wesley, Upper Saddle River (2014)

3. Belveal, R.: Where Have All the Affordances Gone? (2013). http://belveal.net/2013/03/19/ wher

剩余内容已隐藏，支付完成后下载完整资料

资料编号：[22170]，资料为PDF文档或Word文档，PDF文档可免费转换为Word

原文和译文剩余内容已隐藏，您需要先支付 30元 才能查看原文和译文全部内容！立即支付

以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。

您可能感兴趣的文章