Showing Notifications on the UI on main page of Website

Question

I want to show the notifications as response of every user action (e.g. configuration added in database, cant load data for selected conf. , server disconnected etc) on my website's main page.

What is the best place on the page to show the status messages (i.e. may be of the page or below the nav bar) and how it should be displayed as sometimes at a single point of time, more than 1 notifications can arrive on the UI. So if I place the latest notification on the status bar the older notification will not be shown which arrived with just milliseconds difference.

Also what is the best approach for status bar to hide, i.e. adding a close icon in status bar to manually close it or to apply timeout to close it after certain time.

Answer 1

It depends on if your intention is that the user read every notification. If that is a priority, then you could use fade-in/fade-out notifications that stack along the side of the screen:

^{download bmml source – Wireframes created with Balsamiq Mockups}

This could include close buttons on each notification (the button could be displayed on hover). These could fade out after a certain amount of time, and thus be dismissed.

However, if you want to save space and it's not as important for the user to read each notification (i.e. more "status" messages like at the bottom of a browser), you could use a status bar that quickly displays messages as long as they're relevant.

^{download bmml source}

A change in this status bar lets the user know that something has happened/is happening. These messages would dismiss as soon as they were no longer relevant—a "downloading" message would disappear when no longer downloading. This assumes that you only need to tell the user one thing at a time. If there are multiple important messages, the other method may work better.

Finally, I would not close the status bar. Instead, when no message is being displayed, let the user know that the website is ready for them to take action, with a message like "Ready...".