Use hover for top menu instead of click (Feature #764)

Does anyone have any comments?

Other than: I think click-activation for menus is less surprising because it's the same behavior as for example desktops, reflects the intent rather than a position of the mouse, I'm not sure how good the hover-style would work for touch devices and that I've cursed (nearly?) every hover-activated menu I've come across because you have to take care to stay on the menu to keep it open, no :-)

In short: I'm for click, not hover.

Felix mentioned the important points:

• It' less surprising for most users
• It's better usable for people with motor disabilities as the exact position of the pointing device is not important for the whole duration of the interaction
• Actions for opening and closing of submenus are active choices instead of being implicit.
• It works intuitively for touch devices without a mouse pointer.

So I'm pro-click.

The only thing we might have to change is to reduce the hover-effect currently on the menus. The goal should be to indicate that it is a clickable area without implying that it actually does something on hover. Currently, the most important hint (at least for sighted people) is the small arrow besides the menu that is universally understood as an indicator for a menu or something that can be expanded on click.

Felix Schäfer wrote:

Other than: I think click-activation for menus is less surprising because it's the same behavior as for example desktops

Designing for the web is different than the desktop.

I'm not sure how good the hover-style would work for touch devices

Good point, I'll test this out. If anything we could handle touch events too.

(Also the current click event doesn't work on a touch device to close a menu either)

Holger Just wrote:

Felix mentioned the important points:

• It' less surprising for most users
• It's better usable for people with motor disabilities as the exact position of the pointing device is not important for the whole duration of the interaction

Do you have links to research that says this or is this your opinion? I've been seeing a lot of accessibility "facts" being thrown around over the past year that aren't backed up by any factual research. It's even worse when two "accessibility experts" say exactly the opposite, which is what I found with "click vs hover" menus.

The only thing we might have to change is to reduce the hover-effect currently on the menus. The goal should be to indicate that it is a clickable area without implying that it actually does something on hover. Currently, the most important hint (at least for sighted people) is the small arrow besides the menu that is universally understood as an indicator for a menu or something that can be expanded on click.

I think I agree. Right now hovering on the menu depresses the button which generally means you activated the button. I think it should just be highlighted more (e.g. slightly lighter color on hover and then a depression/white on activation). The sidebar menu is slightly better.

Eric Davis wrote:

I'm not sure how good the hover-style would work for touch devices

Good point, I'll test this out. If anything we could handle touch events too.

I just tested how hover works on a touch device, it's the same as click. You touch the menu, it opens, you can untouch and the menu stays open. (ipad and iphone, ios 5).

I use iOS 5, but have to say that it's not a standard. You have to make sure it will work with android 2.x, not to mention windows 8 (ie) and linux touch enabled interfaces. Being useful for many but not for all can be a not good solution. I'm also votting for a click solution, as it's what iOS emulates and i think the others would do, so, instead of risking not working in some untested situation, just go for it

Eric Davis wrote:

Felix Schäfer wrote:

Other than: I think click-activation for menus is less surprising because it's the same behavior as for example desktops

Designing for the web is different than the desktop.

"for example", I could throw in ATMs and ticket machines for public transportation too, but that's not my point.

The point is that the common abstraction for menus is "click-to-open", designing for the web is different from the desktop, that's not a reason to just throw (somewhat) standard and widely used mechanics out of the window. EVs can be designed quite differently from gas guzzlers because you don't need to mechanically transfer movement from a central motor to the wheels, they still have round wheels though.

Anyway, even leaving this argument out, the only argument I read from you that wasn't a counter was that you like hover better/hover feels better to you vs. less surprise and explicit action, this qualifies as settled on click for me.

Thomas Winkel wrote:

If this is easy to implement, I would suggest to enable this feature on chiliproject.org for one week and discuss it afterwards.

Btw, for me the the menus without content feels like a bug.
For excample "Projects" when you are not logged in or not assigned to any project.
I think they should be grayed out.

I reopened this issue, not sure if this is the correct proceeding when adding a comment to a declined issue...?

+1, hover is a must have (IMHO)
+1, empty menus should not be shown (or disabled/grayed out), like Thomas says (IMHO)

-1 IMHO Hover can be annoying. Granted - less so if there are no side-sub-menus. Can it be added as a theme option so it's just a matter of what the default should be?

+1 Empty menus greyed out

PS High Priority? I think high priority should be reserved for debilitating issues, not features, wishlists or cosmetics.

Hi,

good arguments - I'll test the hover thing on my installation.

Making it switchable could be realized simply by adding a new theme, so one can switch that in the Settings page.

Greying out empty menu entries sounds smart - I fear it's currently hard to realize that by a Ruby programmer, I could ry to solve that by JavaScript (inside the theme).

ciao,
Chris

Side Note:

• Hover: doesn't work for mobile UIs and should be taken into mind
• Greying out: could be done with jQuery