acct -Zhai转向定律(由HCI研究人员Johnny Accot和Shumin Zhai发现,但也被简单地称为转向定律)是一个推论费茨定律.转向定律是一个方程,可以预测非常常见的交互作用的效率;它描述了路径引导任务的特殊情况——即用户必须在有边界或“隧道”的路径中移动指针。方程是:

Accot-Zhai导向律方程,T = a+b(a /W)
T为整体运动时间,一个b是常数, 隧道的长度是多少W是隧道的宽度。

不要担心,大多数UX专业人士永远不需要使用这个公式:主要的可操作的洞察力是,长而窄的隧道比短而宽的隧道需要更多的时间来导航。

定义:“转向法则”预测通过一个有边界的通道(如菜单、滚动条或滑块)引导一个指针(如鼠标光标)所需的时间。驾驶时间取决于隧道的长度和宽度:隧道越长越窄,成功驾驶穿过隧道所需的时间就越多;

根据指导律,a隧道是否有需要用户移动光标(或在触摸屏上拖动手指)的用户界面控件有边界的路径.越过边界将会产生一些后果,尽管这是一个常见的用户错误,但其后果应该是温和的,例如,当指针在隧道外时,计算机将停止关注。涉及这种交互类型的一些最常见的UI元素包括下拉菜单(特别是带有悬停显示子菜单的层次菜单),参数控制滑块、滚动条、视频回放洗涤条以及需要直线拖放的视频游戏元素。

YouTube的视频洗涤器播放控制
在YouTube上,视频底部的重放洗涤器就是遵从转向法则的隧道的一个例子。

在大多数情况下,移动到隧道边界之外会中断用户的操作:例如,在一个分层的下拉菜单中,如果用户将光标移动到菜单区域之外,菜单就会消失(如果隧道的破坏是无意的,这是一种严厉的惩罚)。这就是为什么隧道的宽度对用户通过隧道的容易程度很重要——狭窄的隧道很容易意外地离开隧道区域。

macOS分层菜单显示了一个90度转弯的路径转向任务
在MacOS上,在一个分层菜单中移动鼠标光标涉及一系列由90度转弯分隔的线性路径控制任务。在主菜单内,在悬停时打开子菜单。注意,这个l形序列的第二步(从找到到它的子菜单)涉及最狭窄的隧道,这是缓慢和困难的用户通过而没有错误。
macOS分层菜单,显示典型的用户对角线鼠标移动模式
许多用户会尝试从对角线移动找到到子菜单中的项,但是,因为这样做,他们的鼠标将越过区域拼写和语法时,目标子菜单将丢失,取而代之的是拼写和语法其中一个将被打开。(注意,老版本的MacOS有一个由NN/g负责人Bruce Tognazzini设计的菜单;该菜单没有显示这种行为,而是使用了一个基于矢量的三角形缓冲区来允许用户对角线移动。不幸的是,在那之后的几年里,苹果又恢复了这种优秀的交互设计。)

为什么人们很难让光标保持在一条直线上呢?这与人类的生理机能有关:使手能够运动的肘部和手腕描述的是一条弧线,而不是一条直线。你自己试试:将手臂直接伸出在你的前面,然后从左向右移动你的手。你会注意到,即使你试图让手臂保持直线运动,你的手臂在运动中总会有一个微妙的弧线。因此,用手做一条长而直的运动在身体上是困难的;运动的时间越长,出错的可能性就越大。此外,许多用户(尤其是老年人和残疾人)的手都不稳,所有手机用户在使用设备时都会感到颠簸和紧张。

使菜单更易于操作

菜单是最受转向法则影响的UI元素之一。以下是一些易于使用的设计选择。

保持下拉菜单尽可能短选择少的菜单减少了在狭窄的隧道中驾驶的时间和难度,也减少了时间视觉搜索通过大量的选择。

避免分层菜单,特别是深度超过两层的层次菜单。由于转向法的限制,层次菜单本质上是一个很难设计好的UI。在设计与分层菜单相关联的两条隧道之间总是存在权衡:垂直隧道对应主菜单区域,水平隧道对应子类别名称,用户必须通过它才能打开子菜单:

  • 垂直隧道需要很短,但这意味着菜单上的每一项可能都要被赋予更小的高度——这导致了狭窄的水平隧道。
  • 垂直隧道也必须是宽的,但从主菜单选项到相应的子菜单,这将导致较长的水平隧道。
两张Costco.com分级菜单的视图,显示了菜单宽度和高度的权衡
Costco.com上的分层菜单显示了优化分层菜单的内在权衡,以达到转向定律的效果,并在垂直隧道(左)和水平隧道(右)的大小之间做出妥协。宽菜单优化垂直隧道易于转向向下的菜单,特别是菜单有许多选择。然而,通过使菜单宽,长度水平隧道增加,并且在菜单中移动以访问相应的子菜单将更加充满错误。请注意,大多数菜单根本没有针对转向法进行优化,因为它们只是简单地使宽度与最长的文本标签一样。

当绝对需要分层菜单时,在鼠标悬停和显示子菜单之间使用一个短时间延迟(或使用基于矢量的三角形系统,以允许一些对角移动错误)。还包括尽可能多的填充上方和下方的每个菜单项,以增加隧道的宽度为水平移动。

对于导航菜单,考虑一下大型的菜单(或方形菜单)作为替代下拉菜单。由于大型菜单允许在广阔的2D空间内自由移动,转向定律并不适用(尽管Fitts定律仍然适用,所以要确保目标仍然较大)。

滑块,滚动条和洗涤器需要额外的控制精度

在设计其他涉及路径控制任务的UI元素时,如滑块、滚动条和视频回放头,请记住,用户很难通过这些控制实现精确。因此,对于精确的任务,用其他支持精度的辅助控件来补充这些UI元素。当使用滑块选择参数值时,将滑块作为粗控制(用于到达一般所需区域),并提供二级细控制(如数字输入框)步进按钮)以选择一个特定的值。此外,允许用户点击滑块上的任何位置跳转到想要的位置,而不是需要他们点击和拖动;这种方法能够让用户在2D空间中自由移动,而无需通过隧道。在触摸屏上,考虑滑块旋钮的整体目标尺寸(至少应该是1厘米x 1厘米),并确保用户的手指不会模糊滑块(或它周围的任何标签)。

是慷慨的

最后,您可以为隧道添加填充,使其有效宽度大于其在屏幕上的视觉表示。填充将允许用户沿着隧道移动一些摆动的空间,而不会因为隧道视觉区域外的一个小偏差而退出。

总结

《驾驶法》规定,窄而长的隧道比短而宽的隧道更难航行。下拉菜单、层次菜单、滑块和其他路径跟随UI元素的设计应该使相应的通道尽可能宽,尽可能短。记住,这些控件很难用于精确的任务,并考虑替代(如超大菜单代替下拉菜单或滑块的辅助控件),以防止由于线性路径导向交互而产生的错误。

参考文献

Johnny Accot和Shumin Zhai. 1997。“超越Fitts定律:基于轨迹的人机交互任务模型,”CHI '97会议记录。

Sergey Kulikov, I. Scott MacKenzie, Wolfgang Stuerzlinger, 2005。“转向运动有效参数的测量”,计算系统中人为因素的扩展摘要