Saturday, February 18, 2006

The modal message box is pure evil.

If you don't know what I am talking about, the modal message box a little window that many applications popup that looks like this under windows:









Macs have 'em too.

Messageboxes are a basic Windows operating system feature, ever since the oldest versions. Basically, they're very easy for programmers to show, so programmers abuse them instead of using better UI elements.

They have an evil cousin, the modal dialog, which is rarely better.

Here is why modal message boxes are probably the worse UI element ever invented.
  1. The user has to act immediately. They may have to grab the mouse, and click a button or remember some keyboard shortcuts. This distracts the user from whatever work they may have actually had to do. Anything that stops the user from doing work is bad.
  2. When a user sees to many of the same message ("Are you sure you want to continue?"), they start answering them by rote. Ever catch yourself saying: "Crap! I just clicked YES on that messagebox, but it was different from the 20 previous boxes and I didn't read it."
  3. You can't cut and paste the message to send it to someone.
  4. Sometimes they come up behind an app. That always sucks. You can't continue until you find them. This is usually a programming error, but it still is a pain for users.
  5. The help button, when (rarely) implemented, is hardly every useful.
  6. The text in the message is usually formatted terribly. Come on! It's 2006, and there is no control over fonts or boldness or including hyperlinks. NOTE: Even if your custom messagebox has these features, I'd still avoid using it. More later.
  7. Sometimes these little devils are shown in a program loop, and you spend a lot of time closing them all.
  8. Often you'll see a yes/no question like "Are you sure you want to continue", with the options of OK or CANCEL. Please kill me.
  9. If multiple messages occur (happens all the time), the user has to remember them all. There is no history.
  10. These gnarly message boxes rarely remember what you did before. I catch myself thinking, "I've clicked YES 20 times, when is the computer going to catch on." Sometimes, you'll see a fancy one with a little checkbox that says "Always click yes." -- another non-custom hack that is better avoided without messageboxes.
  11. They don't match the UI skinning of the app and are ugly. One of my favorite examples is the new WINDOWS VISTA install. You put in the CD and you get this super fancy graphical install with neat colors and stuff. When an error occurs, poof: An ugly old gray message box.
  12. I love the ones with only an OK button, that don't accept ESC to close. They're uncommon, but exceptionally annoying.

One great example is the FIND dialog in Internet Explorer. When you want to find something on a page, it pops up and you see:








Not so bad, you think, but here are the problems with it:
  • You can't cut/paste to it from the web page, if you want to select some text to find after you show the dialog
  • It doesn't remember your last search, much less your history.
  • It's ugly.
  • It covers up the page your trying to search.
Compare this to the FIND feature in firefox. If you think about it, the majority of the problems with the IE dialog are not related to the coolness of FIREFOX find -- they're caused because a modal dialog is used. And worse, because the developers were lazy and tried to use a reusable modal dialog.

But Firefox doesn't always beat IE. It's fixed now, but many versions of firefox would show a messagebox that said something like "Cannot find server." After TYPING a url, you now have to grab the mouse and click OK. Or figure out if ENTER or ESC works. Lame. IE on the other hand would show you a web page (it IS a web browser) with the error info.

Well, how can you avoid messagebox and other modal dialogs in your designs?? It's hard but it can be done. Here are some tips

  1. Think LONG and HARD every time you're about to show a modal dialog or message box. Just say NO, if possible. Try to think of other apps and how they do it. Take a look at a MAC.
  2. For error messages, pretend you're making a web page instead of an app. In a web page, you'd stick little red exclamation icons next to the illegal fields. Maybe an error message in at the top or bottom of the page.
  3. Try not to interrupt long running processes with message boxes (Windows installs LOVE to do this). Often, this indicates that you didn't ask all the questions you needed ahead of time. Or, maybe, your app can just report all the errors (in a cut/pastable list for tech support) at the end of process in the main application window.
  4. Try to show progress information and errors information in the main page. On color-highlighted status bar, for example.
MessageBoxes really are terrible UI elements. MS would do us all a favor my removing support for them in a future version of Windows. I hear you: "Oh no! That would break my app." Well, your app needs fixing.

1 comment:

Jorge Monasterio said...

There is supposedly one case when a MessageBox is really useful. Under very low memory conditions, when windows is failing anyway, the spec say the message box will display a message. So, maybe as a final fallback, when no other way of showing a message works...