5

I have been looking around at different modal dialogs, and wondered about the best way to let the user close it. Clearly, the X has become a standard user expectation to close the window. Clearly the Esc key should do that as well. But I notice some allow the user to click the background to dismiss the dialog, and some don't.

I believe that there are two different types of modals: things that require user input and those that don't. One type of dialog is informative and passive - like browsing a picture or "hey this happened". Another dialog type is a transaction, that the user has input on. For example clicking on a database record and the modal allows editing of fields on that record.

It would be very frustrating to have the user enter important information, and accidentally click outside the dialog closing the record and losing their changes. I can see how explicitly clicking on the X or Cancel button communicates the user's desire to exit the modal and lose his work. In real life, people have multiple windows open, and copy stuff from window to window.

In the passive case, it's no big deal to make it a little easier to close the dialog because there are no consequences.

Clearly all dialogs within an app should behave the same. An app might combine informative dialogs and transactional dialogs.

What do you think is the best practice for this in a webapp that has many transactional dialogs to edit important records? Thanks for your thoughts.

  • 2
    If you can click outside the modal to close it, it's really not a modal. It's an overlay--or lightbox--or whatever you want to call it. It certainly has its uses, but note that it is no longer truly a modal. I disagree that all types of 'layered' content need to have the same interaction. The interactions need to be consistent with the context and content--not the app as a whole. – DA01 Mar 1 '14 at 15:54
2

I think you want the same behavior for all modal popups - whether they're alerts, confirmations, data-input, or image popups.

I think most users don't expect to treat an image popup the same way as a data-entry modal. Therefore, not all popups should behave the same. I know that this consistency attempt looks like it's simplifying the experience, but this case actually throws in confusion and frustration as you have indicated. (This is the same type of simplification as having the user register an account on a website by providing only user name and password on the very same text boxes to log-in the user.)

Most users know that they can click the image or the translucent overlay outside of it to make the image disappear. They won't automatically do that to a form that asks for data.

You could have the x button on the top-right corner of every modal popup for consistency, and the result would ultimately be to hide the dialog. HOWEVER, for data-entry, you will need to warn the user that changes will not be saved, and give them the option to remain in the modal.

Do nothing if the user clicks outside a modal form - not even a confirmation to close or remain open. Again, they won't get confused because they know they're responsible for specifically committing or canceling the dialog.

For alerts, you can have the user click both escape or enter. I personally like enter because it means I'm saying "OK". Escape to me means to cancel an action, and cancelling an alert dialog doesn't make sense.

  • Very well explained. – Emo Jul 9 '18 at 11:20
2

I have been using Zurb foundation Framework for my web designing for too long now; Mainly because it is the most lightweight, and it provides a clear and pretty simple UX.

Please refer to Reveal component to see the modals in Action.

Modals should behave differently based on the device that it is being viewed on, from mobile to desktop, and even tablets.

Each environment has its differences, and its ways for handling user input;

Desktop; it is either using mouse and/or keyboard (not including voice controls to not make things more complicated), the most common way to close a window on a desktop environment is by clicking the X button on the top left/right of the window, yet with keyboard, ESC (Escape button) is the one that has been handling dismissing views and windows since the dawn of computers (Unless I am mistaken on my history resources, please correct me).

Mobile/tablets; due to their limited screen sizes, it is harder to tap on the X button to dismiss the modal, this means that there must be an extra method, clicking on the overlay on the space left on the screen is the sure way to go, as it has a meaning that the user is no longer in need of using the modal, and he wants to go to the background page/where the modal came from (having an overlay to make it easy for the eye of the looking to distinguish between the main window and the modal window is VERY IMPORTANT)

Conclusion? Modals should allow different methods to dismiss it, most important are:

  • ESC Button
  • X Button
  • Click on overlay to dismiss (A little bit more important than the X button for touch devices)

In the demo above, Zurb foundation clearly uses all of what i described here; visit the page to test for yourself

0

Personally... I try to avoid using any kind of "informational" modal. Contextual, in-page displays work much more efficiently without the risk of covering page content or having a need to close or go back.

Action modals with a clear "Cancel" or "Confirm" should have little to no risk of a user wanting to abort a task.

IF you absolutely have to use a modal for forms or other complex interactions... I would place a cancel or close button at the top right to present an obvious exit point, otherwise the user might click BACK and lose the data they tried to input.

If you're doing a multi-step modal...well, just dont. :)

  • It's the clicking of the background (the gray underlay) that I am most interested in. Is a user click anywhere on the underlay indication of the desire to close? Same as X or cancel? – httpete Mar 2 '14 at 21:58
  • I've tested it a few times... more advanced web-users pick it up, but it tests very poorly with novice users. – Aaron Benjamin Mar 2 '14 at 22:44
  • I think the purpose of a "Modal" dialog is to indicate a new mode. The user needs to act explicitly in that mode in order to either approve, or cancel this mode. The background is intentionally dimmed to focus the user on this task. Clicking the gray background should do nothing. Clicking Cancel or X indicates that they wish to return to the previous mode. – httpete Mar 3 '14 at 15:07
  • It's a bet between convenience and consistency. You cannot possibly have the feature enabling closing of modal by clicking on esc button or background, for all use-cases. It will be terrifying. BUT you can have it work without enabling that feature for all scenarios. So it becomes consistent, but not so convenient.. Why do we try to make a totality approach that works for all scenarios? It's highly dependent on a given applications' use-cases and the habit of its very users. – Emo Jul 9 '18 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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