Location of Flash / Growl notifications or messages in a Web application

We might want to distinguish several types of messages that have been confused here:

  1. reaction messages in response to the actions of the user, e.g. "saved form"
  2. unprovoked events, for example "new e-mail", "expired license", etc.
  3. system status, for example "inactive", "processing", "process completed", etc.

Each of them has its own conditions and optimal solutions.

1. Feedback messages

Often, you want to inform the user of the results of a given task, she explicitly asked the system to proceed with a preform. Then you will want to notify with an explicit return message, preferably by showing it near the place where the user has requested the task. For example, if the user clicked on "Save", it would be good to display a "saved form" return message next to or under the button, because the attention of the user is "saved". user is close to this button (assuming the backup is fast). This would be the case of a Web application responding to the click of a "Save" button, or a successful login process (see example below, thanks to Matthew Moore) .

Gmail Comments

2. Non-provoked events

The second type concerns event notifications that have not been caused by the user or the system. The most important case is "you have a new message in the inbox", but it includes other types of events, such as new software updates or hardware events (for example, "uncharged battery"). If you believe that it is important enough to attract the attention of the user, you will present a new item on the screen. Facebook has its notifications pop-up at the bottom left. Windows and Outlook place them at the bottom right. I do not know why, but these bubbles are more noticeable on the bottom (perhaps because this area is less interesting and out of reach, so any change is immediately noticeable).

enter the description of the image here

3. System status

Often, the system is built to stay in one state or another. For example, "inactive" or "treatment".
It is recommended to indicate on the screen a fixed indicator indicating the current status. In the case of saving a document, Google Docs is a good example. The header indicates "Recorded Document" (see screen capture below). When you type something, it goes to "save …", letting you know that this state has entered that particular state. It is not necessary to add an intrusive message in a new screen element after each keystroke. The user has not specifically asked to back up, it's just the system allowing him to understand in what state he is currently located.

Google Docs System Status

Another good example is Outlook, which tells you when it is "online" and connected to the Exchange server. So you know that emails arrive immediately and do not require sending / receiving periodically. Again, as Outlook automatically connects to the server without the user requesting it, it would make no sense to say so in a new message. Just let the indicator communicate the current status.

No matter where these status indicators are, to the extent that they have a fixed place. Google has placed them at the top and Microsoft has long had a tradition of placing them at the bottom, in an element called "status bar".

enter the description of the image here

To conclude, the place of your message depends greatly on the type of message and its dynamics. For more details, I strongly advise you to read the complete and complete guide on messages from Microsoft. Personally, it made a lot of sense and I learned a lot.