2

Our webapp uses toast notifications to inform the user about the results of their action. They are displayed in the bottom right corner.

The problem is that I use a big screen - 32 inch - and the notifications are almost unnoticeable unless I consciously focus on that area.

While on some views (password change) can straight up replace the form with success message, most of the time the user is meant to stay on the same page.

On another note while the app is responsive most actions are typically done on the user's PC/notebook.

How can this be improved?

I see three options as of now:

bottom center

Directly below the content which is fine for large screens but might block the contents on small screens. But that is an unlikely case because even in repetitive/batch entry cases actions are too slow to cause those notifications to stack.

top right

The sight is top heavy so moving those notifications to the top moves them closer to content.

bottom left

Directly below the menu - while possible as of now this could block the menu and there might be more entries in the future.

1

When you say 'toast' message I assume they are low priority feedback messages displayed on the screen immediately after users actions and disappear after 3-5 seconds.

The name can be confusing as some call it flag messages (Atlassian design system) and material design call it snackbar.

Anyway coming back to the point, To improve visibility you can place them on top centre with an option to dismiss (close button) and let them stay until user manually dismiss it. Or increase the time to 7-8 seconds than the standard 3-5 sec. run a usability test with your users and decide what works for them in terms of time and positioning of messages.

Usability: Corners are easiest for a mouse user to reach, but since its a toast message, it wouldn't require much user interaction, so I think its ok to place them on top centre for maximum visibility.

Accessibility Issues: If you place the message on the top right corner, there is a chance of screen magnifying users might miss it, I think it's better to place them on top centre if you want to make it inclusive.

Another suggestions is to categorise the messages that communicate system status based on the priority. If its high priority message it should be placed on top of the page like an alert banner rather than a toast so users get the required attention.

Some Examples:

Stack Exchange showing an alert banner on the top of the screen to inform the user of an important update

enter image description here


Mac OS toast message on top right corner - they disappear after few seconds

enter image description here

Stack Exchange toast message on top centre which disappear automatically after few seconds with an option to dismiss

enter image description here

  • Thank you for this good overview - it gives me information on where to look next, the most important thing. If there is no better answer in the next few days I will accept yours. – Jan Dorniak Sep 11 at 13:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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