I want to put hand gesture on a webpage. Usually, in webpages, there's navigation bar that is located at the top of webpage. Often nav-bar is in a form of multi-level menu, like drop down menu. And by hand gesture here, I mean the form or movement made from wrist to the end of your finger, e.g. 'thumb up', 'peace sign', 'waving hand', etc, or a motion/movement made by your hand, like 'move to the right', 'move to the top', etc.

But then I thought, is drop-down menu good to be implemented as the UI for multi-level menu that navigated using hand gesture? Why it may be good, why it may be not? Maybe there's another form of multi-level menu more suitable to be used? Then, maybe, what kind of gesture should be used? Is there any user preferences about this?

To sum it up, is there any research related to those matters?

I found this though,
Related topic with Leap Motion: Rethinking Menu Design in the Natural Interface Wild West
but that's the only one I could find.

  • 1
    The question is unclear, could you please elaborate a bit? Also, when you say hand gesture, what do you mean?
    – Izhaki
    Commented Jun 5, 2014 at 0:58
  • Thank you very much for your feedback Sir, I've edited it.
    – Konayuki
    Commented Jun 5, 2014 at 2:17
  • I'm still a little unclear. Are you looking for the right type of cursor to use, or an alternative to a multi-level dropdown menu? Commented May 1, 2015 at 22:40

3 Answers 3


Drop down menus can be made easier or harder to use for NUI applications. For example, some websites I've been on have a drop down that must be hovered over to get to the next level of menu. Inevitably, I move my mouse just a hair and lose the menu (and usually this is with 2-3 level deep drop down lists.) Alternatively, a lot of sites now let you click the header, it drops down a list and doesn't change the list until you click a different piece of the header. These are two subtly different implementations that offer significantly different UX for mouse.

With that said, I think little differences like that will matter a lot for NUI based applications (especially with jittery input data).


In HTML, your navigation menu will typically contain anchor elements. The default cursor value for anchor elements is usually cursor: pointer:

enter image description here

Here's a good cursor reference from the CSS Tricks Almanac


Let's just say that gestures are not very practical to begin with as they have to be memorized or taught. This add a lot of cognitive load to the user. Another thing to consider is why do you need to have this? Is the menu really that elaborate? Or did the app/site lost its focus to what goal it intends to serve?

I'd suggest to limit the menu items and focus a little bit more; multi-level menus are not that trivial as they may lower the discoverability, certainly when the flow is weird (kinda like the "start to shutdown"-problem). They will also require some sort of backtracking mechanism like a bread-crumb than.

I think only some gestures are considered general practical: - pinch to zoom - 2 finger rotation - swipe up/down for scrolling (but should be clear that there is more content) - swipe left/right is IMHO the maximum you can expect from a regular

All other gestures like peace, S, triangles, .... seem a lot of work for both you and the end-user :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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