Are modal dialogs a good practice for the web?

Question

Are modal windows/dialogs considered a good practice for websites? One of the things that concerns me about using a modal window is that it is so much like a pop-up window and it could cause user frustration or cause users to simply close it because it's intrusive. Do you know of any studies that talk about user preferences and use rates?

Are there any accessibility issues beyond having the a modal window link load the content in a new page when JavaScript is turned off? Do you like sites or web apps that use modal windows? Why or why not? What are good and bad practices for implementing modal windows? I know modals are probably most often used when displaying pictures or galleries, but what are some other practical use cases? Do you use them on your site and what lead you to your decision?

Answer 1

From a practice standpoint - excluding accessibility - modal windows provide an alternative that are less startling as, say, dialog boxes and feel less intrusive than pop-up windows. They usually have a more cohesive feel to the site than either of the two aforementioned method. Aside from pictures or media, I've used modal dialogs to serve the same purpose as dialog boxes - to get the user to give some form of required input, or to acknowledge something before letting them interact with the site again.

From a purely accessible standpoint, they aren't so great. They typically require JavaScript, and, because of the way that modals are managed with respect to the DOM, screen readers will not interpret them well. To combat this, it's always a good idea to degrade gracefully - one suggestion is to take the content of the modal dialog and place it on a page. Whenever the modal dialog should appear, have the current page redirect to the 'modal page', get the user's input, and return to the page it was on.

Finally, as far as my personal opinions are concerned, I don't mind modal windows. I think that, when used correctly, they provide a decent experience - if something has to get my attention, then I'd rather it do so without redirecting me from the page, showing an ugly operating system themed dialog, or a pop-up (which my browser will likely block, anyway). I guess, to sum it up, if I had to choose how I'd like to be interrupted, then I'd choose a modal dialog.

Answer 2

I think I must have a different definition of a modal window than you do. I don't think I've ever been to a web page that used what I would consider to be a modal window. Could you give an example of what you mean so that I will understand?

Answer 3

I only use Modal windows on web apps for simple questions or actions that require the user full concentration, that is what Modal is for, to "forget the background" and concentrate in what the applications is asking...

examples:

"The maximum loan allowed was reached to a limit, are you sure do you want to send this new loan to the client?"

selecting a pre-text for sending an email for example (a modal windows that can be used to right subject and body text or select a pre defined subject/body to send to a client...

stuff like that :)

I do a lot of Finance web apps that works from the website where the user enters all the finance data to the sending of the contracts by PDF completed filled in just some clicks, and those are the actions where I use modal windows.

hope it helps

Answer 4

37Signals has an interesting post on modals here. They talk about using modals to indicate importance through screen size, where the modal overlay isn't important enough to necessitate navigating to a new page.

Answer 5

I quite commonly use modal windows in web apps for data entry screens. For example the user will have a list or search results screen and can click on a record to open it up in a modal window to edit. I don't use modal windows as much in web sites as I prefer a slightly less 'application' like feel for a site.

Answer 6

Most of the problems of dialogs on the web center on poor implementation. Some considerations include:

• screen size
• browser window resizing
• where to open dialog
• submitting form elements
• harsh overlay strobe light effect
• graceful degradation (as mentioned earlier)

All of these can be easily overcome with some forethought and programming techniques, making dialogs on the web very useful when implemented properly.

Answer 7

It seems as though many confuse modal window with a layered panel. A dialog box can be a modal window and a pop-up is a modal window. A layered panel is not a window, but has the appearance of a pop-up or dialog box. It is modal in the sense that the underlying layers are unavailable. Modal window are popular on web sites because they are immune to pop-up blockers.

Modal windows were designed to obtain information or user action that the underlying application requires to continue. Non-modal windows allow the user to switch back and forth between the window and the underlying application. A good use for a non-modal window might be screen help or a tutorial, where the user needs a reference tool and access to the underlying application.

IMHO, modal windows were designed for a narrow specific purpose and are used inappropriately a lot of the time now. Just because you can do something doesn't mean you should!:-)