How to balance navigation menu hovering lagginess and usability?

Question

I'm building a navigation menu with many icons. Hovering one icon, will expand a different sub-bar while hiding the others.

The delay I've choosed of 180ms is to avoid the users to accidentally change section while moving their mouse toward a link in the sub-menu. With <100ms there's a real usability issue, people reports not being able to click on the links in the sub-menu. Increasing the delay, however, makes it feel laggy and creepy. Many users reported a bad experince at 180ms.

I think it could be a good user experience, but I still have to find the right balance between how it feels to the user and how to avoid it beeing useless.

I've searched and found many articles on human percepetion (i.e. Investigation on human visual response latency), since I think this user experience problem is more on perception and subjectivity.

I wasn't able to find in literature anything about the "magic number" of ms that will solve my issues.

I'm looking for suggestion, if anyone has ever faced my same problem or has any alternative approach to propose.

While writing I've even found this: What is the correct term for the grace period when a user unfocuses an element However there seems to be no solutions for horizontal menu and I'm still not sure this case can be considered as an hovering aim issue.

You can see it working on this DEMO: http://jsfiddle.net/xC6Bh/

Answer 1

Don't solely rely on a delay!

As you have already experienced, there isn't really a good value that makes the delay technique exhibit good UX. For some users, this delay will be too short, and for others, it will be too long.

Break out your protractor

Instead, you can use some simple math to calculate the coordinates at which you should perform a menu transition. Calculate the angle between the parent menu item's origin and the start and end of the sub-nav items. This creates a natural triangle that you can use to determine if the user's mouse is "on the way" to a menu item or if they are changing to a different parent item. I've drawn a rough sketch of this below from your fiddle:

Note that this is the technique that is used by the mega-menu on Amazon.com:

(picture taken from the above blog)

Obviously this gives you a little more work to do in terms of design (making sure your parent nav items are appropriately proportional in size/position to the children, etc.) and Javascript implementation, but I think this solution is much better than using a simple timed delay. (Now you can add in features like a delay if the user hasn't made progress on the y-axis, for example.)

Answer 2

I've read this question several times before trying to get the question out of this. If I were to try to rephrase your question, you are trying to understand the best method for displaying sub menus?

I think in general I would say that there is no magic number. That if anything changes without the user's consent and without them expecting it to change then this wouldn't be good user experience. The kind of menu you have in your example wouldn't work in mobile either.

The best way to achieve this sort of menu is by use clicks as the way to update the sub menu. When the user clicks out or moves their mouse away from the defined boundaries you close the menu as it appears.

If you aren't using a click, you should switch into that menu immediately. The always visible sub menu isn't something you see anymore as they are usually expanding menus. If you follow examples that people employ using Bootstrap you will find that they are all instantaneous and all work in mobile. The hover effect unfortunately only works as expected in desktop and many sites have issues working in mobile for this very reason.