In the comments, @RedSirus led me to the following term:
the lagging of an effect behind its cause
the dependence of the output of a system not only on its current input, but also on its history of past inputs
a retardation of the effect when the forces acting upon a body are changed
The field of user interface design has borrowed the term hysteresis to refer to times when the state of the user interface intentionally lags behind the apparent user input.
However now that we have the correct term, it is worth noting that for a good UX, hysteresis (delayed activation) is often undesirable:
In question 6 of this article Tog notes that a menu system which requires clicks can operate as quickly as the individual user, instead of all users being forced to operate as slowly as the interface if submenus open only after some delay.
Amazon's technique matches Tog's suggestion of watching where the user moves their mouse, and responding differently depending on where the user appears to be going. Whilst more complex to implement than a delay or forced-click, this results in a far better experience for the user.
In my experience of trying to implement a simple hysteresis delay system purely with CSS, I met with the following conflicts:
- I wanted to delay the disappearance of submenus, to give users a chance to reach them by moving diagonally
- But I wanted a much smaller delay for the appearance of submenus after the parent item was focused
- But I was forced give both actions the same delay (including animation time), otherwise we would see two submenus appear at once, overlapping.
- After tweaking the appearance delay as low as I felt appropriate, I later had to go back and increase the delay, because the initial menu was being activated accidentally while the user was travelling somewhere else in the app. (This is only really a concern for the initial opening of the parent menu, and could be addressed by using a longer delay than that used for submenus, or by requiring a click to open the initial menu.)