Toasts on big screens - how to improve noticeability

by Jan Dorniak   Last Updated September 11, 2019 01:16 AM

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.

Answers 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

Sooraj MV
Sooraj MV
September 11, 2019 04:26 AM

Related Questions

Why we don't use wider interfaces on wide screens

Updated October 20, 2017 14:16 PM

Digital signage font size

Updated June 25, 2018 06:16 AM

Stack or use multiple notification toasts

Updated September 10, 2019 07:16 AM