01 August 2009
Modal windows are bad, ok?
It’s interesting how the web interfaces, now that the web is actually becoming a platform for real applications, are doing some of the same exact mistakes that desktop interfaces have done in the past years (well, in all fairness, some are still doing). I’m guessing one of the reasons for this is that the visual designers (who usually do the designs for web sites) usually don’t have user interface background, thus making the same mistakes. Another factor could be the introduction of AJAX, which brought the possibility of cool interfaces, which as an idea is good but often is quite hard to pull off without proper knowledge of the interface design.
Why Modal Windows are bad?
Modal windows (Modal Window – Wikipedia) by themselves aren’t bad inherently but they have only a specific use in the user interfaces, and it is this specific use that it’s usually neglected in these new breed of web interfaces: Modal windows are designed to stop workflow and to force the user to pay attention to specific information and/or task. Good example of this would be an alert of some sort, that is so crucial that the user simply has to pay attention to it, before doing anything else, thus restricting access to the rest of the interface.
An example of modal window would be Digg.com’s login window (even though it’s not actually a true modal window, see below):
In this case, there are another problems: The login window doesn’t fade the background away (with darker overlay, for example) and the background of the window is practically even the same color as the page underneath, thus making it harder to perceive than necessary. What’s more is that the window in question acts like a normal page element, moving with the page when scrolling, thus not coping with the rules of window behavior.
Ok, then what?
The AJAX era has also introduced another nifty feature, of which modal windows kinda also represent: interfaces on demand, meaning of such user interface elements that appear only when needed. The major difference between modal windows and interfaces on demand is that the latter doesn’t force the user to anything to drop everything else and/or distracting the user. Good example of UI on demand would be the new interface of Adobe Lightroom:
When crop tool is selected, the adjustment panels slide down a bit to make room for options panel for the crop tool, and once the cropping is done the panel slides back up. (although, I’m not so sure if the user elements in question are prominent enough for the user to realize immediately)
Using the principles of UI on demand I created a quick mockup for Digg.com login feature (imagine, if you will, the content sliding down making space for the login panel, which would slide to view from the top) :
This kind of design doesn’t force the user to drop everything just for one task. However, it also could be noted that the login task is not the perfect example, as there are situations when login is an modal task, it was however the task that gave me the inspiration for the mockup.
But what if..?
The diversity of internet sites is however so immense that, of course these rules can’t be applied to every situation, and thus there are situations where the interface on demand just doesn’t work. A good example of this could be quite a common feature that even this site uses; Lightbox, for giving the user an possibility to view the pictures within the content in bigger size. But again, one must be careful with it: The proper use for it is not for things like picture galleries, rather than for the situations where it’s not just feasible to show the full size picture within the content. For simple image galleries, there are better, more usable, ways.
[...] Modal windows are bad, ok? | Mint Usability [...]
This is inspiring I think I will start a blog myself one day in italian of course. Great post, grazie.