All modal dialogs on the web must die
A recent discussion at work prompted me to tweet “All modal dialogs on the web must die.” I was frustrated and venting at the time. (Twitter is all too handy for that.)
In the article, Dmitry, the publisher of Web Designer Depot, recommended using “modal” windows in order to de-clutter and simplify your interfaces, comparing them to their alternative, popup windows.
So why would you use modal windows and how do they simplify your interface? Well, if you look at the alternative, their purpose becomes much clearer. The alternative to using something like a modal window is usually to load a new page.
I tried to clear up his inaccurate definition of “modal” in my first comment.
You’re using “modal” incorrectly. Modal means “prevent the user from doing anything until they interact with a dialog.” Modal dialogs are almost never necessary on the web, and encouraging them under the guise of simplicity is poor advice.
He appreciated my comment but questioned my reasoning, asking “Wouldn’t it make more sense to focus the user on the form they’ve just opened? I doubt they’ll want to continue working on the stuff below before at least closing the form, and the modal nature would prevent accidental clicks outside of it.”
His intention to focus the user was good, but one shouldn’t assume that people don’t want to click outside dialogs - or more importantly that popup dialogs are one of the best solutions.
It definitely makes sense to focus the user on the task they’re doing, but that doesn’t mean you should restrict them from interacting with things outside of their task - unless those things are destructive to the current task at hand. Notice that I didn’t say “dialog” in that sentence.
Instead of thinking in terms of a dialog, think about ways that you can maintain forward momentum in the application - while still keeping the focus of the user - without any sort of dialog, popup or prompt.
Taking your Action Method example again, consider the “+ Add New” button. When you click it, it show [sic] you a modeless dialog. (At least it’s not modal.) I would personally avoid a dialog completely. Instead, I would probably create a new action step at the top of the list with empty fields that the user can complete. Now this won’t accomplish exactly the same thing as a dialog. What if the user decides they don’t want to create a new action step? Instead of canceling a dialog, they would be deleting a blank action step. But given how rare this would be compared to how common creating a new action step would be, I believe it makes a lot of sense.
I’m not saying that doing it this way is easy or always possible. It requires a considerably more thoughtful interface. But it can be done, and when it creates a better experience for the user, it’s worth it.
There are a lot of web design blogs out there, and many of them explain interaction design principles incorrectly and make broad assumptions about why they should be applied. Designers who know better shouldn’t let this happen, and should at least attempt to enlighten the audience.
So must all modal dialogs on the web die? Probably not. As a fellow designer Dani Malik reminded me after I posted that tweet, “All blanket statements must die.” Nothing like a shot of your own medicine to set you straight.