Toaster messages in web interface

Question

I am thinking of adding toaster messages as a feedback in an Ecommerce website for small actions, so far I couldn't find an example for using toaster messages in web only for mobile app, and one example from MailChimp

Would be great if you can provide some examples

Thanks

Answer 1

As Toast messages are totally based on activity either created(displayed) by users action or background action/processes. It is best practice to show/display them in a way that users eyes do not have to roll all over the screen.

The Best Locations:

• Top-Right : Created usually because of users action.
• Top-Center : Created usually because of users action.
• Bottom Right : Created usually because of background processes/activity, advertising, chat pop-ups.
• Anywhere else - Less recommended, as we are just talking due to users action.

Above discussed locations are ordered based on priority from high to low

There are few among many examples i would like to share and are really worth.

• Materialize CSS & Bootstrap-Based-Toast- Top-Right
• http://muvr.in - Top-Center (my favorite)
• Metro Style with Image - Bottom-Right

For more check here

Hope! You get what you were looking for.

Answer 2

You can find good feedback messages from here: http://codeseven.github.io/toastr/demo.html

Otherwise I can suggest Alerts from Bootstrap: http://getbootstrap.com/components/#alerts