Is it necessary to have a close icon and close button on a modal?

Question

I went through the search here and found a similar question from 10 years ago about Windows modals. This is just a regular agnostic modal. Is there a best practice with this case?

Answer 1

The "X" close modal icon allows the user to pay less attention to the modal content.

The lack of an "X" close icon forces the user to pay more attention to the modal content.

Here"s why...

The "X" icon ambiguously closes the modal. Rather than explicitly responding to the modal content the user by clicking it dismisses it. The program response to the modal content is implicit because it must be assumed---in this case "CANCEL" or abort the proposed action.

The modal content, in this case, requests confirmation to perform a proposed action, "DELETE", or abortion of that action, "CANCEL" (not simply "close").

Modal close, best practice

Don't close

When modals have an actionable response, consider the nature of the modal content. Is it directly related to a user action? Is it important to the user (not the developer) to explicitly respond? If so, don't include an implicit response, such as the "X" close icon.

Close

If the modal either has no actionable response, or a user response is unnecessary, include the "X" close icon to allow the user to quickly dismiss the modal and get back on task.

Answer 2

Yes...

Ideally, modals should have an escape route, as should everything that dares to interrupt the user workflow / grab attention in the middle of something. The Esc key exists for this very reason, and it should do the same as the ❌ up there: the expected behaviour is "no thanks, I'm not sure what this is but I'd like to go on without paying attention". When the user reacts like that, a civilized UI should get the popup out of the way without saying another word. That is, if you can skip the operation harmlessly.

But.

There are times when you can't decide which one is worse. After lots of editing, the user just quits the editor - should we save or not? In these cases, I'd say provide a 🚫-sign or something similar where the ❌ should be and (if necessary) explain why you can't just close the modal. On pressing the Esc key, animate the window so the user knows you're receiving the intention but resisting to it for a reason.