手风琴折叠菜单 icon：哪个效果最好？恶搞|马仔|揭露|团购|故事|社区

编辑导读：手风琴菜单常常在多级目录中使用，是系统设计中常见的设计之一。在实际应用设计中，我们应该使用哪个图标icon才能更好地示意手风琴菜单可以展开更多内容这个含义呢？本文作者对这个问题展开了分析探讨，一起来看看~

文章插图
01 什么是手风琴Accordion？
在移动设备上，手风琴（Accordion）/折叠菜单是必不可少的工具，因为它们可以折叠内容并使页面长度易于管理，即使在 PC 端的页面上，它们也可以减轻视觉复杂性。
在我们的移动用户体验和 App 设计中经常问到的一个问题是：我们应该使用哪个图标icon来更好地示意此处可以展开更多内容？
换句话说，手风琴的最佳 icon是哪个？
我们决定对这个问题进行调查，我们找到了几种市面上正在使用的 icon 图标来表示手风琴：
尖号（向下箭头）
加号
右箭头
空白

文章插图
尖号（向下箭头）

文章插图
加号

文章插图
箭头

文章插图
空白
我们决定尝试进行了一次调查，以找出这些 icon 中的哪一个最能示意想要表达的意思。
02 方法
1. 准备工作
我们创建了 11 个移动网站的原型，每个原型属于不同的行业——包括了服装电商，大型商超，汽车配件，金融，新闻，地方政府，高等教育， DIY 家庭项目，消费品评论，医疗保健和旅行。
对于每个原型，我们创建了一个任务。例如，在消费品评论网站的原型上，任务是“查看洗碗机评论”。
我们为手风琴 icon 创建了 5 个不同的样式（如下图），icon 将为所有项目的原型随机分配，这意味着参与调研的用户可以随机看到。

文章插图
或许已经有人发现我们多了第 4 个箔icon（Foil，以下简称箔），是的，我们是想确认一下，一个不那么相关的 icon 是否会影响到用户的决策。

文章插图
5 个不同的样式的原型
我们将手风琴 icon 放置在其相关菜单的最右侧，靠近屏幕边缘并且右对齐（最右侧可规避由于菜单内容的长度过长影响到用户的观看或点击）。
2. 参与调研用户
136 名参与调研的用户，并确保所有参与者都看到了所有不同 icon 的实例（以不同的原型和不同的顺序）。
将要调研的数据：
点击位置：参与调研的用户在页面上点击的位置（直接在菜单文本上点击，在图标上点击亦或在文本和图标之间的空白区域或在页面上的其他任何地方）。
用户预期的结果：对有关任务的期望值（直接进入新页面，在同一页面上看到其他链接列表，或其他）。
3. 点击的位置
当有手风琴 icon 时，用户更倾向于点击 icon 而不是文本内容（对于所有其他 icon（如箭头、加号），从统计上来看并没有非常明显的偏好）。
而当没有 icon 时，用户的点击呈现出了截然不同的结果。

文章插图
当没有 icon时，用户通常会点击菜单文本处，当有 icon 时，用户更倾向于点击 icon
这一发现一点都不令人感到惊讶，因为在菜单没有 icon 的场景下，“icon 区域”只是空白区域，用户通常会选择与有明显指示符的位置进行交互，如点击菜单的文本区域。