Closing modal dialogs

Question

I come across modal dialogs everyday and I see different implementations all the time.

Most modal dialogs have a [X] in the upper right hand corner of the dialog along with a Cancel/Close button.

There are so many options, what is the best practice for closing modal dialogs? Also, are there any studies to reference showing what is preferred?

Implementations I have seen:

• Cancel/Close button with [X] in the corner(top right/left, bottom right/left?)

• Click anywhere on the modal to close

• Just an [X] in the corner(top right/left, bottom right/left?)

• Just a Cancel/Close button

• Click anywhere outside the modal

• Esc key with or without [X]/Cancel/Close

Answer 1

I think the best implementation depends on the type of dialog and desired interaction mode.

Dialogs that require an action shouldn't have an [X] to close them, in my opinion (nor be closed by clicking anywhere other than the action buttons.
Most of those have a "Save" and "Cancel" set of buttons, so it leaves the users thinking (even if for a split second) if "close" means "cancel" or not.

Information dialogs should have both a "close" button and a [X], in my opinion.
If the information is something the user might want to interact with (for example text to be selected and copied), then of course you cannot allow a click inside to close the dialog.
If you want the user to pay attention to the information, I would also disallow the clicking outside to dismiss, since it increases the chance the user has to focus on the dialog to close it (and hopefully read something there).

Answer 2

You forget ESCAPE (Esc key) to close some (Cancel (OK/Cancel), or OK for single OK) modal windows

Answer 3

I never click the cross in the corner. If the buttons are left out, I'm usually confused until I remember it's still a window. I would go with OK/Cancel buttons (unless other words are more fitting, eg 'yes/no' 'save/don't save') and a cross in the corner that does the same as the cancel button. No other 'hidden' actions, such as closing if you click anywhere.

Answer 4

The exit button is always needed, whether the users click on it or not, because it's absence is confusing. The Close links help, but they need to be accompanied by the 'X'. I suggest you always provide all of the exit options ('x', link and click anywhere to close).

I'm not currently aware of a study referring to this topic, but there's an interesting article con Smashing Magazine about the proper use of Modal Windows that might interest you: http://www.smashingmagazine.com/2009/05/27/modal-windows-in-modern-web-design/

Answer 5

Explicit dialog buttons also turn out to be an important accessibility feature. I've worked on the GNOME Human Interface Guidelines for many years, and every time we update them there are calls to 'reduce clutter' by removing 'redundant Close buttons' in the dialog, for those dialogs that can be unambiguously closed using the window frame control and its associated keyboard shortcut (Alt-F4, same as MS Windows).

Every time we suggest it to the GNOME accessibility community, however, they re-state their preference for retaining the tangible buttons inside the window itself.

Answer 6

I would probably go with both controls:

(X) - top right corner

Rationale: very common for the web and I think even Mac users are used to it. [X] is a symbol that users recognize well and having (Close) seems redundant.

[OK/Close] - in the content

Rational: if the user skimmed through the text, there eyes may very well land under the text and the cursor might closer to the close button, so it might be faster to hit the button, especially, since it is bigger as well. You can also put focus on the Close button so that the user can just hit Enter to close the dialog.