Monday, September 25th, 2006

Transparent Messages in JavaScript

Category: Usability

Aza Raskin over at Humanized recently posted a story about what he calls “transparent messages”:

As I’ve explained, modal monolog boxes are dangerous and inhumane. Luckily, there are many other methods of presenting information that are not modal. In particular there is one we are using in Enso, our upcoming product: transparent messages.

Transparent messages are the brainchild of Jef Raskin. It’s simply a large and translucent message that’s displayed over the contents of your screen. They fade away when the user takes any action (like typing or moving the mouse). In practice, the message is both noticeable yet unobtrusive. And because the message is transparent, you can see what’s beneath it. It’s just humane.

Aza’s story includes a video of this concept in action, and some JavaScript source code for including this effect in your own JavaScript applications. Sweet!

Transparent Messages in Action

Note: Aza will be presenting at The Ajax Experience in Boston Oct. 23-25, 2006.

Posted by Ben Galbraith at 12:06 pm

3.8 rating from 129 votes


Comments feed TrackBack URI

[…] Perhaps at SxSW, ppk can convince the new horde of Ajax developers to stop acting as if that they’ve invented the technology, all squeeky new. Per Ajaxian, the concept of ‘transparent’ messages from Humanized. […]

Pingback by Just Shelley » Stop re-inventing this wheel — September 25, 2006

Great!!! I love this idea. Even though I don’t use these kind of dialogs on my site.


Comment by Lautreamont — September 25, 2006

Great, another UI designer stumbling on the magic-vanish box. They invariably pop up while you’re typing, vanishing instantly and leaving you wondering what just happened.

Comment by Chris Purcell — September 25, 2006

Is there a way to pull up a history? My mouse gets bumped around as I move things around on the desk and I’d hate to miss something important.

Comment by Bob — September 25, 2006

Erm.. you can’t be serious. This is news? Position fixed, opacity 0.6, big ass font and you are done.. weee.. :p

Sorry, i dont wanna troll around, but this is so simple i refuse to believe that this is something no one ever heard about OR did before.. and secondly: not recognized that this is as bad as alert().

This can be good, but places i’ve seen it suffered on the implementation. Best is to avoid it cause it is simply _not_ unobstrusive. I would compare it to LayerAds.. Jump at you just the second you began to find your way in.

PS: Chris put it right… the reason i dumped this method ages ago.

Comment by K. Bublitz — September 25, 2006

K. Bublitz: The value adds of the message fading out and responding to mouse movement make it a little bit more complex than what you’ve said, and there’s at least one comment indicating that someone found the story useful… and, I think the point is that you don’t have to dismiss the dialog.

I actually use a similar technique for error messages in an application I’m working on. The difference for me is that a decoration persists that indicates where the error occured in the event the message is dismissed inadvertantly (in the event the button that caused the error can’t simply be pressed again).

Comment by Ben Galbraith — September 25, 2006

Yes, please don’t stop posting stories like this. Ajax in general is good, but when you combine it with cool “usability” techniques it’s invaluable. ..

Comment by Jesse Kuhnert — September 25, 2006

The Humanized Group is about thoughtful inferface design not ness. ajax powered. I support what they do.

Comment by Mario — September 25, 2006

I’m searching through the archives but I can’t find it. Still, I’m almost sure I saw something some time ago about using something similar, but in a stack/queue of boxes each of which dissappeared after a while (no mouse or key detection there). It was to be used for logging purposes.

Anyone remeber that? How about mixing both ideas a bit?

And also, a certain delay or a minimum amount of time after activation could be implemented to overcome what many have already pointed about messages fading out too soon.

Comment by Gonzalo — September 26, 2006

Tsk. I just found it when I had already given up. I was talking about protoGrowl, in case anyone wants to know.

Comment by Gonzalo — September 26, 2006

[…] Ajaxian linked to an article over at about transparent message boxes. I really like the idea, and it would be a snap to implement these in dojo, I will add this to my todo-list for the good old library. Dialog boxes are bad enough: they pop-up at inconvenient times, they derail our train of thought, and normally we don’t even read them. But this type of dialog box is worse. It’s not even a dialog box. It’s monolog box. There’s nothing one can do with this messages but click “OK”. Or wait and click “OK”. They have, as I’ve explained before, 0% efficiency. Beyond that, monolog boxes can have frightening consequences: because I often use two monitors, I’ve spent panicked seconds thinking I’d lost my work due to a crash… only to discover later that a monolog box had appeared on the other screen and stopped Word from operating normally. Even with a single monitor, you can miss the dialog box, and you’ll have a similar scare. Bookmark to:          […]

Pingback by Humanized messages » Good Old Tech » Blog Archive — September 26, 2006

[…] (via Ajaxian) […]

Pingback by » Transparente Nachrichten/Message Boxes — September 26, 2006

I too use a technique similar to this on an app that I’m building. The difference in my app is that I show the alert right above the area of interest for the user, not at the top of the screen away from where the user might be looking.
I like the idea of presenting feedback to the user while not locking down the entire system until they respond to the message.

Comment by Josh Gormley — September 26, 2006

I think it is a good idea worth experimenting. Personally, I absolutely hate clicking on the “monolog” dialog boxes because it disturbs my train (or flow) of thought.

If the message was very important, we **probably** wouldn’t use the disappearing message box. Aza did mention “logs” or history to persist messages.

Personally, I like articles like this because it meshes together usability and the technology. Besides, any tribute to Jef Raskin is awesome!

Keep it coming!

Comment by Oliver Tse — September 26, 2006

Leave a comment

You must be logged in to post a comment.