An alternative to alert/confirm/error dialogs?

Question

We all know that alerts are bad. If you didn't know it read this

Alerts are used to communicate with the user. So if we don't use them what is a good alternative?

I'd like to get a nice list of good alternatives to choose from when implementing something that requires user communications.

I'll give one myself as an example and for everyone to use:

Case: we need to validate user input before we can proceed.

Solution: instead of showing an alert box when user clicks ok/next/submit show a clearly styled (eg. red on a white bg) "frame" around/next to the user input that has the invalid input with an informative text on what is wrong. To make it easier on the user the input in question should gain focus and if necessary moved back into view.

Answer 1

Here’s the hierarchy for dealing with user errors or warnings, applied to validating user input to a field.

1. Remove the element that may result in an error. Do you really need the user’s birth date? Can you get by just as well with something else that won’t require validation, such as option buttons for “Under 18 years old,” and “18 or over”?

2. Prevent the error. Make it impossible to enter invalid input in the first place. For example, use a dropdown list, or “picture” the field, refusing any unacceptable characters (e.g., letters for a phone number).

3. Accept the input and possibly correct it automatically and echoing the result back to the user. Make something out of the input. If the user types 4--14#008 for a date, auto-correct it to be April 14 2008. If the format doesn’t match a version number, check if it’s a Release Number and lookup the corresponding Version number. If it doesn’t fit your idea of a valid address, well, just assume that it is (maybe it’s for a foreign country). Does it really matter if the user’s birth date mangled?

4. Provide Undo, not verification, showing clearly the implications of what the user did and providing a clear path to reverse it. When the user enters the number of stock shares to trade, show the dollar value beside it, in case the user confused shares with dollars. Keep the fields editable so the user can fix it.

5. Provide warning and error text in the primary window or web page itself; text should be apparent without being disorienting, non-modal, and disappear automatically when the error is corrected. When a unrecognized date is entered, underline it in red and put text beside it saying “unrecognized date,” perhaps including a Help link for more information.

6. Modal message box.

Answer 2

Many alert boxes, and all the ones that annoy me, are basically covering up shortcomings of the underlying program.

It usually boils down to i.s.o. providing proper undo support, an "Are you sure?" alert box is thrown in.

In short, make everything as forgiving (undoable) as possible, an most of the alert boxes you wanted to add won't be needed anymore.

Answer 3

I think the most important thing is to have useful messages in plain (layman-readable) language. "Do you want to tech the tech tech" is not helpful.

Also, make your messages match the style of the rest of the application, and look different from every other box that impedes the user's productivity. This goes against the usual rule of making your application look familiar to the user, but if you want them to read the message, it has to look different.

If you can avoid using a modal dialog box, do so. This will make the times that you need to use one seem more important.

Always bring focus to the item that needs attention, when appropriate. For example, if you are doing some sort of field validation, give focus to the offending field.