The Accot-Zhai Steering Law (discovered by HCI researchers Johnny Accot and Shumin Zhai, but also known simply as the Steering Law) is a corollary of Fitts’s Law. The Steering Law is an equation that predicts the efficiency of very common interactions; it describes the particular case of path-steering tasks — that is, when a user must move a pointer through a path with boundaries or a “tunnel.” The equation is:
Don’t worry, most UX professionals will never need to use this equation: the main actionable insight is that long, narrow tunnels take more time to navigate than short, wide tunnels.
Definition: The Steering Law predicts the time necessary to steer a pointer (such as a mouse cursor) through a bounded tunnel (such as a menu, a scroll bar, or slider). The steering time depends on the length and the width of the tunnel: the longer and the narrower the tunnel, the more time will be required to successfully steer through it;
According to the Steering Law, a tunnel is any user-interface control that requires the user to move the cursor (or drag a finger on a touchscreen) along a path 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 dropdown menus (particularly hierarchical menus with hover-revealed submenus), parameter-control sliders, scroll bars, video-playback scrubber bars, and video-game elements that require drag and drop in a straight line.
In most cases, moving outside the tunnel boundaries interrupts the user action: for example, in a hierarchical dropdown menu, if the user moves the cursor outside the menu area, the menu disappears (which is a somewhat harsh penalty, if the tunnel breakage was unintentional). That is why the width of the tunnel is important for how easily the user can steer through — a narrow tunnel makes it easy to accidentally exit the tunnel area.
Why people have trouble maintaining the cursor on a straight path has to do with human physiology: the elbow and wrist, which enable the movement of the hand, describe an arc, not a line. Try it yourself: hold your arm out directly in front of you and move your hand from left to right. You’ll notice that, even if you attempt to keep it moving in a straight line, your arm will always have a subtle arc in the movement. As a result, using one’s hand to move in a long, straight line is physically difficult; the longer the motion, the greater the chance of error. Furthermore, many users (especially older adults and those with disabilities) have unsteady hands, and all mobile users are subject to the bumps and jitters of using a device out in the world.
Making Menus more Steer-Friendly
Menus are one of the UI elements most affected by the Steering Law. Here are a few design choices to make them easy to use.
Keep dropdown menus as short as possible. Menus with few choices minimize the time and difficulty of steering through the narrow tunnel, and also reduces the time to visually search through a large number of choices.
Avoid hierarchical menus, 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:
- The vertical tunnel needs to be short, but that means that each of the items in the menu may have to be given smaller height — which leads to narrow horizontal tunnels.
- The vertical tunnel must also be wide, but that leads to longer horizontal tunnels from main-menu option to the corresponding submenu.
When 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.
For navigation menus, consider mega menus (or square menus) as an alternative to pull-down menus. As mega menus allow for free movement within a wide 2D space, the steering law does not apply (though Fitts’s Law still does, so make sure targets are still large).
Sliders, Scrollbars, and Scrubbers Need Additional Controls for Precision
When designing other UI elements that involve path-steering tasks, such as sliders, scrollbars, and video playback heads, remember that users will have a hard time achieving precision with such controls. Therefore, for precise tasks, supplement these UI elements with other secondary controls that support precision. When 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 with stepper buttons) to choose a specific value. Also, allow users 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 least 1cm x 1cm) and ensure that the user’s finger won’t obscure the slider (or any labels around it).
Finally, you can add padding to a tunnel, making its effective width bigger than its visual representation on the screen. The padding will allow some wiggle room for the user to move along the tunnel without dropping out because of a small deviation outside the tunnel’s visual area.
The Steering Law states that narrow, long tunnels are more difficult to navigate than short, wide ones. Dropdown menus, hierarchical menus, sliders, and other path-following UI elements should be designed so that the corresponding tunnel is as wide and as short as possible. Remember that such controls are hard to use for precise tasks and consider alternatives (such as mega menus instead of dropdowns or secondary controls for sliders) to prevent errors due to linear path-steering interactions.
Johnny Accot and Shumin Zhai. 1997. “Beyond Fitts' law: models for trajectory-based HCI tasks,” Proceedings of CHI '97.
Sergey Kulikov, I. Scott MacKenzie, Wolfgang Stuerzlinger. 2005. “Measuring the Effective Parameters of Steering Motions,” CHI '05 Extended Abstracts on Human Factors in Computing Systems.