3

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/

  • Thanks for the edit. I believe the question is that you are looking for the best UX for displaying a sub menu? Or displaying this specific sub menu? The question was programming specific at first, just trying to get more details. – Francis Pelland Apr 28 '14 at 17:19
  • I think it's more related to how to achieve this specific sub-menu. The website is a videogaming portal of a software house and each icon represent a videogame. Since the games have different "tools" (separated forum, separated news, etc...), they should be divided this way unfortunately. By the way, thank you for your edit. – rgalloni Apr 28 '14 at 17:46
  • Just an FYI, I updated your jsFiddle demo with some code improvements. – Code Maverick Apr 28 '14 at 18:07
  • Thank you, however now without the delay it is more evident how it's not usable :D – rgalloni Apr 28 '14 at 18:29
  • @rgalloni - That's because I took out the delay. It's not needed. Users know how to navigate menus. If you want the menu to stay open for them when they move their mouse off of it, then implement a show() when they click the header. That way users who know how to navigate can use the quickness of the hover action and users who want to peruse can use the click action. – Code Maverick Apr 28 '14 at 21:09
2

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:

Diagram of angles

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

Amazon.com mega menu

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

  • Thank you, I'm going to try implementing also this method to see if it works and test it on a sample of users. I will report here the results, I'm curious to see if it works with an horizontal menu as well. :) – rgalloni Apr 29 '14 at 6:29
0

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.

  • I agree with that and I have this sensation too. Mobile is not a problem, since clicking on the top-bar icon will load the specific category and the sub-menu will be opened on the expected category. – rgalloni Apr 28 '14 at 17:47
  • However I feel that having to click on the item to make the sub-items appear will make them "hidden" to many people. While the hovering effect has more an immediate effect. – rgalloni Apr 28 '14 at 17:49
  • If you are concerned that people won't know they have to click, you can put a down arrow that indicates there is more to that button. Have a look at this bootstrap example: getbootstrap.com/components/#navbar – Francis Pelland Apr 28 '14 at 20:04

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.