1

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?

3

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:

1
  • Perfect, exactly what I needed, and it feels just right. – tt9 May 11 '16 at 22:06
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.