Agreed that this is a much better alternative than the one in the OP. I don't quite see why the OP is getting so many upvotes when the UX really isn't very nice.
I think this depends on your use case. For the technically savvy, growl-style notifications are great. For a less technical audience, "more intrusive" notifications may be exactly what you need to make sure that the users actually see them.
I have to disagree that they are not suitable for the "non technically savvy".
Programs like ICQ, Zone Alarm, MSN Messenger, Yahoo Messenger, Skype, Windows Update, etc. have been doing bottom right "pop up, on top" notifications since Windows 95. Top right pop down isn't a very far removal from this.
I do agree that sometimes more intrusive notifications may be what you require, but don't think that the "top of page/app banner" is often the right use case. The best use case I can think of are control systems, where the screen starts turning red, with the main warning message at the top or the bottom. But this is done to allow the operator to see the entire screen to assess the state of the plant/system, with minimal screen estate taken away, and to allow immediate remedy (which of itself will probably remove the alarm condition, rather than the operator manually dismissing).
"I have to disagree that they are not suitable for the 'non technically savvy'."
I agree. That's why I said "may." It depends both on the nature of the notification, as well as on the sophistication of the user.
The sort of system you described sounds interesting. I'm trying to imagine how turning the whole web page reddish would work for common error/warning notifications. I've got a feeling that it wouldn't work well for the web, but it might be worth experimenting with.
Its a carbon copy of the Ubuntu notification system, (the regular notification which fades after timeout)
I think a system of notifications like this integrated into the chrome browser would be a real addition, as the popups now aren't all that nice to look at!
Don't make the same mistake as Twitter, putting status notifications above navigation or other crucial elements. Disabling functionality due to a temporary notice is not good design.
Then again, neither is pushing the entire page down for a notice at the top of the screen, and then moving everything after a couple of seconds just as the user is about to click on a button/link/whatever. It's amazing how many sites (and browsers!) currently do this particular stupid thing.
Yes, this 1000x over. I hate it when you have a huge DOM being pushed down by 20px for a notification, go to click on a button just as the notification is closing itself.
I much prefer the notification to come down from the top, have slight transparency to show covered elements, and then a way to easily close it. Very similar to the demo.
Very poor UX design then because there's nothing which indicates this would be the case, and no general understanding that clicking things makes them vanish.
I don't like it, also I'm pretty sure it isn't new. Stack Overflow has something similar, but it also pushes the page down as to not cover the topmost navigation.
Which can lead to misclicks since then you were trying to reach has simply moved. But, when you click a link from google, the message appears over the navigation for logged in users, so maybe they dropped that behavior?
I just updated the article and demo:
-Added CSS3 animation support for Mozilla 5+
-Fixed flickering the proper CSS3 animation
-CSS3 gradients syntax updated. Now, Safari also renders background stripes.
I found the animated stripes to impede the readability of the text. I agree the various notifications would be hard to separate for colour blind people. One could add some icons to indicate the type of message though.
Not bad, but I don't think I'd want to use something like this very frequently, as it's fairly intrusive. We typically use Pines Notifications for most of our work. Very flexible.
I personally have a strong dislike for the Ubuntu-style notifications that can't be dismissed by clicking a close button, which Pines appears to use. My position is this: this is my desktop, if I want the notification closed, let me close the notification!
Now, with that rant out of the way, thanks for the link to another useful web notification tool.
At least on Firefox 5 on Ubuntu 11.04, the initial Pines page displays an Ubuntu-style notification at the top right of the page which becomes mostly transparent when hovered. This notification does not display an X, with or without hovering. Perhaps Pines changes notification style based on the detected operating system?
The article says the animated background diagonal stripes are visible in WebKit-based browsers, but I'm not seeing them in Safari 5.0.5 -- just in case that's of interest to the devs and perhaps to other folks as well.
