Diagonal movement into a submenu is a constrained corridor
Aliases: menu corridor · steering law
What it is
After a menu with children opens, the pointer must walk diagonally from the parent item into the first item of the submenu. That path is not open ground. It is a narrow corridor. Submenu steering is bound by the steering law: the narrower and longer the corridor, the easier it is to slip off the parent halfway and dismiss the tree. It looks like “the menu is too twitchy”. The mechanism is that a diagonal crossing leaves the region that still counts as “inside the menu”.
Why it happens
The parent is a horizontal bar; the submenu opens to its trailing side (or below). The target is in the submenu, the start is on the parent, and the shortest path is a diagonal. A large share of pixels on that diagonal belong neither to parent nor submenu but to the page outside the menu. The moment the pointer steps on those pixels, most menus close the whole tree. People are then forced to move horizontally out of the parent and then vertically onto the item — a polyline. The polyline is longer but safe. Anyone taking the shortcut is punished by the corridor.
The steering law writes time for this kind of task in terms of path length and corridor width: the narrower the corridor (a short parent, a large gap between parent and child), the more one must slow down or go out of bounds. Making the legal region a triangle — a patch from the parent toward the submenu that still counts as inside — is widening the corridor, not changing a delay. That is a different latch from hover-to-open: even if the submenu opens instantly, the diagonal corridor remains.
Studying it
Use a pointing task and trace from parent centre to child centre, logging dismissals from leaving the region, completion time, and whether the path was a polyline or a diagonal. Independent variables: parent height, parent–child gap, presence of a triangular safe region. Dependent variables should match the steering law: widening the safe region should cut out-of-bounds events, not merely change open delay.
Mouse and trackpad should be split. A trackpad’s displacement draws jittery diagonals more easily than a mouse, so out-of-bounds events densify.
Where it stops holding
Menus that stay up on click rather than on hover let the pointer leave and return, so the corridor weakens — though reaching a child still crosses the same geometry. Touch has no hover corridor; submenus usually become a new screen, and this mechanism does not apply. A submenu that opens downward and shares a large overlap with the parent shortens the diagonal. Very short submenus (one or two items) have a short corridor and fail less. When a submenu flips to avoid the window edge, the corridor’s direction jumps and the steering model has to be recomputed.
Applying it
- Keep a triangle or overlapping region between parent and submenu that still counts as inside the menu, so a diagonal does not immediately leave.
- Heighten the parent’s hit strip and shrink the gap; do not let the submenu sit across a visible seam.
- Do not paper over the corridor with a longer open delay; delay does not fix geometry.
- How to check: slide fast in a straight line from parent centre to a child; the menu should not close. Repeat ten times and count out-of-bounds dismissals. Failures clustered on the seam mean widen the safe region; failures clustered on “it opened too slowly” are a different item.