菜单 关闭

可扩展菜单:下拉,广场,还是馅饼?

通过 拉鲁卡布迪乌5月8日,二千零一十六

总结:在菜单中选择一个选项取决于该选项与菜单图标的距离。下拉菜单,麦加纽斯饼图或径向菜单,标记菜单以不同的模式排列项目以优化到达时间。


最初是在20世纪70年代在帕洛阿尔托研究中心开发的,菜单是图形用户界面(GUI)中的选项列表。它们可以是看得见的(有时称为“菜单栏”)或可膨胀的在可展开菜单中,当菜单 手柄点击或点击;菜单句柄可以是标签,一个图标,或者两者兼而有之。在本文中,我们主要讨论可扩展菜单。

Internet Explorer菜单栏(左侧)和文件 菜单(右)。这个文件 菜单是隐藏在手柄“文件”下的可扩展菜单。菜单选项发送 可进一步扩展以显示子菜单。

可扩展菜单的两大设计问题manbetx官方网站手机版是:

  • 如何发现菜单,或者换句话说,如何使手柄看起来像是可点击的(所以人们点击它),并具有良好的信息线索
  • 如何减少选择时间在菜单里面,也就是说,如何减少时间找到点击在正确的选择上

选择时间本身有两个组成部分:

  1. 视觉搜索时间:在菜单内的一组选项中定位感兴趣项的时间
  2. 移动时间:将光标(或手指)移动到通过可视化搜索找到的感兴趣项所需的时间。

熟悉程度菜单类型可以调节这两个组件。如果用户必须首先学习如何操作菜单,那么,这个学习时间很容易使选择时间上的任何节省都相形见绌,除非他们使用相同的菜单很多,很多次。也,新交互方法的最初使用更容易出错,而从错误中恢复所浪费的时间远远大于优化选择时间所节省的时间。

在过去的35年里,HCI研究人员研究了各种类型的菜单和菜单组织,尝试最小化视觉搜索时间或移动时间。本文调查了几种菜单类型,并讨论了它们相对于平均移动时间的效果。但是在讨论不同类型的菜单之前,让我们看看如何量化移动时间。

菲茨定律和运动时间

Fitts定律计算人们达到任何目标所需的时间,是否使用鼠标,手指甚至用手去抓东西。它所说的很简单而且直观:人们达到目标所需的时间取决于:

  • 目标的大小(目标越小,时间越长)
  • 到目标的距离(离目标越远,时间越长)
菲茨定律说,达到目标A的时间比达到任何其他目标的时间都短。虽然目标A和B的大小相同,光标到A(d1)的距离小于到B(d2)的距离,所以到A的移动速度会更快。目标C与目标A与光标的距离(d1)相同,但它比较小,因此,将光标移动到它的时间要比移动到A的时间长。

虽然目标尺寸通常会告诉我们按钮和其他活动元素的设计,manbetx官方网站手机版到目标的距离是通常针对菜单设计进行优化的组件。manbetx官方网站手机版

线性(或下拉菜单)

要了解到达菜单中的目标所需的时间,让我们首先关注传统下拉菜单或下拉菜单中基于鼠标的交互。(这种类型的菜单也称为线性菜单,因为所有菜单选项都显示在一个列表中。)我们假设菜单是通过单击菜单手柄触发的。因此,菜单选项现在在屏幕上可见,光标放在菜单手柄上。

在线性菜单中,到达菜单中第一项的时间最短,到达最后一个元素的时间最长,因为与光标的距离(即,菜单手柄)到第一个元素的距离最短,到最后一个元素的距离最长。

请注意,到达菜单中的第一个元素所需的时间比到达菜单中的任何其他元素所需的时间短——这仅仅是因为到第一个元素的距离比到第二个元素的距离短,它比到第三个元素的距离短,以此类推。事实上,菜单中的最后一个元素需要最长的时间才能到达,因为它离句柄最远。这是我们建议不要使用过长菜单的原因之一——人们从这样的菜单中选择一个项目需要很长时间(另外,有时,如果菜单比窗口长,用户必须向下滚动页面,则更具挑战性。

我们能在线性菜单中提高平均移动时间吗?一个简单的改进是实际更改列表的位置,使中间元素与句柄对齐,而不是与第一个元素对齐。通过这样做,您已将平均距离减小到菜单元素。

通过将菜单手柄与中间元素对齐,可以减少单击菜单内选项的平均移动时间。

(不幸的是,不可能总是使用这样的菜单,因为在句柄上方可能没有足够的空间来显示一半的选项。)

矩形(或方形)菜单

另一种减少到菜单选项的距离的方法是将它们放置在一个矩形中。因此矩形(有时称为方形)菜单,更广为人知的是美加美诺.

至Megamenu内某个项目的平均距离小于将所有项目放在一个长列表中(即在线性菜单中)。

很容易(使用一点几何图形)显示矩形菜单与任何随机元素的平均距离都比线性菜单好。矩形菜单在优化移动时间方面工作得很好,如今,它们在网络上非常流行。

饼图(或径向)菜单

如果菜单中所有元素的时间都相同怎么办?如果所有元素都与手柄距离相等,这是可能的,也就是说,它们被放置在一个以菜单手柄为中心的圆上。就是这样饼图(或径向)菜单诞生了。信不信由你,馅饼菜单相当古老:它们可以追溯到20世纪80年代末。

一个提示饼图菜单:手柄在圆的中间,所有菜单选项都显示在它周围。到任何选项的距离都相同。

馅饼菜单从未真正流行过。尽管HCI的研究人员喜欢它们,结果发现,用户并不十分熟悉它们。2010年的一项研究表明,在实践中,它们比标准的线性和矩形菜单更难学习,因此,由于缺乏对该界面的熟悉,移动时间增益会丢失。然而,随着用户越来越熟悉饼图菜单,这些菜单确实开始显示出研究人员预测的优势。

Yelp for iPhone使用“半圆饼”菜单显示与查看服务相关的选项。

(我们写了一篇愚人节的文章建议比萨菜单比馅饼菜单更好.然而,那是个笑话,比萨饼菜单不是真正的设计理念。)manbetx官方网站手机版

标记菜单

标记菜单是饼图菜单的一个版本,它利用菜单项按其方向唯一定义的事实。换言之,当用户开始向目标移动时,你可以在目标被击中之前知道目标会是什么,只需看看运动的方向。

标记菜单有两个“模式”:在正常模式,单击句柄时,菜单将展开,然后,您可以通过单击某个项目(如常规饼图菜单中的项目)或将光标(或手指)移向所需项目来选择一个选项。在专家模式,然而,菜单不显示:用户只需开始沿目标方向移动光标(此操作称为“标记”,因此,名称“标记菜单”)和系统将该手势解释为相应目标的选择。专家模式对于大量使用的应用程序是有意义的,当用户学习菜单中菜单选项的排列时,不需要看到它们的显示(例如,Kurtenbach和Buxto万博官网manbetx下载n在1994年表示,在每个用户需要9小时以上的音频编辑的任务背景下,用户首选专家模式。

Pinterest for iPad使用只有正常模式的标记菜单。一旦用户按下菜单手柄,菜单将被扩展,用户可以通过向该选项的方向移动手指来选择一个选项。一旦用户抬起手指,选中突出显示的选项,菜单消失。

标记菜单非常适合上下文使用,更高效,因为用户不需要走整条路线到达目标,但是他们可以开始朝着目标移动。在专家模式下,菜单还为用户保存了一个额外的步骤(即展开菜单并检查其中的项目)。当然,专家模式对于技术不太熟练的用户来说太容易出错,因为他们没有得到他们选择的视觉确认。

其他类型的菜单

HCI的研究人员在这些菜单上进行了许多变化的实验,以尽量减少菜单内部的移动时间(一个例子包括一个线性菜单,其中距离控制柄较远的元素获得较大的目标区域,以补偿距离的增加)。大多数人在现实世界的界面中从来没有找到他们的方式,因为,尽管它们的理论性质很好,他们不熟悉,很难适应,所以他们从未在网上流行过。

触摸怎么样?

尽管fits定律确实适用于触摸界面,当涉及到菜单设计时,一个不容易转移的假设是初始光标位置。manbetx官方网站手机版用鼠标,我们可以假设在打开菜单之后,光标仍在句柄上。但有了触摸屏,很有可能在菜单打开后,手指位置不再在手柄上,甚至在手柄上方。(这一点尤其适用于移动手持设备-手机和平板电脑;对于超大触摸屏(例如,桌面)通常需要移动整个身体才能到达某个区域,用户和手仍可能离手柄较近。)将手指放在菜单手柄上方通常不会产生效果,因为这样会遮挡屏幕的一部分。另外,很多时候,手柄实际上消失或移动到屏幕的不同区域。

Gmail for iPad:汉堡包图标(顶部屏幕截图)展开滑动菜单,将菜单手柄(汉堡包)推向页面中间(底部屏幕截图)。即使在菜单扩展后手指位置保持不变,用户必须将其移开,才能看到菜单中的元素。(蓝色区域大致代表手指。)

因此,我们在本文中讨论的许多考虑不一定适用。触摸式手持设备的一个有趣问题是,菜单的显示位置与手和手指的最可能位置有关,以及如何相对于那个位置优化菜单到达时间。

据说,有一个例外:在正常模式下标记菜单(如上面显示的Pinterest应用程序中的菜单)。标记菜单非常适合触摸界面,因为它们不需要精确地到达目标(由于我们的肥手指)为了保持移动时间优势,它们确实要求手指停留在手柄上,然后朝所需选项的方向移动。这种约束的缺点有两个:(1)在给定的时间内保持手指在同一点上,以检查菜单元素,会产生一定的物理应变;(2)手指确实挡住了屏幕的一部分,因此,这些菜单通常最适合作为圆形片段。

在触摸屏设备的时代,派和标记菜单已经迎来了它们的辉煌时刻。我们在Touch应用程序中看到越来越多版本的菜单。最后,这些菜单有助于克服不熟悉的障碍,并将其理论优势转化为现实世界。然而,这些菜单中的许多都没有经过优化设计。manbetx官方网站手机版记得,一个普通的馅饼菜单(就像上面的Yelp应用程序中一样),当手指从手柄上抬起时,菜单停留在屏幕上,用户可以通过点击所需项目来选择一个选项。不会给你运动时间带来好处。

结论

可扩展菜单中的移动时间由fits定律控制。当菜单选项数量较少时,线性菜单最好;随着数量的增加,矩形菜单(或大菜单)更合适。标记菜单非常适合触摸屏,而且,像馅饼菜单,优化单个选项的到达时间,但由于它们在触摸屏设备上的普及,现在才开始变得更加熟悉。如果你正在考虑一个新的,不太熟悉的菜单,因为它具有良好的移动时间(或任何其他想要的质量)。为高频使用的情况保留它,或者等到设计变得更加熟悉。manbetx官方网站手机版

工具书类

d.阿尔斯特罗姆a.CockburnC.GutwinP.Irani。2010。为什么它很快成为方形:建模新的和现有的层次菜单设计。manbetx官方网站手机版ACM CH'10,1371-1380。DOI=http://dx.doi.org/10.1145/1753326.1753534

G.KurtenbachW.B万博官网manbetx下载uxtonW1994。使用标记菜单进行用户学习和性能测试。ACM迟94258~264。DOI=http://dx.doi.org/10.1145/191666.191759