BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

关于汉堡包图标的A/B测试(1)

关于汉堡包图标的A/B测试(1)

插播,临时插播;周末更新了关于汉堡包菜单图标的闲言碎语,因为还有几篇相关的,所以堆一小堆一起搞掉,当做个话题自己攒着。先拿来两篇不那么很正式的A/B测试分析小文。道个晚安,进入译文。

堡,汉堡包,navicon,无论怎么叫,我们要说的就是那用来代表菜单的三道杠图标。

说是代表菜单的意思,但和其他很多图标一样,我们也只是假设用户知道它代表的是菜单。

Luke.W在年初发了个关于汉堡包图标是否需要提示说明的推,引发了热烈的讨论,蛮有趣的,这里是对话汇总。这篇推及跟推引发了我的些许思考。

@lukew 在我所做过的移动应用测试当中,很多人并不十分了解这个图标的含义。所以有时我会在设计当中直接使用“菜单”二字来代替图标。具体的设计决策取决于产品的目标用户群体。- Anders Matre Gasland(@andersmg) February 6,2014

于是我用Optimizely做了个小型的A/B测试;测试下来没什么太令人惊讶的结果,不过也算有趣。

初始方案

初始方案当中用到的就是最普通的三道杠图标:

hamburger-icon-menu-ux-design

变体1

三道杠图标底部添加“菜单”标题:

menu2.jpg

变体2

三道杠图标周围增加边框:

menu3.jpg

测试结果

结果看来差别并不是很大;点击最多的是“图标+边框”的形式,其次是带有“菜单”标题的,排名最后的是光秃秃的三道杠

mobilemenuresults.jpg

也许可以据此推测,带有边框的图标更能吸引注意力,更像可点击元素。

补充说明,测试目标包含所有的移动端浏览器,在每个页面上都有放置汉堡包。

比较让人惊讶的是较低的点击率——只有2%的用户通过点击汉堡包图标打开了菜单。不过我们测试的页面更像是博客一类的内容站点,而非更具参与度的应用和服务类站点,例如Facebook等。

这又如何?

话说回来,在我看来,判断用户在当前界面中的目标和意图,要比图标的精确定义更加重要。如果用户在特定的产品当中的特定界面里有着明确的理由去寻找某些东西,他们会愿意付出额外的几毫秒去寻找那些看上去像是菜单或能打开菜单的元素。

桌面端的行为模式有所不同

去年,我针对桌面版的站点做了类似的测试。当时我测试了4种形式的按钮,包括:

  1. 初始方案,只有一个“菜单”标题。
  2. 更换为单词“更多”。
  3. 汉堡包图标+“菜单”。
  4. 汉堡包图标+“更多”。

结果的差异很明显,其中第一个方案的点击率最高,而方案2、3、4相比于第一个方案分别低了18%、31%和43%的样子。对于桌面端的界面来说,在按钮中添加汉堡包图标的方案看上去使用户更加迷惑,简单的按钮变得复杂起来。

昂贵的测试

Optimizely的价格有点受不了。在包月付费方案中,允许方案测试页面的用户数也是有定额的,而且不便宜。每月到期会扣款,但是上个月剩下的访问量余额却不能积累到下一个月。

我选用的是每月2000人的方案。但是在我反应过来之前,访问量就达到了将近两万人,因此我又多付了117刀。疼。

理论上来说,即使两万的访问量也确实难以给到你非常准确的统计结果。

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - UI/UX 设计布道师,设计师,译者,猫奴,音乐玩家。