Positioning of toast notifications

[kra-mo]

The top right is quite an unfortunate place for toasts as it is not at the center of the user's attention and can often cover UI. It's also the same place notifications are, which toasts are not. This could lead to additional confusion.

The bottom center is a more common position across apps and would probably work in our case as well.

@nextcloud-libraries/designers this was discussed in the past, but we never followed up on it.

PS: Unsure in which repo they were, when I looked up nextcloud toast, this was the first result :D

[nimishavijay]

I would vote for bottom-left or bottom-right purely because of Talk, as often there is a "Nextcloud Talk was updated, please refresh" message which would cover the input field which is the most important part of the UI

[kra-mo]

Which is fair, yeah. Ideally, you'd want developers to define a safe area, but I think we all agreed that top-right is pretty bad so before implementing that (if we ever do), we should still reposition it.

Bottom-right would cover more important stuff (eg. Leave call) so I'd either:

1. Do bottom-left as you said or
2. Do bottom-center and inset toasts by the height of bottom toolbars. I feel like this would be the better solution when there is a bottom toolbar, but it might look weird when there is none. Let's try it maybe?

[kra-mo]

I moved the toast up so that it doesn't cover the input field in Talk, and this is how that would look like in Files, an app which doesn't have anything on the bottom:

For reference, bottom-left:

I prefer bottom-center like this still, and then the issue of it covering controls wouldn't be there. Insetting it would be nicer for dialogs as well I think.

@nimishavijay what do you think?

[kra-mo]

And for reference, it would look like this in Talk itself:

[jancborchardt]

Very nice! :) For the record and as talked about with @kra-mo, for now I prefer the bottom-left position as it works better in almost all cases, e.g.:

• 3-column-layout in Mail and Contacts
• Bottom left is usually soft-reserved by the "Settings" button which is ok to temporarily overlay
• The one case where it overlays something crucial is in Talk in a chat when the left navigation is collapsed, but that’s not as bad as when the center aligned one would overlap call participants or messages (in my opinion at least ;)

[kra-mo]

I disagree but it's not a hill I'm willing to die on, either would be an improvement for now.

[jancborchardt]

Brought it up in the engineering leads call, and the current position was not seen as a problem at all. Some points:

• Notifications are important, so it’s fine if they overlap "important" controls, because at that point the notification is more important.
• Putting them on the bottom left would maybe fix the controls overlap issue, but not the "are not in the center of attention"
• It would instead be good to look into reducing the notifications in general and make them more useful, like also what we discussed, for example:
  • Instead of "Folder created successfully" just navigate into it and remove the notification
  • Instead of "You have new messages in chat" show a proper preview of the message with avatar, name etc that can be clicked
  • Instead of "[Name] raised their hand", figure out a better way to show it, e.g. by sorting, animating, making it actionable, etc.

[susnux]

Instead of "Folder created successfully" just navigate into it and remove the notification

This often really breaks the workflow, because not always you want to move to new created folders.
E.g. a common workflow is to create a list of new folders, this change would mean you have to return to the parent folder after every folder created.
It would be better to just highlight the newly created folder, just like file explorers do.

But I think the notification "spam" is a general problem we can not really always fix at the moment.
Because as a user you want to see that some action is in progress, otherwise you will ask yourself if it failed or something not working. But due to different reasons some actions take some time.
I think to reduce this amount of notifications we should move all the "action" related ones into a different location.

Currently "uploading" is handled in the uploader progress bar and not in a toast message.
Similar could be done with all of those "running" actions.

What I am thinking about is a new entry in e.g. the top menu bar which is basically a circular progressbar of all actions running, if you click on it you see a list of all those actions and their individual progress.
This would cleanup the main view and still have one well known place to lookup the current state as well as seeing the overall progress without need of opening the menu,

[skjnldsv]

@jancborchardt @kra-mo ave you decided a road to take here?
As we're dropping the lib here: #2324, we can move the notifications where we want. ALso maybe we can improve their visibility a bit ?

[kra-mo]

Awesome, also love the animations :)

…does anywhere mean we could make it so that app developers could define a safe area for toasts? That would be the ideal long-term solution. If yes, then we'll talk again about which corner/edge to anchor them to :)