Steering Law
Moving a pointer along a constrained path takes time proportional to the path length divided by its width, which is why nested menus are hard.
Definition
Accot and Zhai (1997) extended Fitts's Law to trajectory-based tasks. The time to steer through a tunnel is proportional to the length of the tunnel divided by its width, so long narrow paths are disproportionately slow and error prone.
Established research. Originates in published research and has been replicated. The effect is real. Its size in your product still needs measuring.
On this plate
Reach for this when
- Designing any menu with submenus.
- Building sliders, range controls or drag interactions along a path.
- Auditing complaints that a menu 'keeps closing'.
- A design asks people to move a pointer along a corridor, as in a cascade, a slider track or a drag path.
Common mistakes
- Hover-only cascades with no delay or intent buffer.
- More than one level of nesting.
- Assuming mouse behaviour transfers to trackpads and touch.
The nested menu problem
Traversing a cascading menu means steering the pointer along a narrow horizontal corridor without leaving it. Slip vertically and the submenu closes. The steering law explains why deep cascading menus feel fragile even when every individual target is large enough.
The classic mitigation is a triangle or cone hit area: when the pointer moves towards the submenu, the interface tolerates vertical drift for a short window. Several component libraries implement this as safe-triangle or pointer-intent behaviour.
Mitigations
- Add a movement-intent buffer so the submenu stays open while the pointer heads towards it.
- Add a short close delay, typically 100 to 300ms, rather than closing on the first mouseout.
- Keep cascades to one level. Two levels of hover-driven submenu are near-unusable on a trackpad.
- Replace deep cascades with a click-opened panel, a mega menu, or search.
- Never require steering on touch, where there is no hover state to steer with.
Paths people have to steer along
Do
- Give submenus a tolerance area, so a diagonal move towards the child does not close the parent.
- Add a short delay before a hover menu closes.
- Replace deep cascades with a panel, a list or a search field.
- Make drag targets wide, and allow a drop anywhere in the row rather than on a precise line.
Do not
- Build three-level hover cascades, which are the canonical failure of this law.
- Require a drag along a narrow track when a click or a typed value would do.
- Assume a design tested with a mouse works with a trackpad, a touchscreen or a head pointer.
In practice
- i.
Safe triangle in dropdown menus
Component librariesTracking pointer velocity and direction, then holding the submenu open while the pointer travels within a triangle towards it, converts a fragile corridor into a forgiving one.
- ii.
Replacing cascades with panels
Web navigationLarge sites largely abandoned multi-level hover menus for click-opened panels, which removed steering entirely and works identically on touch.
- iii.
The menu that closed on the way to the submenu
The classic failureThe pointer leaves the parent item on its way to the child, the menu closes, and the user starts again. Every implementation that works has either a tolerance triangle or a close delay, and most hand-built menus have neither.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Fitts's Law
LawTime to hit a target rises with distance and falls with the target's size.
Key difference
Fitts's Law is about acquiring a target: distance and size decide how long the pointer takes to arrive. Steering is about staying inside a path on the way there. A submenu is easy to reach and hard to steer into, which is why it fails.
Use Steering Law when
- The pointer has to stay inside a corridor, as in a nested menu.
- Leaving the path cancels or changes what is happening.
- The fix is a wider path, a shorter one, or a forgiving timeout.
Use Fitts's Law when
- The movement ends in a click on a discrete target.
- The levers are how big the control is and how far it sits.
- Screen edges and corners are in play, being effectively infinite.
Local chart
LAW·016 · Region I · Grid B1
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
Beyond Fitts' law: models for trajectory-based HCI tasks
J. Accot and S. Zhai, CHI, 1997
- [2]
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Applied through
Where this shows up as a concrete interface decision.
- DropdownCMP·019 · Component
- MenuCMP·018 · Component
- PopoverCMP·012 · Component
- NavigationPAT·001 · Pattern
Related concept
Connected closely enough to change how you apply this.
- Content on Hover or FocusA11Y·018 · Accessibility
- Keyboard NavigationA11Y·002 · Accessibility
- Power Law of PracticeLAW·015 · Law