T.he Accot-Zhai Steering Law (discovered by HCI researchers Johnny Accot and Shumin Zhai, but also known simply as the Steering Law) is a corollary ofFitts的法律。转向法是一种方程,其预测了非常常见的相互作用的效率;它描述了路径转向任务的特定情况 - 即,当用户必须通过具有边界或“隧道的路径”的指针时。等式是:

Accot-Zhai转向法方程,T = A + B(A / W)
T.is the overall movement time,一种一种ndB.是常数,a 是隧道的长度,和W.是隧道的宽度。

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

定义:转向法预测将指向指针(例如鼠标光标)通过有界隧道(例如菜单,滚动条或滑块)所需的时间。转向时间取决于隧道的长度和宽度:隧道越长,较窄,需要越来越多的时间来通过它成功转向;

根据指导法,a隧道is any user-interface control that requires the user to move the cursor (or drag a finger on a touchscreen) along apath that has borders。Overstepping the border will have some consequence, though since this is a common user error, the consequences will hopefully be mild, such as having the computer stop paying attention while the pointer is outside the tunnel. Some of the most common UI elements that involve this type of interaction include下拉菜单(特别是悬停的子菜单的分层菜单),参数控制滑块,滚动条,视频播放洗涤栏和需要拖放直线的视频游戏元素。

YouTube的视频洗涤器播放控制
在YouTube上,视频底部的播放Scrubber是Obeys obeys的隧道示例。

在大多数情况下,在隧道边界外移动中断用户动作:例如,在分层下拉菜单中,如果用户在菜单区域外移动光标,则菜单会消失(如果隧道破坏是有点严厉的惩罚无意)。这就是为什么隧道的宽度对于用户可以转向的容易来说很重要 - 狭窄的隧道使得狭窄的隧道使得意外地离开隧道区域。

MACOS分层菜单显示具有90度的路径转向任务
在MacOS上,通过分层菜单移动鼠标光标涉及一系列线性路径转向任务,分隔90度。在主菜单中,子菜单在悬停时打开。注意,该L形序列中的第二步(移动Find到其子菜单)涉及最窄的隧道,这对于用户来说是缓慢而困难的没有错误。
MACOS分层菜单显示典型的用户对角线鼠标移动模式
Many users will attempt to move diagonally fromFind在子菜单中的一个项目,但是,因为在这样做时,他们的鼠标将跨越区域Spelling and Grammar那the target submenu will be lost and instead theSpelling and Grammarone will be opened. (Note that older versions of MacOS featured a menu designed by NN/g principal Bruce Tognazzini; that menu did not exhibit this behavior, but instead, used a vector-based triangular buffer to allow users to move diagonally. Unfortunately, in the years since, Apple has reverted this excellent bit of interaction design.)

为什么人们在直线路径上保持光标与人体生理有关:肘部和手腕,它能够移动手动,描述一个弧形,而不是一条线。自己试试吧:将手臂直接握在你面前,然后从左到右移动你的手。你会注意到,即使你试图将它保持在直线上,你的手臂也将始终在运动中具有微妙的弧。结果,使用一个人的手长,直线在物理上困难;运动越长,错误的机会越大。此外,许多用户(尤其是老年人和残疾人)都有不稳定的手,并且所有移动用户都受到世界上使用设备的颠簸和抖动的影响。

制作菜单更友好

菜单是由转向法影响最大的UI元素之一。以下是一些设计选择,使它们易于使用。

Keep下拉菜单尽可能短选择少数选择的菜单最小化通过狭窄的隧道转向的时间和难度,并且还减少了时间视觉搜索through a large number of choices.

避免等级菜单那particularly hierarchical menus that are more than two-levels deep. Hierarchical menus are inherently a difficult UI to design well due to Steering Law constraints. There will always be a tradeoff between designing the two tunnels associated with a hierarchical menu: the vertical tunnel that corresponds to the main-menu area and the horizontal tunnel, that corresponds to subcategory name that the user has to traverse to open the submenu:

  • 垂直隧道需要短,但这意味着菜单中的每个项目可能必须给出更小的高度 - 这导致窄水平隧道。
  • 垂直隧道也必须宽,但这导致从主菜单选项到相应子菜单的较长水平隧道。
Costco.com等级菜单的两个视图,显示了宽度与菜单高度的权衡
Costco.com上的此分层菜单显示了优化分层菜单的固有权衡,以转向法律效应,并且在垂直隧道(左)和水平隧道(右)之间的尺寸之间损害。宽的菜单优化垂直隧道for ease of steering down the menu, especially for menus with many choices. However, by making the menu wide, the length of the水平隧道增加,并在菜单中移动以访问相应的子菜单更加充满误差。请注意,大多数菜单根本没有针对转向法进行优化,因为它们简单地作为最长的文本标签。

W.hen a hierarchical menu is absolutely necessary, use a short time delay between mouse hover and when reveal of the child menu (or use a vector-based triangular system to allow for some diagonal movement error). Also include as much padding as reasonably possible above and below each menu item, to increase the width of the tunnel for horizontal movement.

对于导航菜单,考虑Mega Menus.(或方形菜单)作为替代方案拉下菜单。由于Mega菜单允许在宽的2D空间内进行自由运动,转向法不适用(尽管Fitts的法律仍然存在,所以确保目标仍然很大)。

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

在设计涉及路径转向任务的其他UI元素时,例如滑块,滚动条和视频播放头,请记住,用户将难以实现具有此类控制的精度。因此,为了精确任务,使用支持精度的其他辅助控制来补充这些UI元素。W.hen using a slider to select a parameter value, use the slider as a coarse control (for reaching the general desired region), and provide a secondary fine control (such as numeric input box withstepper按钮)选择一个特定值。同时,允许你sers to click anywhere on the slider to jump to the desired position, rather than requiring them to click and drag; this approach enables a user to move freely in 2D space without needing to steer through the tunnel. On touchscreens, think about the overall target size of the slider knob (it should be at least1cm x 1cm.)并确保用户的手指不会掩盖滑块(或其周围的任何标签)。

慷慨

最后,您可以将填充添加到隧道,使其有效宽度大于屏幕上的可视表示。由于隧道的视觉区域之外的小偏差,填充器将允许用户沿着隧道移动的锯齿沿着隧道移动,而不会掉线。

Summary

转向法指出,狭窄,长隧道比短,宽阔的隧道更难以导航。下拉菜单,分层菜单,滑块和其他路径之后的UI元素应设计成使得相应的隧道尽可能宽而短。请记住,这种控制很难用于精确任务,考虑替代方案(例如Mega菜单而不是用于滑动机的下拉或次要控制),以防止由于线性路径转向交互引起的错误。

References

Johnny Accot和Shumin Zhai。1997.“超越Fitts”:基于轨迹的HCI任务模型,“Chi'97的诉讼程序。

Sergey Kulikov,I. Scott Mackenzie,Wolfgang Stuerzlinger。“衡量转向运动的有效参数”,Chi '05在计算系统中的人类因素中扩展了摘要