0

I am interested if there is any specific research or user research on dismissing modal or overlay form dialog boxes. The pattern that includes a semi opaque overlay of the application with an input of some kind in the center of the screen. There are 4 ways I know to dismiss the box without completing the form:

  1. X icon in the corner
  2. Cancel button in the content
  3. Esc key to dismiss
  4. Clicking outside the modal box.

I feel confident on making recommendations on the first three but am challenged by a definitive approach on the clicking outside the box.

Can anyone share any test results or research on this method?

With thanks, Tim

Improve this question
4
  • The convention is that a modal box has to be explicitly interacted with and dismissed by the user - the whole intention is for the user to put some effort dismissing it, by hitting a specific button area. If clicking outside the box will dismiss it, I wouldn't call it a modal box - it's an overlay.
    – Izhaki
    Nov 25, 2013 at 22:26
  • I updated the language based on your comment.
    – Itumac
    Nov 25, 2013 at 23:02
  • Modal dialog/form boxes are easily one the most misused, and by extension annoying, forms used on the internet. If you're using the modal for its intended purpose eg. a warning, a reminder, a properties window, username and password authentication, etc. then it's best to have the user press an OK, Submit, close, etc. button. If the modal box is being used for an annoying ad, begging for a subscription, software download prompt or any other black SEO scam I would recommend going with the outside form click.
    – Josh Campbell
    Nov 30, 2013 at 9:34
  • Another less common but also used dismissal method is pressing the 'x' key; often this is presented as a convenient alternative to hunting for the Close button, instead of being the only way to dismiss the box. (My hypothesis for where it came from: almost ten years ago now, the default behavior of the most popular image lightbox plugin - one of the earlier instances of overlays/modals on the web - was 'press x to close'.)
    – Jessica Yang
    Jan 26, 2014 at 19:27

1 Answer 1

Reset to default
3

First off: no, I don't think there's any definitive research, because what you should do is dependent on the context of your design. Who are your users? What are you asking them to do in a modal overlay? Is it compelling to them or merely an interruption?

Modal overlays are an extremely disruptive design pattern. Abuse of these is rampant, especially when people use them to do things like ask users to sign up for a newsletter or share content on social networks, when all they wanted to do was read a page.

TL;DR: The right thing for the user is to provide multiple options to close an overlay, unless the user must make a choice. If you want to strongly encourage users to make a choice, you can encourage them to do so by not including ESC or "click outside to close" as options, and only including an X. I would not include ESC or click outside to close on a selective basis, and rarely.

That is a pattern I'm using at Wikipedia. We use an extension called Guided Tours which includes all of these close options, some of which can be disabled. (It's originally based on the Guiders.js library from Optimizely, if you're curious.) Some of these are overlay steps, and all of them are little modals that can attach to elements on the page like a tooltip.

In most cases, dismissal rates for tour steps that are not overlays are quite low. For example, since April 1st UTC time, one tour which shows people how to edit had about 800 users see the first modal. Only nine users (~1%) clicked X to hide that step. However, a modal overlay that precedes that step includes an X but disables ESC or click outside to close. It has a 60% dismissal rate. We went with this because it was still outperforming a version where we sent users to a static page and gave them a non-modal CTA. That had a 30-34% acceptance rate, as opposed to 40% in the modal version. I'd say that for a disruptive design like a modal overlay, 40% acceptance rate is pretty darn good, and that's partly because we strike a balance between the number of close options and asking the user to make a choice. In that overlay, we not only include an X, but we include a text link that says, "No thanks, maybe later" to dismiss.

Improve this answer

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.