Blog

User Notifications with Vaadin

By  
Sami Ekblad
·
On Aug 25, 2009 11:20:00 AM
·

A few years ago there were discussions about modal monologue boxes in applications and how bad they are.

Monolog boxes are the similar dialogs JavaScript's window.alert(message) produces; a modal dialog that user has to click on in order to go on with his/her workflow. This is really an inhumane interuption.

The better alternative presented was "transparent self-dissapearing messages" (later known also as "the humanized messages"). We considered them as a very intuitive and generic-enough feature, and that they should be part of the Vaadin library.

 

And true, the "humanized messages" are nice - both for end-users as well as developers. For end-user they solve the issue of unnecessary interaction if something in the application is told to them, but does not really need any action. For you (as a developer) it gives a rather low-cost technique to make applications more informative. With notifications you can give the users feedback without sacrificing the overall usability of the application.

There are numerous scenarios for when to take advantage of notifications. Giving information about incoming messages, more detailled instructions for filling a Form and reporting different types of validation errors. Also informing that some longer process is finished might be useful information, but does not require any input from the user. And so on.

So, how to use them then? In Vaadin the notifications are integrated as a part of the Window class.

It is implemented as an inner class and you can create a new instances of them using the Window
instance reference. However, the simplest way of using them is just to call the showNotification("a String goes here"):

// Create an user interaction point (i.e. Button)
Button b = new Button("Do something", new Button.ClickListener() {
public void buttonClick(Button.ClickEvent event) {
 // Here we would actually do something useful.
 getWindow().showNotification("I HAZ NOTIFICATZ UR DISPLAI!!111");
}
});

// Show the button
myLayout.addComponent(b);


This results a notification like this to appear to the user. The notification automatically fades away when the mouse is moved or a keyboard key is pressed.

There are also other overloaded methods that help you get more control over what kind of notification is actually shown. For example you can include a separate description and control the the level of the notification: TYPE_HUMANIZED_MESSAGE, TYPE_WARNING_MESSAGE, TYPE_ERROR_MESSAGE and even TYPE_TRAY_NOTIFICATION that creates a tray-like notification in the corner of the browser window. And for those who want even more control over the notifications style and behavior can implement their own sub-classes of the Window.Notification class.

Just remember the basic rule that comes along with all the good-stuff in real life: Don't overuse the notifications either. It is tempting to put them everywhere - but users don't have to be told about everything happening... 

 This kind of unnecessary information just confuses people and should be avoided. Here is another rule of thumb: if the application somehow otherwise visually informs the user that the desirided operation was succesfully made, typically no extra notification is needed. It would just be duplicate information. These aside, there are many scenarios where user notifications are a nice way of delivering information. Feel free to use them.

UPDATE: A small sample application is running at http://uilder.virtuallypreinstalled.com/run/notification_demo/ . Just click the 'save' button to see how different notification styles work.

Sami Ekblad
Sami Ekblad is one of the original members of the Vaadin team. He is now working as a framework advocate, and you can find many add-ons and code samples to help you get started with Vaadin. Follow at – @samiekblad
Other posts by Sami Ekblad