I am kicking around the idea of putting in place a new design pattern for notifications. These notifications would contain important/very useful information for the user but I don't want to block the user from interacting with the site...so no modal popups. I want to do something like a toast (slide-down/up overlapping window) display but I am having trouble finding best practice information. Anyone know of any resource or having opinions of your own?

One of my main questions is where on the screen are they the most effective?


closed as too broad by DA01, Bart Gijssens, Evil Closet Monkey, JohnGB Aug 26 '15 at 15:02

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.


As @DAO1 said its a very broad question. First of all you need to decide importance of the notifications. Like are they need to be shown to the user without any delay or they are related to some tasks etc. If they are time critical message which needs to be shown right away on occuring some event then @KK's solution won't work as we don't have any assurance that whether user will check the notification or not.

In that case you can show a notification div on page somewhere (may be on left bottom like facebook does on every new notification) and apply a timout function on it so it gets fade and removed by itself after 4-5 seconds and adds the number of un-read notifications on the top bar somewhere.

Another solution may be you can add a notification bar on top having number of notifications and a short message on it with the 'X' button to close it. So whenever a new message arrives , a bar is added to the top of page (same like kibana UI) and user can either close it or can click on it for futher information. if you have multiple messages then you can also show the number of notification on the bar. it should look something like following


(2) server is down right now X


showing a message with (2) more pending notifications. When you close it , the other notification will be visible. Hope you can get some idea from these.


You can have a look the UI of the notifications here: https://almsaeedstudio.com/themes/AdminLTE/pages/examples/blank.html

enter image description here

You can implement this UI. It doesn't block the user interaction. And also it doesn't bother user too.

  • I have a notification system like this. The important thing is the notifications must automatically dismiss themselves somehow. If 10 notifications becomes 20, 30, 100, 1000 the users won't view them. – Craig Sep 16 '15 at 21:46

Not the answer you're looking for? Browse other questions tagged or ask your own question.