Should the mouse action which closes a dropdown menu trigger the actions under itself?

Question

Assuming we have a dropdown menu which closes on a mouse click (instead of automatically when the mouse leaves the area).

Should this mouse click perform its standard actions, if the mouse happens to be above an element which can be clicked upon?

I've seen both versions being implemented in very similar applications.

If the rest of the user interface is complex, and can have context-sensitive items triggerable by mouse, it makes sense that the user has to click again to perform it. For example, in a web browser, it would be annoying if a link was followed because the user clicks only to close a dropdown menu. In a paint program, it's annoying when a new pixel is painted on the canvas because some menu was closed.

However, if there is an emergency stop button (or similar functionality) on the interface, it can be annoying if the user has to click twice if a menu was open somewhere.

Answer 1

I don't think there's the One True Way to solve this, so you can choose either behavior for your application. That said, the behavior should not depend on what kind of object user would click, because consistency is key!

(There is a reason why "Strive for Consistency" is the very first of Ben Shneiderman's Eight Golden Rules of Interface Design.)

If closing the menu requires a "dead" click, which does not trigger anything else, that should be the behavior every time. If clicking outside the menu would directly trigger the underlying widget, than that should be the exact behavior every time.

(In your example of the Emergency Stop button, I'd argue that the effort of clicking a second time in the exact same location when targeting that button is negligable compared to the risk of unintentionally hitting the button and triggering an actual stop when you just want to close the menu.)

Further, in case you're working on a web application, you can easily help your users predict what will happen, if you display the "pointing hand" cursor over every interactive widget on the page.

In fact, this is the behavior I noticed for the toolbar menus right here on StackExchange, so you can play around with this right now! :)

Answer 2

Given the use case you have suggested I would go for both options

if there is an emergency stop button, that should be clickable, other things should not.

The important thing is making it obvious which is which.

My personal way of doing it is putting a thin overlay over the things that arent the user cannot interact with. Has the added bonus of popping the dropdown nicely and highlighting those things one can still directly interact with.