Monday, November 21, 2016

Closing modal dialogs


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



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...