菜单 关闭

汉堡包菜单和隐藏导航损害用户体验指标万博官网manbetx下载

通过 卡拉佩尼斯拉鲁卡布迪乌6月26日,二千零一十六

总结:通过隐藏网站的主导航,可发现性几乎减半。也,任务时间越长,任务难度越大。


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

  • 隐藏导航不太容易被发现比可见或部分可见的导航。
    • 当导航被隐藏时,用户不太可能使用导航。
    • 如果人们使用隐藏导航,他们在任务中这样做的时间比它可见的时间晚。
  • 隐藏导航 提供比可见更糟糕的用户体验或者部分可见的导航,在移动电话和桌面用户界面中。这一发现适用于多个用户体验指标,包括用户对任务难度的评估,万博官网manbetx下载花在任务上的时间,任务成功。
  • 在桌面上,隐藏导航比在手机上更能降低体验和导航的可发现性。
  • 隐藏导航主要影响无法通过页面内链接直接访问的内容。

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

响应式设计manbetx官方网站手机版许多优点;然而,它的一个不太幸运的影响是,移动第一代设计在大型桌面屏幕上的普及率过高。manbetx官方网站手机版说清楚,“移动优先”本身不是问题。更确切地说,问题在于,如何充分利用良好的移动设计,并将它们移植到桌面上,而在桌面上它们也无法正常工作。manbetx官方网站手机版手机第一不应等于只移动。

(显然,这里有一个一般原则:如果设计技术打算跨越平台x和y,manbetx官方网站手机版那就是不妥协X首这种方法会使Y成为一个事后诸葛亮,并伤害Y上的用户。如我们课程中所述缩放用户界面,为了设manbetx官方网站手机版计X和Y,您需要考虑两者的优势和需求,并相应地调整网站的两个版本。)

隐藏导航,比如汉堡包菜单,是众多灵感来源于手机设计的图案之一。manbetx官方网站手机版屏幕空间是手机上的珍贵商品。迎接的挑战按优先顺序排列内容同时仍在导航(和其他可访问的,manbetx官方网站手机版设计师通常依靠隐藏在菜单下的导航-通常由臭名昭著的汉堡包图标表示。就像一个廉价的快餐连锁店,它让设计师沉迷manbetx官方网站手机版于它的便利,现在每天服务数百万人,在移动设备和台式机上。

虽然我们的定性用户测试反复表明隐藏在下拉菜单下的导航在桌面上不太容易被发现。,我们想在定量研究中测量这种影响的大小,并评估隐藏导航对桌面和移动的相对影响。这样做,我们与沃瑟斯多(一家专门从事远程可用性测试的公司)与179名在6个不同站点完成任务的参与者进行研究,在智能手机和台式机上。本文报道了这项大型研究的结果。另一篇文章包括详细的研究方法和菜单图像测试。

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

为了确定不同菜单的有效性和可用性,我们在6个不同类型导航设计的直播网站的桌面和移动版本上进行了可用性测试。manbetx官方网站手机版以下是我们考虑的导航类型:

  1. 隐藏导航:主导航链接放置在图标(如汉堡)或按钮下,需要显示明确的用户操作。
  2. 可见导航:主导航链接显示在一个可见的导航栏中,因此可以通过简单的一瞥看到,而无需任何事先操作。
  3. 组合导航:一些主导航链接可见,一些隐藏在菜单下。

请注意,对于移动设备,我们没有完全测试可视导航条件。(可见导航在移动设备上不太常见,而且,由于我们研究的其他限制,我们无法包含这一条件。)我们在手机上测试了隐藏和组合导航条件。

我们为每个网站编写了两个简单的任务。一些任务可以在不使用常规站点导航的情况下完成,而其他任务则需要使用导航(或搜索)。下面是一个任务示例:“请访问http://www.bbc.com,查看您是否对自然或野生动物感兴趣。一旦你找到一篇有趣的文章,请说出它是哪一个。”

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

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

前2个指标与导航使用有关,最后三个是用户体验的质量。

(更多关于不同类型的用户体验度量以及如何在我们的全天课程万博官网manbetx下载中收集和分析它们的信息)测量用户体验

导航用法:隐藏导航在任务中的使用越来越少

为了量化导航使用,我们研究了(1)导航的使用:是否在任务期间使用导航;(2)导航时间:从任务开始到使用导航的时间。(如果使用导航,我们只计算导航时间。)

这些指标告诉我们导航是否有用,以及是否容易发现。如果导航很明显,如果很难发现的话,你会期望它被越来越快地使用。

我们的任务并没有指导参与者使用导航,搜索,页面链接,或任何其他接口功能。更确切地说,人们可以在界面中使用他们想要的任何东西来完成任务。我们假设如果导航是可见的并且对用户有帮助,他们会点击它;如果不是,他们会尝试其他事情。因此,我们认识到,不点击菜单只会反映出用户认为其他东西是更好的选择,但他们并没有注意到菜单,也没有认出菜单。

例如,在某些页面和任务上,直列链接可能具有高信息线索-想一想在报纸上找一部电影:如果你在报纸上看到的第一个标题正是关于那部电影的,很可能你不使用导航或搜索就选择了它。

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

  1. 在移动和桌面上,当所有或部分导航选项都可见时,人们更容易使用导航。(也就是说,在可见和组合条件下)。
包含以下段落所述数据的条形图
作为设备类型函数的导航用法(桌面,移动)和导航类型(可见,隐藏的,Combo)(我们没有在手机上测试只有可见导航的网站。)
  • 桌面上,只有27%的人使用隐藏菜单,虽然他们使用可见或组合导航的次数几乎是原来的两倍:在48%和50%的情况下,分别。
  • 在手机上,57%的人使用隐藏导航,而组合导航在86%的情况下-1.5倍以上。

我们进行了混合效应逻辑回归,发现这些差异具有统计学意义。这并不奇怪:当(全部或部分)导航选项可见时,它们对用户来说更为突出。如果没有别的事,可见或组合导航的屏幕示意图大于仅由图标或标签表示的菜单的屏幕示意图,所以人们会更加注意到它。

2。人们在手机上使用导航(无论是隐藏的还是部分可见的)的可能性明显高于在桌面上。

这一发现有许多潜在的解释:

  • 在移动设备上导航(无论是隐藏在菜单下还是部分可见)比在桌面上占据更大比例的屏幕空间,只是因为屏幕比较小。因此,人们更容易注意到并使用它。的确,在桌面上,我们看到许多会话,人们甚至没有看到菜单图标。一些测试参与者甚至说隐藏导航的网站没有菜单。
  • 因为隐藏导航在手机上比在桌面上更常见,人们可能更熟悉它,也更愿意考虑使用它。
  • 移动页面往往需要更多的滚动,内容较少在褶皱上方可见,有时加载速度较慢,因此,人们可能会使用菜单而不是浏览网页,并探索是否有符合他们兴趣的内容。在桌面上,页面加载速度很快,大屏幕可以更好地预览页面内容。(换句话说,这个交互成本在手机上访问所需的信息比在桌面上访问更高。)

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

  1. 在台式机和移动设备上,当导航被隐藏时,与可见或部分可见相比,参与者使用它花费的时间更长。我们的混合效应广义模型表明,该结果具有轻微的显著性(P<0.1)。
显示桌面隐藏导航时间的条形图,耗时31秒,而组合导航和可见导航分别为23秒和26秒。手机上,隐藏导航和组合导航的时间分别为26秒和24秒。
在桌面上,当导航被隐藏时,参与者需要5-7秒的时间才能使用它。手机上,这种差异较小(约2秒)。(我们没有在手机上测试只有可见导航的网站。)

尽管这些数字似乎表明了一种设备效应(即,参与者在移动设备上使用隐藏导航比在桌面上更快,或者互动(也就是说,隐藏式导航对桌面的影响要高于对移动设备的影响)。这些影响没有统计学意义。

再花几秒钟可能会显得很小,我们同意,罚款和糟糕的用户体验之间没有区别。但在这几分钟里,用户可能会开始感到沮丧和自我怀疑。再加上几秒钟,用户可能会放弃任务,或者至少是菜单。

隐藏导航会导致更糟糕的用户体验

我们收集的其他3个指标侧重于用户体验的质量:

  • 内容可发现性.我们的任务相当简单,给了用户相当多的自由(例如,“找到一篇你感兴趣的技术文章”),所以大多数时候人们都能完成。然而,鉴于我们的研究重点,我们对成功(内容可发现性)使用了一个更细微的衡量标准,不仅考虑到人们是否完成了任务,而且怎样他们完成了。因此,内容可发现性衡量用户是否能够通过导航(而不是搜索)找到他们正在寻找的内容,在这些情况下,内容没有直接从主页链接。
  • 任务难度评分.在每项任务结束时,我们要求参与者对任务的难易程度从1分到7分进行评分,1容易7难。任务难度是主观的公制;它测量用户对任务的自我报告评估。它通常反映了他们使用网站的总体经验,因此,高难度评估将间接地指出在定位导航和浏览网站时的实际困难。
  • 任务时间.这个指标表示参与者完成任务所花费的时间,是否成功。菜单可以增加或减少任务时间,如果很容易或很难找到,打开,或使用,因此,较长的任务时间也反映了由于导航不太可用而增加的交互成本。

我们的发现表明,在所有3个不同的指标中,隐藏导航显著降低了移动和桌面上的用户体验.

1。在移动和桌面上,当导航被隐藏时,内容的可发现性显著降低。. 这项测量显示隐藏导航网站的可发现性下降了20%以上,与具有可见或组合导航的网站比较。换言之,可见或组合导航使人们更容易成功地完成任务,而不依赖于搜索。

显示隐藏项之间可发现性差异的条形图,联合体,以及可见的导航条件。隐藏导航再次得分最低,再加上Combo获胜。详情见下文。
隐藏导航的内容可发现性低于其他类型的移动和桌面导航。(我们没有在手机上测试只有可见导航的网站。)尽管手机上的内容可发现性比桌面上的略高,这一差异无统计学意义。
  1. 隐藏导航导致比可见或组合导航更高的难度等级:难度等级显示隐藏导航条件比可见导航条件增加21%,与组合导航相比增加了11%。这一结果与我们的其他发现一致,并加强了以下结论:隐藏导航使用户很难完成任务.可视导航被列为最不困难的,最有可能的原因是很容易发现,用户可以立即扫描导航选项并选择其中一个。其他导航类型隐藏导航选项并增加交互成本。
以1到7的比例显示任务难度的条形图。隐藏2.6,组合2.3,可见2.1。
任务难度,根据用户的评价,在隐藏的导航条件下增长了21%,与可见导航条件相比。与组合条件相比,增加的幅度仅为11%。(这些数字表示移动和桌面上的聚合数据。)在此图表中,数字越小,用户体验越好。
  1. 用户在隐藏导航的网站上完成任务的时间要比在桌面和移动设备上都有可见或组合导航的网站长得多。.
  • 桌面,人们至少39%慢当导航被隐藏时(与可见或组合条件相比)。
  • 可移动的人们是15%慢当导航被隐藏时(与组合条件比较)。
与组合框或桌面和移动设备上的可见导航相比,显示隐藏导航的条形图使用最慢。.
在手机和桌面上,隐藏导航条件下的平均任务时间更高(我们没有测试只在手机上显示导航的站点)。

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

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

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

为什么隐藏导航不那么有效

为什么隐藏导航会有这些效果?在整个文章中,我们暗示了几个答案:

  1. 低显著性:在大屏幕上(甚至在较小的移动屏幕上)很难看到小图标。
  2. 低信息气味:菜单图标或标签通常不会告诉人们菜单中的内容,所以他们不知道是否可以通过点击找到他们需要的东西。
  3. 额外工作:要想知道菜单里有什么,人们必须扩大它。这就增加了用户的交互成本,降低了用户进行交互的可能性,或者,如果他们这样做,它们可能需要更长的时间。
  4. 缺乏标准:隐藏导航由不同的站点以不同的方式实现。一些网站使用它,有些人没有。手机上,模式开始形成,但是在桌面上,隐藏导航的位置和标签存在很大的变化和不一致性。
  5. 低熟悉度:尤其是在台式机上,隐藏导航不是一种常见的模式,人们可能不希望在可扩展菜单下找到全局导航。有些人可能仍然不熟悉汉堡包图标,这是经常用于此类菜单。由于缺乏降低长期学习能力的标准,这种低熟悉度加剧了(在我们的课程中进一步讨论人类的思维和可用性,反复接触同一模式有助于学习。)

在这5个隐藏导航点中,只有最后一个在未来几年可能会下降。假设地,也可能会出现设计标准manbetx官方网站手机版化的提高(这也会增加熟悉度)。但是,我们观察网页设计几十年来发展的经验并不能让我们乐观地认为强大的设计标manbetx官方网站手机版准很快就会出现。低显著性的3个最大点,低信息气味,额外的工作将永远是隐藏导航的诅咒,这将降低其可用性。

导航建议

这项研究对你的下一个设计项目有什么好处?manbetx官方网站手机版

桌面:显示导航选项的屏幕房地产非常丰富,我们建议:

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

手机对于手机来说,没有硬性规定。但我们的一般建议是:

  • 如果您的网站有4个或更少的顶级导航链接,将它们显示为可见链接。
  • 如果您的网站有4个以上的顶级导航链接,唯一合理的解决办法是隐藏其中一些。我们确实发现隐藏导航对可用性的惩罚在手机上非常普遍,但它比桌面上的要小。因此,我们建议进行这种设计权衡,因为可扩展导航菜单的可用manbetx官方网站手机版性远远优于其他设计。
  • 在页面中提供指向网站重要信息的链接,或使用其他方法支持汉堡包(或其他隐藏的)菜单。

记得:手机第一与…不同仅移动.另外,当然,追随另一个早已建立的万博官网manbetx下载菜单设计的用户体验指南manbetx官方网站手机版.

与本文所依据manbetx官网手机登陆的研究相关的其他文章