汉堡图标并非最佳菜单方案

   编者按:今天,我们的菜单通常都会使用汉堡图标来表现,他们在APP中无处不在,但是汉堡图标真的是无往不利的么?今天让我们通过3个A/B测试来了解一下汉堡图标在移动端网页设计中存在的问题,以及给我们带来的启示。

  用户体验设计不是忽悠,也许5分钟口水攻势能让前台小妹觉得你的设计非常高大上,但是要让每一个用户对着屏幕上的UI欲罢不能以身相许还需要数据支撑。

  难道不是么?用户体验设计和可用性研究上,就存在着相当的不确定性。花上一上午跟同事争论甜豆浆好喝还是咸豆浆好喝,都不如5分钟做个统计,决定未来公司外卖的豆浆配送标准。同样的,我们的主观臆测并不一定准确,只有当我们真正开始测试并观察用户行为的时候,才知道这个真实世界里的用户拥有着怎样的习惯,网站和APP在设计菜单图标的时候,怎样才符合“大部分”用户的需求。

  菜单图标要怎样设计才好?让我们通过测试和分析来寻求答案。我曾经针对汉堡图标做过一个A/B测试,来搜集用户对于不同的菜单图标的反馈信息。

  第一个A/B测试

  作为菜单图标,三个汉堡图标各不相同,但是都保留了汉堡标识,这符合控制变量法的基本规律。测试结果表明,右边的图标点击率高于前两者。


  这个阶段的测试目的很明确,我们想了解怎样的汉堡图标更吸引用户。作为一个目前认知度最高的图标,将汉堡图标作为基准是一个不错的选择。但是就目前的数据来看,汉堡图标+边框的设计比起其他的两种而言更吸引用户的点击,但是转化率也就提高了22.4%,这可能是边框的存在,更吸引用户的注意力。


  由于测试网站用的是一个博客类的站点,我们可以明显地观察到仅有2%左右的用户会打开菜单栏,这也反映了网站类型与菜单打开率之间的关系。像Facebook这样的社交网站,菜单栏的打开率会比2%高太多。这次的测试的主体还是在移动端网页上,我们必须时刻记住这一测试设定。

  于是我接下来打算测试一下纯粹的汉堡图标和“MENU”菜单标识之间的点击率差异,也就是第二阶段的A/B测试。

  第二个A/B测试

  这次测试是针对所有移动浏览器上的网页进行的;

  测试时间设定为5天,所参与的用户数量约为50000人;

  统计数据表明,被测试人群中,25~24岁的用户占据主体;


  访问网页的终端类型比例如下:

  iOS:64%

  Android:34%

  WP、黑莓和其他移动操作系统:2%

  那么,我们可以把第一阶段的测试结果作为第二阶段测试的基准。所以,我们将第一阶段测试的带框的汉堡图标的测试数据作为这一A/B测试的基础。


  变种1:MENU+边框


  变种2:MENU+汉堡图标+边框


  变种3:MENU


  (其实从逻辑上来说,这一变种并不在测试设计的考虑范畴以内,仅仅是用来做为参考使用,用来验证我的猜想。)

  第二阶段测试结果:


  正如同预测的结果那样,单纯的文本“MENU”表现不佳,点击量和转化率无可辩驳地存在于基准线以下。而有意思的是,变种1,也就是加上边框的MENU转化率居然比带边框的汉堡图标还要高!

  基于第一阶段A/B测试的结果,我们可以明显注意到,在网页上放一个简单的扁平的汉堡图标并不是最佳的方案(注意,是移动端网页而非APP),在按钮上写上“菜单”二字然后加上边框(尽量使它看起来接近于按钮)是用户点击率和转化率最高的方案。

  当然,这不是意味着用户不明白汉堡图标的含义,有可能是文字和语言会更能吸引用户的注意力。

  其实测试到这里,就可以看出一个很有意思的现象了:用户需要明确而直接的标识(只放MENU或者汉堡图标),同时也需要一个边界提醒他们(看到这个框了嘛,这就是一个图标!)。

  最后我们不妨再针对MENU+边框和汉堡图标+边框进行一个对比测试。

  第三个A/B测试

  测试对象仅为带边框的汉堡图标和MENU:


  测试结果如下:


  其实如果看总体的结果数据的话,和第二阶段的测试并没有大的差异。不过在今天iOS和Android壁垒分明的今天,我们还需要深入分析一下平台差异带来的影响。我针对不同平台的用户进行了跟踪分析,这也是第三阶段好玩儿的地方,iOS平台和Andorid平台上的数据很不一样:

  从数据可以看出,iOS平台上的用户点击菜单的比例大概是Android平台用户的2~3倍。这种结果的原因何在?我们恐怕无法完全分析出来。但是可以揣测,这种影响是系统本身的差异影响而得来的。iOS用户和Android用户对于菜单的使用习惯是截然不同的,在过去很长的时间里,Android平台的用户习惯了存在于手机底部的菜单栏(触控,甚至实体按键),而iOS用户的菜单通常直接呈现在屏幕的右上角或者其他的地方,这种使用习惯上的差异可能会影响他们在网页浏览的时候对于菜单的态度。

  结论

  细节见真章。在移动端网页设计的时候,我们要如何设计网页菜单的细节?通过这一系列的测试,我们应该得窥一二。虽然汉堡菜单按钮绝大多数的年轻用户已经很了解了,但是在浏览过程中,够不够明显,要如何吸引用户的目光而又不违和,是UI设计师需要考虑的事情。

  这次的三个测试都是基于英文语境之下,iOS和Android用户的比例相差也不是很大,但是在中国却截然不同——绝大多数的移动端用户都是Android用户啊!两大平台用户在使用习惯上的差异,通过用户基数的差异,最终会产生明显的差异,而这也是参与UI设计的UI/UE/UX同学们需要思考的事情。

时间: 2024-11-05 16:37:06

汉堡图标并非最佳菜单方案的相关文章

如何解决汉堡图标(三道杠)问题

  @十萬個為什麽 :汉堡图标,也就是三条小横线,一直以来被用于表示指向菜单的链接,是当今网页中最具争议的技巧之一.据说设计师们都讨厌它;客户们也恨之入骨.那为什么它却无所不在? 汉堡图标可以轻易缩放,它可以精确吻合像素网格.它原本是表达列表的图标,被强行冠上了如今的角色,但既然菜单就是一列选项,这样使用它从含以上来说是正确的. 在这个课题上,有数不尽的争论.A/B型测试.博客宣泄.用户研究,但这些研究几乎都在关注app设计.当汉堡图标用于网页设计时,它表现出了更大的问题. 汉堡图标的问题 有很

博彩式营销并非最佳微博营销模式

中介交易 SEO诊断 淘宝客 云主机 技术大厅 诸如奥运会.世界杯这样的全球性.全民性体育赛事对于企业来讲都是一次难得的营销机遇.而今年的世界杯微博营销则是一场绝对劲爆的营销盛宴.我们看到在新浪微博上,很多企业.个人纷纷利用世界杯赛事作为引爆点,利用微博平台进行各种营销.营销方式最多的是通过竞猜比分的方式来吸引关注,然后猜中者获得礼品赠送,我们将这种营销方式称之为"博彩式微博营销".这种营销方式的最大好处是可以立竿见影的获得粉丝关注.同时将某一单一事件传播出去. 然而这并非最佳的微博营

企业安全的最佳实践方案

在本文中,我们将为广大读者诸君介绍美国思杰公司是如何借助对于应用程序和数据在任何地点.网络和设备的访问控制,以帮助企业客户在实现风险管控的同时,授权业务移动性的. 现如今,企业的IT和安全管理领导人们正面临着将业务安全风险降低到可接受的水平的同时,确保易用性和生产力的挑战.企业员工需要能够以自己最为舒适的方式来工作--即能够在任何地方.借助任何网络或设备顺畅工作,而不会因任何过度的限制或复杂的用户体验感到沮丧.与此同时,保护企业应用程序和数据避免因安全威胁而发生泄露.防止丢失和被盗,并确保完全符

创建数据中心监控方案的最佳实践方案

本文中,我们将略过关于IT更新的一系列统计数据和趋势的简介,而把关注焦点聚焦于您的数据中心的监控实践方案. 我曾经有幸能够有机会与各种类型的数据中心环境合作过.是的,这些数据中心的环境类型都各有不同.一些数据中心采用电源HPC工作负载,而其他数据中心则使用云工作负载.然后,还有一些数据中心充当了存储孤岛和存储库,以及一些数据中心是私有的托管合作伙伴.每家企业组织都可能有不同类型的要求,设备和布局. 然而,现代数据中心的关键属性需要匹配最佳的监测机制.以下,我将为广大读者朋友们介绍一些这方面的最佳

android-隐藏与显示应用的图标有没有什么方案

问题描述 隐藏与显示应用的图标有没有什么方案 需要实现隐藏与显示应用的图标,不是隐藏本身.实现这个需求不知道是否需要root权限

jquery实现很酷的网页顶部图标下拉菜单效果_jquery

本文实例讲述了jquery实现很酷的网页顶部图标下拉菜单效果.分享给大家供大家参考.具体如下: 兼容IE和火狐的顶部菜单栏,带图标的图文菜单,还有右上角的下拉导航效果,一个演示包括了两种菜单,都是很实用的效果,只使用了jquery就实现了.如果你的网站上此前用有jquery插件,那么整合起来就更方便了,点击运行可预览菜单效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-top-ico-show-menu-style-c

提高数据中心效率、可用性和容量的五项最佳实践方案

数据中心可以说是任何企业中最具活力和最为关键的操作之一.近年来,随着数据中心的密度和容量呈现稳步增长,其复杂性和安全风险也在不断增加,资源日趋紧张,进一步为其相关设备的性能带来了不良的影响.根据一项针对数据中心行业的停机中断研究结果显示,数据中心的任何类型的停机中断的平均成本为389,879欧元,而部分的停机中断的平均成本为199,103欧元.完全停机中断的成本超过524,464欧元.鉴于停机中断的成本如此之高,使得IT容量的可用性通常是评估数据中心的最重要的指标.然而,在今天,数据中心还必须同

《产品设计与开发(原书第5版)》——3.8 步骤5:选出最佳机会方案

3.8 步骤5:选出最佳机会方案 一旦对这些有前景的机会投入一定的资源进行开发之后,大量的不确定因素应该被解决,以便选择出最佳的机会方案,保证产品开发中的巨大投资能够获得成功. 第8章阐述了如何根据一定的选择标准来进行比较,选择出最佳的设计概念,同样的基本方法可以用于选择产品机会.其中一种被很多知名企业运用过,称为Real-Win-Worth-it(RWW)的方法,最初起源于3M公司(Day,2007).RWW方法概括出企业在筛选机会时需要回答的三个问题: 这个机会真实可行吗?你所开发的产品真的

jQuery实现的超酷苹果风格图标滑出菜单效果代码_jquery

本文实例讲述了jQuery实现的超酷苹果风格图标滑出菜单效果代码.分享给大家供大家参考.具体如下: 这是一款超酷苹果风格图标滑出菜单,调用了jquery1.3.2的库文件,整个菜单动感十足,用在网站上增色不少. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-apple-style-ico-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0