What is the correct term for the grace period when a user unfocuses an element

Question

I remember reading some time ago that nested menu interfaces should not follow the mouse exactly because the user often moves diagonally when travelling into a child menu, so the pointer might pass over other parents before reaching the desired child menu.

Therefore the interface should allow a small delay before opening a sub-menu, in case the user is actually on their way to somewhere else, and not actually interested in the thing the mouse is over during the journey.

I believe there was a specific term used for that delay. Can you remember the word I forgot?

And is it just for menus, or can it be applied to other delays in the user interface? (For example we have a popup panel which auto-hides when it is unhovered, but we allow a small delay before hiding it, in case the user accidentally slipped outside the panel while moving down it.)

Answer 1

I believe the term is hover intent. The idea is that you want to try and predict the intended behavior, rather than perhaps the literal behavior. This is done by pausing slightly before committing to the hover.

Your example is good. Another typical one is when nested fly-out menus were popular (or perhaps 'abused' is a better term) and a user may want to travel diagonally to get to their intended target:

----------------
 item 1
---------------- ----------------
 item 2  *    >   subitem 1
-----------\---- ----------------
 item 3      \    subitem 2
---------------\ ----------------
 item 4          *subitem 3
---------------- ----------------

(Excuse the bad ASCII art). In this example, a user hovers over item2 to produce the submenu, and now wants to mouse over to subitem 3. The natural path would be diagonally. Without hover intent, the submenu would close as soon as they mouse over item 3.

The trick is to make the pause long enough so that it allows the user to mouse over where they want to go, but not so long that the entire interaction begins to feel sluggish.

Answer 2

In the comments, @RedSirus led me to the following term:

hysteresis

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

Wikipedia says:

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.)

Answer 3

Before the term "hysteresis" was offered, some other words I considered to describe the time delay were:

• affordance
• dampening
• delayed reaction
• easing (but too commonly used for animation)
• focus delay
• interval
• leniency
• pause
• postponement
• remission
• reprieve
• respite
• time-lag
• stay of execution
• suspension of focus

I quite liked focus delay. It seemed clear and to the point.

But the word affordance kept popping into my head. Although that is supposed to mean "a visual clue to the function of an object", it sort-of fits here. We are "affording" the user a bit of time to reach their destination... :)