I am wondering what a good delay duration is for a submenu (2nd level) to appear when the user’s mouse cursor is over the main menu (1st level) link. I’ve created menus like this before and there’s an example on http://www.sbb.ch/en/home.html (eg. the first link is “Leisure & holidays”) where I’ve used a delay of 200ms before the submenu appears in a big blue bubble.
I’ve also used a delay of 100ms, 300ms and 500ms in menus in other projects. These values are chosen by client of the project, probably based on what they think is all right.
What is the best delay concerning usability and are there scientific tests to prove this?
I’ve spent a couple of hours searching the web and I’ve found out that there should be different delays for certain mouse movements over and around a menu with a submenu.
The delay for entering a link (mouseover) should be long enough so that the submenu does not appear if the user simply moves the mouse cursor over and past the first level link. Without a delay the submenu (2nd level) would open instantly and irritate. This delay should be between 100ms and 200ms.
The delay for leaving a link (mouseout) should be long enough so that the user can leave and enter without the submenu disappearing. Instant disappearance would also irritate and probably lead to frustration if there are more than two levels to a menu. A good delay value for this would probably between 300ms and 500ms.
Sources:
1) jQuery’s delay values for “slow” and “fast” are 600ms and 200ms.
Source: http://api.jquery.com/delay/
2) A blog article speaks of values between 200ms and 500ms.
Source: http://solvingdesign.com/archives/103
3) Sitepoint mentions 500ms in its article about mega dropdown menus.
Source: http://www.sitepoint.com/make-a-mega-drop-down-menu-with-jquery/
4) Microsoft Window’s default delay is 400ms.
Source: http://www.youtube.com/watch?v=mLZFwQ2hPzc
Conclusion
No scientific proof, but the numbers speak for themselves.