Positioning of a Growl Message in a web application

Question

Following case exists:

User has got an web application. One part of the software is a kind of dashboard area where the user can organize all his different graph widgets (diagrams). He has different datas (e.g. CSV-files). These datas are separated columns (files) with integer, date or string values, etc. The user can drag&drop these files in the settings area (in drop zones) of the different diagrams. But some diagrams are not be able to interpret string values for example. In the moment of dragging of one file in the setting area (drop zones) happens a validation. The user gets a feedback via a small icon (forbidden or similar). The file is unable to be dropped by the user.

During that procedure the user needs additionally to get some different messages, which datas can be used, which can not be used. There will be no status message or dialogue. The Idea was to use a kind of growl message. The message fades in and fade out. An UI element which most of us know from Mac OSX and Skype (Black round rectangle with an opacity value). I would define that message as a kind of hint.

1. I am not sure about the positioning of that message. Do I have to place always that message on same area? (E.g. right hand on the top of the browser or on the bottom of the browser? - User could be confused with other growl messages of his system)
2. Or do I have to place the message above or below the current activated widget? Disadvantage, the position jumps and user could be confused. On the other side, the user knows which message is related to which diagram.
3. How often have to appear these messages? Every time while dropping files in diagrams (Information) or only if the user drags the wrong files in diagrams (Warning)
4. Do I should integrate a toggle function for these messages? (Show Hints/Don´t show hints)

May be somebody has made experiences for that cases. It would be very helpful. Let me know if you have any questions.

Answer 1

An indicator of some failure adjacent or at the point where the object failed would be a good start, and then you might lean on whatever position you have reserved for messaging, either in a temporary message flash wherever is typical of the web app (top or middle), or corners (growl style).

A slight indication at the location of the error can be as simple as a color change on the border or overlaying the container of the drop area.

Answer 2

For important information relate to a particular area I would suggest a popover message that gives the user additional context to the action they just preformed/looking to preform. User eyes normally follow there cursor, if something important happens with a recent user interaction displaying a message in a different location can confuse the user as they look to see what just happened.

For secondary information my group uses a home-grown growl notification system. This is information that the user might want to see and disappears on it own without the user having to leave there current task. Example:

Answer 3

If notifications is an integrated part of your system it does make sense to allow global notifications similar to growl.

For web forms it does make sense to have errors in-line. However since the notifications are about changes to the overall status of the application it will require less searching if the user knows of a consistent place that they will appear. Such as the top-right corner.

More important than placement, would be to make sure there is potentially an animated alert, that draws the users attention. If a notification doesn't require user input then you won't want to make it too visually distracting.

Top right corner is a good start.