Picture yourself on a beautiful beach on a warm day. The sounds of the waves is music to your hears. You're on a comfortable chair with a laptop on your knees connected via an incredible WiFi. You're using a brand new web2.0 application that must be the gratest web site on the web. Then, you see an infamous alert from javascript…

Back to reality

This alert box from javascript brought you back to reality. You're in your shitty room, alone. The smell is disgusting. Everything is dirty. All because a developer has used the alert function to tell you something in an application. Don't let this happen on your web application. Never, ever, ever use an alert box.

History of the alert

The alert was invented in the web1.0 era when it was the only way of showing a dynamic message to a user. That was the time when people loved win32 applications because they were so easy to use (compared to a web application). To have a little bit of win32 in their web world, they (some bad people) created a monster : the alert function that shows a win32 window.

It was it a big mistake because lazy developers still use it because it is so easy. Don't fall in the trap. Do not use the alert function.

The problem with alert

The user have to click on the message before he can do anything else on the page. Users hate to click. Don't make them click and show an unobtrusive message that the user doesn't have to click to continue.

What should I use instead of alert?

Anything else. This includes (but is not limited to)

Light boxes I personnally don't like light boxes but they have the momentum at this moment. There are hundreds of library that can help you with them so don't implement another one and re-use an existing one please… Contextual messages Why not show a message where it happened. A little knowledge of DHTML and you're ready.

Example. On Ecstatik! (a project on which I worked), when there's an error with the ajax vote, the label “I laughed!” is changed to “error!” written in red. Maybe it's not the idea of the century but it works and it tells you where the error is. Fading in/out messages These ones are more difficult to do but Google and Wordpress do it elegantly. Use a library with a fading in/out function and show a message at the top of the page (or anywhere visible by the user). The user will get used to see messages at this place and will like the fact that they don't have to click.

Note I expect a lot of people to tell me that I use them in almost all my examples. These are examples and I don't want to begin to write DHTML just to show the result of bunch of javascript lines.