Debounce time for mouseover menu?

Question

I have a menu that slides out when you hover over a small area of the screen. This menu then slides back in when your mouse leaves the menu area.

I have been running into what I feel are UX issues where if you accidentally mouse out of the menu it slides in immediately and I find it to be a minor annoyance.

To combat this I have added a debounce handler to slide the menu back in after a specified amount of time, and to cancel that if the user returns their mouse to the menu area in that amount of time.

Is there a "correct" amount of time that will prevent users from being annoyed by accidentally closing the moment their mouse leaves the menu, and prevent them from being annoyed that their menu hasn't closed yet when they do decide they want to close it?

Answer 1

This delay is often referred to as dwelling time or posting/unposting delay. For linear menus most research works use the value of 333ms (0.3sec). It seems to be a good balance between keeping the menu open for too long / too short.

Here're examples of two papers using these values:

• Supporting menu design with radial layouts
• Faster Cascading Menu Selections with Enlarged Activation Areas

Answer 2

We have a similar issue with mega-menus on a desktop display. For the desktop display, we set a 250 millisecond delay until the menus open on hover and another 250 ms delay to close. This should reduce the annoying shuttering as users drag their mice around the screen.

No problem on the mobile view, because the menus open and close on click, not hover.

Apart from the two papers referenced above, I have not seen any good research on best timing for hover actions.