2

In a modal popup , to close it we can have three option - Either a message at the top Esc to close or [x] or both. (Or depending on the message in the modal popup an ok or cancel.)

From my research I found out the following.

  • Laptop users mostly do not use mouse and tend to use key board shortcuts for almost everything , and these people might use the Esc button.
  • People who frequently uses mouse will adhere to it and would prefer to click on the close button to close the modal popup

Apart from these are there any points that favours the selection of either options?

Is it a good idea to use both at the same time? Are there any existing studies or guidelines regarding this?

  • 2
    I suppose the esc button should work in every case. – xpy Sep 23 '15 at 12:00
  • 2
    First answer the question: Do you really need a modal dialog? Because they ARE evil. If you really DO need one, then do everything you can to make it easy to get rid of - Esc should work, and there should be a close button exactly where the user expects to find one. – Michael Kohne Sep 23 '15 at 12:06
  • @MichaelKohne I would just like to point out that this is what happened to me when I visited that article about how evil modal popups are. I hate this. – cat Jan 20 '16 at 6:28
  • @cat - and here's a perfect example of why you want contact information on your blog - I've got no way to tell that guy that his blog is demonstrating the evil of which he speaks. – Michael Kohne Jan 20 '16 at 10:42
  • @MichaelKohne When i opened that website, it showed me a modal to sign up for their newsletter. The irony is so sweet it gave me diabetes. – ecc Dec 19 '16 at 16:25
4

I think that the best solution is to let both (esc and click on close button)

  • Shortcuts are good for laptop user then Esc
  • Novice users prefer to click on close button because they don't know shortcuts.

In case modal popup, you can add an other issue to exit the modal : Click outside of modal.

An example (Custom Dialog) https://material.angularjs.org/latest/#/demo/material.components.dialog

1

I agree that it's important to have both options and also the "click outside" of modal. But bear in mind that when the user is completing a task it is better to offer a CANCEL button and remove the click outside in order to avoid missing completion.

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.