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.

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

share|improve this question
2  
Left out the option to close by clicking anywhere outside the modal. –  LoganGoesPlaces Sep 10 '10 at 15:34
    
If the only option is to close, it's a "monolog". You should think about getting rid of it or making it modeless. –  Patrick McElhaney Sep 10 '10 at 15:37

6 Answers 6

up vote 12 down vote accepted

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).

share|improve this answer
1  
I agree almost entirely, but I don't think that dialogs should have [x] buttons. I see [x] in window chrome as ending a task that you began earlier. It saves and closes files and email messages (and makes sure they've been saved), destroys browser windows, and exits whole applications. Using [x] to dismiss dialogs dilutes that meaning (my personal opinion, of course). Also, every dialog asks a question (sometimes that question is "could you please read this?"). Clicking a button answers the question, clicking the [x] just means "go away". –  Sidnicious Sep 16 '10 at 4:54

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.

share|improve this answer

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.

share|improve this answer
1  
Have you considered excluding the window frame controls from dialogs? That's what Apple does. –  Patrick McElhaney Sep 16 '10 at 1:42

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

share|improve this answer
3  
I usually bind the OK/Cancel to the Escape and Enter keys. –  David in Dakota Sep 10 '10 at 16:13
    
@DavidinDakota, just to clarify you're saying you bind Ok to Enter and Cancel to Escape right? Not the same order as your words. –  Robert Dec 18 '13 at 23:07
    
That's right! Thanks for letting me clarify. –  David in Dakota Jan 2 at 16:17

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/

share|improve this answer
    
+1 for the article link –  rick schott Sep 10 '10 at 14:36

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.

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.