Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Why do some UIs use drop-down menus that can be closed with a second click, while others do not? It really annoys me when I have to click outside of the menu in order to close it and I accidentally activate another action. The escape key usually works, but it is so far away :(.

For example,

IntelliJ IDEA

Edit: Allow me to clarify. In the example above, clicking outside of the menu closes the menu, but can still activate other buttons (which is part of my question, is this a design flaw?).

Edit 2: I found out that I can right-click the button to collapse the menu. This works better than clicking a non-interactive UI element or pressing escape to collapse the menu.

share|improve this question
    
Can you create a mock-up without 10 rep? –  norabora May 6 '13 at 19:34
    
I added a link to imgur. –  Andrew McKinlay May 6 '13 at 19:37
1  
Do you mean that clicking on Main would close the drop-down once it has been opened? –  norabora May 6 '13 at 19:50
    
@norabora Yes in that example, clicking Main does NOT close the menu. It is very annoying. –  Andrew McKinlay May 6 '13 at 20:35

4 Answers 4

up vote 3 down vote accepted

The answer is simple: the designer did not think everything through. And the programmer implemented the design without further thought as well.

Most users, while working with computers, think this way: if I do something to make things happen, doing this very same thing again should reverse things. Possibly because such behavior was introduced in computers' UI since the beginning of the web and has been re-introduced over and over again.

The short answer to your question is yes - clicking a clickable element again should revert it to its original state, where applicable.

Long answer — an active element in a UI is there for a user to change its state. Changes of state can be separated into two general groups: 1) the action alters the UI to an irreversible state (for example deleting an item from a screen) and 2) the action alters the UI to a reversible state. Your example is the second case, so users need a convenient way to revert the UI to the original state. This can be done in a few ways, including:

  1. Click on the element again (which is natural).
  2. Hit the ESC key (which is a convenient way in computer programs to undo an action).
  3. Hit anywhere else but on an element (which is a convenient way to close drop-down menus, popups etc.).
  4. Hitting a "Close" button.

If you create an element which will introduce reversible states, you should also introduce a convenient way for a user to revert the state back. In your case, it could be clicking on the element again.

It is up to the designer to think all these details through and describe the behavior of the UI. After the designer has decided how to revert the UI to its original state, that behavior should be implemented all across the application. Once a user does a series of reversible changes to the UI, he'll expect all other similar elements to behave in the same way. And if they don't, the level of friction and frustration will rise and could possibly lead to abandoning the product and switching to a different program.

share|improve this answer

As far as I know, all applications should employ this feature. The menu label when clicked first, opens the menu and when clicked once more, closes the menu. This is the default behavior to close the menu. You can have other behaviors like, closing on losing focus or closing when clicked out of bounds.

The clicking to close menu acts as a nice 'undo' mechanism similar to many toggle buttons.

Accordion menu is a good visual example of this feature. When you click the parent, the children are visible and when you click the parent again, the children are hidden.


I raised a related question regarding the behavior of menu items in websites and desktop applications if that provides you further information : Why do menu labels behave differently in desktop applications and websites?

share|improve this answer
    
+1 I prefer your answer to mine. Especially this 'undo' mechanism thing. –  Gildas Frémont May 6 '13 at 20:53
    
@GildasFrémont thanks :) –  rk. May 6 '13 at 23:22

This is poorly implemented example of navigation. A menu is NOT A WINDOW which should stay open unless closed. Menus are set of commands and while searching for one, I open few menus before finding what I am looking for. That means every time I open a menu, I expect it to close when I click outside or click on a different menu. So the example you are discussing is a bad implementation and should be corrected. When this rule is applied, clicking on the Menu Header itself will close the menu - BUT - If you would click on a different menu header, the first menu should close and the other one should show-up with the same click.

enter image description here

A working example of this approach is Adobe Photoshop and probably.

enter image description here

share|improve this answer

Usually a drop-down menu disappears when the user clicks anywhere BUT the drop-down menu.

That is what a user expects and it really annoys her when she clicks outside the menu in order to activate another action and it does not close the menu.

enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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