nextcloud-dialogs
nextcloud-dialogs copied to clipboard
Positioning of toast notifications
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
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
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:
- Do bottom-left as you said or
- 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?
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?
And for reference, it would look like this in Talk itself:
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 ;)
I disagree but it's not a hill I'm willing to die on, either would be an improvement for now.
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.