菜单

Hamburger Menus and Hidden Navigation Hurt 万博官网manbetx下载 Metrics

通过 卡拉PerniceRaluca Budiu2016年6月26日

摘要:通过隐藏网站的主导航,可发现性几乎减少了一半此外,任务时间更长,感知任务难度增加。


我们对隐藏菜单(例如汉堡包图标)和可见菜单(例如页面顶部的链接)的定量可用性测试显示:

  • 隐藏的导航不易被发现比可见或部分可见的导航。
    • 隐藏导航时,用户不太可能使用导航。
    • 如果人们使用隐藏导航,他们会在任务的后期执行,而不是可见。
  • 隐藏的导航 提供比可见的更差的用户体验or partially visible navigation does, in both mobile phones and desktop user interfacesThis finding holds true across multiple 万博官网manbetx下载 metrics including users’ assessment of task difficulty, time spent on task, and task success.
  • 在桌面上,隐藏导航会降低体验和导航可发现性,而不是在手机上。
  • 隐藏导航主要影响无法通过页内链接直接访问的内容。

为什么学习隐藏和可见的导航

响应manbetx官方网站手机版具有许多优点; however, one of its less fortunate effects has been an excessive popularity of mobile-first manbetx官方网站手机版s that translate poorly onto larger desktop screens要明确的是,“移动优先”本身并不是问题相反,问题是将足够好的移动manbetx官方网站手机版和移植到桌面上,它们不能正常工作。移动先行不应该平等移动电话。

(显然,这里有一个普遍的原则:如果一个manbetx官方网站手机版技术旨在跨越平台X和Y,那么一个不妥协x轴方法将使Y马后炮,危害用户Y正如我们的课程所解释的那样扩展用户界面对于X和Y,你需要考虑两者的优势和需求,并相应调整网站的两个版本。)

隐藏式导航,如汉堡菜单,是受移动manbetx官方网站手机版s启发的众多模式之一屏幕空间是移动设备上的一种珍贵商品迎接挑战优先考虑内容同时仍然制作导航(和其他)访问,manbetx官方网站手机版人通常依赖隐藏下的导航菜单——通常由臭名昭著的汉堡图标所表示的就像廉价的快餐连锁店一样,它让人们沉迷于其便利性,现在每天都有数百万人在移动设备和台式机上服务。

虽然我们的定性用户测试反复证明了这一点隐藏在下拉菜单下的导航在桌面上不易被发现,我们想测量这个效应的大小在一个定量研究和评估的相对影响隐藏在桌面和移动导航为此,我们与之合作WhatUsersDo(一家专门从事远程可用性测试的公司)与179名参与者一起开展研究,他们在智能手机和台式机上的6个不同站点完成任务本文报道了这项大型研究的结果一个额外的文章包括我们详细的研究方法和菜单图像测试。

措施:导航使用,内容可发现性,时间,任务难度

为了确定不同菜单的有效性和可用性,我们在桌面和移动版本的6个不同的实时网站上运行了不同类型的导航manbetx官方网站手机版s这是我们考虑的类型的导航:

  1. 隐藏的导航:主要的导航链接被放置在一个图标(比如汉堡)或按钮,显示需要一个显式的用户操作。
  2. 可见导航:主导航链接显示在可见的导航栏中,因此可以通过简单的一瞥看到,而无需任何先前的操作。
  3. 组合导航: some of the main navigation links were visible and some were hidden under a menu.

注意,为移动设备,我们没有完全测试visible-navigation条件(Visible navigation is less common on mobile devices, and, due to other constraints in our study, we were not able to include this condition.) We tested the hidden and combo navigation conditions on mobile.

我们写了2为每个网站简单的任务某些任务可以在不使用常规站点导航的情况下完成,而其他任务则需要使用导航(或搜索)这是一个任务的例子:“去http://www.bbc.com看看如果有任何性质或野生动物你感兴趣的信息一旦你找到一篇有趣的特定文章,请说出它是哪一篇。“

为了衡量这些manbetx官方网站手机版的有效性,我们收集了5个指标:

  1. 导航使用:参与者是否使用了导航链接
  2. 导航时间:从任务开始到该任务中首次使用导航的时间
  3. 任务难度:参与者对任务难度的评估
  4. 内容可发现性:参与者是否能够发现网站上的内容
  5. 任务时间:人们完成任务所花费的时间

前两指标与导航相关用法,而最后3指的是用户体验的质量。

(More on different types of 万博官网manbetx下载 metrics and how to collect and analyze them in our full-day course衡量用户体验。)

导航使用:隐藏导航在任务中使用较少和稍后

To quantify the navigation usage, we looked at (1) navigation use: whether navigation was used during a task; and (2) time to navigation: the time from the beginning of the task until the moment when the navigation was used(如果使用导航,我们只计算导航时间。)

这些指标告诉我们导航是否有用以及是否易于发现如果导航是显着的,那么你会期望它比不易发现的更多,更快地使用。

Our tasks did not direct participants to use the navigation, search, page links, or any other interface features相反,人们可以在界面中使用他们想要的任何东西来完成任务We assumed that if navigation is visible and seems helpful to users, they will click it; if not, they will try other things因此,我们认识到不点击菜单可以简单地反映用户认为其他东西是更好的选择,而不是他们没有注意到或识别菜单。

例如,在某些页面和任务上,内联链接可能很高信息香味- 想想在报纸网站上寻找一部电影:如果你在网页上看到的第一个标题完全与该电影有关,那么你可能会在不使用导航或搜索的情况下选择它。

我们的结果表明,在这两项措施中,隐藏导航明显不易被发现比可见或组合导航:

  1. 在移动设备和桌面设备上,当所有或部分导航选项都可见时,人们更有可能使用导航(即,在可见和组合条件下)。
柱状图与数据描述在接下来的段落
导航使用作为设备类型(桌面,移动)和导航类型(可见,隐藏,组合)的函数(我们没有测试仅在手机上显示导航的网站。)
  • 在桌面上,人们仅在27%的情况下使用隐藏菜单,而他们使用可见或组合导航几乎两倍:分别在48%和50%的情况下。
  • 在移动用户中,57%的情况下使用隐藏导航,86%的情况下使用组合导航 - 1.5倍以上。

我们进行了混合效应逻辑回归,发现这些差异具有统计学意义这一结果并不令人惊讶:当(全部或部分)的导航选项随处可见,他们更突出的用户如果不出意外,可见或组合导航的屏幕足迹大于仅由图标或标签表示的菜单的屏幕足迹,因此人们会更多地注意到它。

2。人明显更可能使用导航(是否隐藏或部分可见)比在桌面移动。

这个发现有很多可能的解释:

  • 移动设备上的导航(无论是隐藏在菜单下还是部分可见)占用屏幕空间的比例大于桌面,因为屏幕较小因此,人们更有可能注意到并使用它实际上,在桌面上,我们目睹了许多人们甚至没有看到菜单图标的会话一些测试参与者甚至说隐藏导航的网站没有菜单。
  • 由于隐藏式导航在移动设备上比在桌面设备上更常见,因此人们可能更熟悉它并且更有可能考虑使用它。
  • 移动页面往往需要更多的滚动,没有内容在折叠处可见,有时加载速度较慢,因此人们可能会使用菜单而不是在页面上查看并探索是否有任何符合其兴趣的内容在桌面上,页面加载速度高和大屏幕提供了一个更好的预览页面的内容(换句话说,互动成本在移动设备上访问所需的信息比在桌面上更高。)

在移动设备上打字更难,更容易出错,人们可能更喜欢导航而不是搜索,当导航可用时。

  1. 在桌面和移动设备上,当隐藏导航时,参与者使用它的时间比可见或部分可见时更长。我们的混合效应广义模型显示该结果略显显着(p <0.1)。
条形图显示时间为桌面31秒,隐藏的导航和23和26秒组合和可见的导航On mobile, times were 26 versus 24 seconds for hidden versus combo navigation.
在桌面上,参与者在隐藏时使用导航需要5-7秒在移动设备上,差异较小(约2秒)(我们没有测试手机上只有可见导航的网站。)

Although the numbers seem to indicate a device effect (that is, that participants were faster to use the hidden navigation on mobile than on desktop) or an interaction (that is, that the impact of hidden navigation was higher on desktop than on mobile), these effects were not statistically significant.

花费额外的几秒钟似乎很小,我们同意这不会是一个好的和糟糕的用户体验之间的区别但在那几分钟内,用户可能会开始感到沮丧和自我怀疑再添加几秒钟,用户可以放弃任务,或者至少放弃菜单。

Hidden Navigation Leads to Worse User Experience

收集到的其他3个指标,我们专注于用户体验的质量:

  • 内容可发现性我们的任务非常简单,并为用户提供了相当大的自由度(例如,“查找您感兴趣的技术文章”),因此人们实际上能够在大多数时间内完成这些任务。然而,鉴于我们的研究的焦点,我们使用一个更微妙的衡量成功的标准(内容可发现性),不仅考虑人们是否完成了任务,但也怎么样他们完成了Thus, content discoverability measured whether users were able to find the content they were looking for by using navigation (and not search) in those cases when the content wasn’t directly linked from the homepage.
  • 任务难度等级在每项任务结束时,我们要求参与者评估任务在1到7的范围内是多么容易或困难,其中1个很容易,7个很难任务难度是一个主观metric; it measures users’ self-reported assessment of the task它通常反映了他们使用网站的整体体验,因此评估难度很高间接表示定位导航和浏览网站的实际困难。
  • 任务的时间该指标表示参与者完成任务所花费的时间,无论是否成功如果菜单容易或难以查找,打开或使用,则菜单可以添加或减少任务时间,因此较长的任务时间也反映了由于不太可用的导航而增加的交互成本。

我们的研究结果表明,在所有3个不同的指标中,隐藏导航显着降低了移动和桌面用户体验

1。在移动设备和桌面设备上,隐藏导航时内容可发现性显着降低 This measure showed a more than 20% drop in discoverability on sites with hidden navigation, compared with sites with visible or combo navigation换句话说,可见或组合导航使人们更容易完成任务成功和不依赖搜索。

条形图显示隐藏,组合和可见导航条件之间的可发现性差异隐藏的导航再次得分最低,再次组合赢家以下文字详情。
隐藏导航的内容可发现性低于移动和桌面的其他类型导航(我们没有测试手机上只有可见导航的网站。)尽管移动设备上的内容可发现性略高于桌面,但这种差异在统计上并不显着。
  1. 隐藏导航导致难度等级明显高于可见或组合导航:与可见光相比,难度等级显示隐藏导航条件增加了21%,与组合导航相比增加了11%这一结果与我们的其他研究结果一致,并得出结论隐藏导航使得用户更难完成他们的任务可见导航被评为最不困难,很可能是因为它易于发现,用户可以立即扫描导航选项并选择其中一个其他导航类型隐藏导航选项并增加交互成本。
条形图显示任务难度,范围为1到7隐藏2.6,组合2.3,可见2.1。
任务难度、被用户看到隐藏的导航状态,增加21%相比可见导航状态合并条件的增幅仅为11%(这些数字代表移动设备和桌面设备上的聚合数据。)在此图表中,较低的数字表示更好的用户体验。
  1. 与使用桌面和移动设备上的可见或组合导航的网站相比,用户在隐藏导航的网站上完成任务的时间要长得多
  • 桌面,人们至少慢了39%导航被隐藏时(与可见或组合条件相比)。
  • 移动人们是慢了15%导航被隐藏时(与组合条件相比)。
条形图显示隐藏的导航是最慢的使用与组合或可见的桌面和移动导航。
平均工作时间更高的隐藏导航条件对移动和桌面(我们没有测试网站导航手机只有可见的。)

桌面和移动用户体验之间的差异

在本文的第一部分中,我们报告说移动用户使用导航的可能性明显高于桌面用户(参见图1)这里我们讨论desktop-mobile差异与用户体验相关的指标。

  1. 隐藏导航更有可能降低桌面上的内容可发现性,而不是移动设备换句话说,当用户必须发现需要使用导航的内容时,他们更有可能在桌面上失败而不是在移动设备上失败此外,隐藏导航时成功率下降更多这个结果也可以解释为桌面用户的增加倾向使用搜索:搜索更突出(大多数时间)在桌面和用户可能更倾向于使用它当一个路径内容并不明显。
  2. 桌面用户比移动用户更快(当组合所有类型的导航时)平均而言,移动用户完成任务的时间增加了12%这个结果并不奇怪:由于屏幕较小而且狭窄的沟通渠道在用户和设备之间,在移动设备上获取相同的内容通常需要更多的交互。

为什么隐藏导航效率较低

Why does hidden navigation have these effects? Throughout the article, we hinted at several answers:

  1. 低突出:在较大的屏幕尺寸上(甚至在较小的移动屏幕上),很难注意到一个小图标。
  2. 低气味信息:菜单图标或标签通常不会告诉人们里面有什么,所以他们不知道他们是否会通过点击它们找到他们需要的东西。
  3. 额外的工作:要弄清楚菜单中的内容,人们必须扩展它这会增加用户的互动成本并使他们不太可能这样做,或者,如果他们这样做,他们可能需要更长的时间。
  4. 缺乏标准:隐藏导航是由不同的地点以不同的方式实现的有些网站使用它,有些则没有在移动设备上,模式开始形成,但在桌面上,隐藏导航的位置和标签存在很多可变性和不一致性。
  5. 熟悉度低:特别是在台式机上,隐藏导航不是常见模式,人们可能不希望在可扩展菜单下找到全局导航有些人可能仍然不熟悉经常用于这种菜单的汉堡包图标这种低熟悉是缺乏标准,减少加剧了长期的易学性(如进一步讨论我们的课程人的心灵和可用性,学习是通过反复接触相同的模式)。

在这5个反对隐藏导航的点中,只有最后一个可能在未来几年下降Hypothetically, increased manbetx官方网站手机版 standardization could also occur (which would also increase familiarity), but our experience observing the web manbetx官方网站手机版 evolve over the decades doesn’t make us optimistic that strong manbetx官方网站手机版 standards will emerge anytime soon低显着性,低信息气味和额外工作的3个最大点将永远是隐藏导航的诅咒,这将降低其可用性。

导航建议

对你的下一个manbetx官方网站手机版项目有什么打算?

桌面:有足够的屏幕空间用于显示导航选项,我们建议:

  • 不要在桌面用户界面中使用隐藏导航(例如汉堡包图标)。
  • 而是显示顶级导航选项,通常在页面顶部或左侧。

移动:对于手机,没有严格的规则但我们的一般建议是:

  • 如果您的网站包含4个或更少的顶级导航链接,请将其显示为可见链接。
  • 如果您的网站有超过4个顶级导航链接,唯一合理的解决方案是隐藏其中一些我们确实发现隐藏导航所带来的可用性惩罚在移动设备上非常明显,但它比桌面上的要小因此,我们建议制作这个manbetx官方网站手机版,因为可扩展导航菜单的可用性远远优于其他manbetx官方网站手机版。
  • 提供页面链接,指向您网站上的重要信息,或使用其他方法支持汉堡包(或其他一些隐藏的)菜单。

记得:移动第一是不一样的仅移动当然,还要跟随其他久负盛名的人万博官网manbetx下载 guidelines for menu manbetx官方网站手机版

 

其他manbetx官网手机登陆相关研究本文基于