手风琴图标:哪种符号效果最好?

好的理由,手风琴是当今流行的UI元素:在移动设备上，它们是必不可少的工具，因为它们可以折叠内容，使页面长度易于管理桌面，它们减轻了视觉的复杂性，并允许用户关注与手头任务最相关的内容(尤其适用于复杂的应用程序)．

这是一个经常被问到的问题移动用户体验和必威手机app下载类是:这图标我们是否应该利用它来最好地表明内容将在适当的地方扩展?换句话说，什么是最好的能指手风琴?

我们决定将这个问题作为更大的移动导航和子导航研究的一部分来研究。我们研究了几种可能的图标作为手风琴的符号:

• 插入符号(或向下的箭头)
• +
• Right-facing箭头
• 没有图标

有一些细微的差别在这些图标是什么常用来表示,而脱字符号和加图标通常旨在表明,将打开手风琴,设计师使用了right-facing箭头图标信号两个不同的动作:要么呆在相同的页面上,扩大内容,或访问一个不同的页面。此外，在展开后，插入符号通常会扭曲(可能在很好的快速动画)，加号将变成减号，成为对新展开的内容进行折叠的反向动作的符号。

我们进行了定量研究这些图标中哪一个是最有效的信号，它将打开手风琴。

方法

材料。我们决定在移动导航的背景下研究手风琴，因此我们创建了11个移动网站的原型，每一个都属于不同类型的行业——服装电子商务、大卖场零售、汽车零部件、金融、新闻、地方政府、高等教育、DIY家居项目、消费品评论、医疗保健和旅游。原型并不具有交互性;它们是简单的模型，菜单已经打开，屏幕上有一个类别列表，以确保我们只是衡量与手风琴的交互，而不是用户努力定位菜单，查看主页内容，等等。

对于每个原型，我们创建了一个任务这包括在原型中可见的手风琴中寻找信息。例如，在一个消费品评论网站的原型中，任务是“寻找洗碗机的评论”。

我们还为每个原型创造了5种不同的变体;每个变体使用4种可能的图标(一个箭头，一个插入符号，一个加号，一个箔)或没有图标。我们创建了一个箔图标(之前没有用于手风琴图标)，以便查看图标类型是否重要，或者手风琴名称旁边的图标是否足以表示手风琴(但图标本身并不重要)。

我们将手风琴图标放置在其相关标签的右侧，靠近屏幕边缘并右对齐。(我们承认另一个可能的位置是在标签的左边-我们的结果可能不能概括到那个位置。)

的长度文本标签可能会影响用户在哪里看或点击，我们确保每个原型中的标签长度是平均分布的，并且每个任务的“正确”答案(即用户可能选择的菜单选项)在每个原型中具有不同的长度。

我们还进行了几个试点研究，以确保任务的成功率很高(超过90%)，并且人们能够轻松识别“正确”的菜单类别，以便完成每个任务。在每次初步研究后，我们完善了任务措辞和菜单上的标签。因此，我们有效地运行了几个可用性研究在我们的原型信息架构在我们收集定量数据之前。这个过程确保了对大多数参与者来说，找出正确的类别是相对琐碎的——因为我们的研究目标是测试手风琴能指，而不是在我们给用户的任务中找到信息的难度。

参与者．我们的研究有136名参与者。所有参与者都看到了所有不同图标的实例(在不同的原型中，并且以不同的顺序)。

过程．测试进行了UserZoom作为一系列的首次点击任务，在移动设备上管理。所有参与者都被随机地展示了11个原型中的一个版本和相关任务。在参与者指出他们会点击哪里找到答案后，他们必须回答一个多项选择题，问题是他们预计会发生什么(直接进入一个新页面，在同一页面上看到其他菜单选项，或其他)。

我们收集的数据如下:

• 点击位置:参与者点击的位置(直接点击文本标签，直接点击图标，在标签和图标之间的空间，或者原型上的任何其他地方)
• 参与者的期望:对任务结束后关于期望的问题的回答(直接访问一个新页面，在同一页面上看到一个附加的链接列表，或者其他什么)

在参与者利用

在与手风琴相关的区域外点击相对较少(5-8%)，大多数点击落在标签或与手风琴相关的图标上(而不是在两者之间的空间上)。

对用户点击文本标签时的数据进行方差分析发现，当参与者或原型被视为随机因素时，图标类型都有显著影响。两两对比表明，没有图标的情况与所有其他情况有显著不同。特别是，当没有图标出现时，点击标签的几率更高这个发现一点也不奇怪，因为“图标区域”在这种情况下只是空白的空间(我们只是跟踪人们是否点击了图标通常会出现的地方)，但这是一个重要的提醒，用户通常选择与明显的符号互动。

除了插入符号(p<0.01)，没有任何图标条件下，点击图标比点击标签有统计学意义的趋势换句话说，当手风琴由插入符号发出信号时，人们更倾向于点击图标而不是标签。对于所有其他图标(箭头，箔，加号)，在统计上没有明显的偏好。

参与者期望发生什么

分析反应任务后的问题(关于预期停留在页面)我们将新页面期望定义为一个二进制变量量化参与者是否会停留在相同的页面(0)或去一个新页面(1)。超过50%的速度为特定记号表明整体人将去一个新的页面。对于手风琴，当我们想要传达页面不会改变的信息时，理想的比率应该在50%以下。

对于标准的能指(插入符号、加号和箭头)，没有强烈的期望离开页面(因为新页面期望率与50%没有显著差异，p >0.05)。在所有的标准能指中，与箔(p<0.05)或无图标条件(p<0.05)相比，插入符号在页面上的停留期望显著更高。加号显著优于箔号(p<0.05)，但不优于无图标条件。箭头在统计上与箔或无图标条件没有区别，这表明图标不应用于手风琴。

重要发现

我们的假设是，没有图标会让用户期待点击菜单项就会直接进入新的页面，这一假设在我们的研究中得到了证实。同样，箔图标被认为与用户打开手风琴没有任何关联，这也成立。

然后，我们比较了用户报告的插入符号、加号和箭头图标与铝箔图标或没有图标的期望，以测试它们是否更适合手风琴。我们还研究了人们是否倾向于为这些不同的能指点击标签或图标，假设，如果确实有一种强烈的倾向，只点击其中一个，我们也许可以，将两者的功能分开分割按钮)．

• 对于手风琴模式，人们倾向于平等地点击图标和大多数标准图标的标签。唯一的例外是插入符号，人们倾向于点击图标，但仍有29%的点击落在标签上。这表明手风琴用拆分按钮不安全-文本标签直接链接到一个登陆页面，但图标打开手风琴。
• 为手风琴符号创建新的图标或者根本不使用符号都不是一个好主意，因为它们违背了用户的期望(它们将被带到一个新的页面)。
• 没有一个标准的能指与停留在页面上有很强的联系。也就是说:
  • 使用插入符号显然比完全不使用图标或使用随机图标更好，因为它传达了停留在页面上的期望(并打开一个手风琴)。
  • 使用箭头或加号并不比完全不使用符号更好。
• 当没有图标时，用户倾向于点击文本标签，而不是那一行的空白区域。虽然这是一个明显的发现，但这更证明了用户倾向于与强大、清晰的符号进行互动。
• 有趣的是，使用面向右的箭头图标(而不是加号或插入符号)是不合适的显著与直接跳转到新页面的期望相关。虽然许多设计师可能认为箭头图标意味着“直接进入页面”，但同样的图标向下意味着“在页面上打开一个手风琴”，这在我们的数据中是不支持的。

设计建议

• 如果在移动菜单中使用手风琴，则插入符号似乎是最安全的图标选择。
• 没有图标和文本标签链接到不同的动作(例如，标签直接到页面，图标打开手风琴)。我们的研究结果进一步支持了我们之前的建议，即您不应该在手风琴上使用拆分按钮。我们的研究显示，用户平均点击文本标签和图标，并没有期望他们做不同的事情。
• 决定你的菜单项是打开子菜单手风琴还是直接进入分类概览页面。如果您选择让您的菜单项直接链接到登录页，不要使用右对齐的图标。

总结

用户倾向于公平地同时点击手风琴图标和手风琴标签，因此避免通过给它们分配不同的功能来分离它们。使用插入符号来指定手风琴，无论是在桌面还是手机上——我们的研究发现，在使用的标准图标中，只有插入符号比没有图标或没有意义的图标更能表明它是手风琴。