Repository navigation
Improve display of error messages #13423
Description
We still have quite a lot of error messages, that are using the javascript OC.Notification methods to notify the user about a failure.
The ideal solution would be to move the error messages to the actual element where the error happened, so that we have a nice inline feedback. Unfortunately we currently have around 370 usages of the OC.Notification method (including in the apps in my dev environment), so migrating all is not something that will be done quickly.
Therefore I would propose to make the notifications a bit more prominent (and move them out of the header). We could use toast notifications in the lower right. Yes, those are probably blocking the UI for the user, but in general we use those messages if something bad happened, like a request didn't run successfully. In that case it is fine imo to notify the user a bit more prominent. The current notifications can be pretty easily overlooked.
This is what toast notifications might look like, of course we need to adjust them to fit nicely into our design:
What do you think @nextcloud/designers
Activity
skjnldsv commentedon Jan 8, 2019
We should definitely push something like that someday yes :)
MorrisJobke commentedon Jan 8, 2019
Making them more appealing also results in more usage, or am I wrong? The ultimate goal should be to move as much over first. In general I like this, but we should get rid of them. The more permanent stuff should go into real notifications (behind the bell icon) and the others should be inlined and properly highlighted.
jancborchardt commentedon Jan 9, 2019
Short version: I don’t really see the problem with the placement right now. We want to get rid of it and intermittently there’s no real reason to change placement which will just be around for 1 or a few releases. No need to waste resources on this.
Yes, I think so too.
Yup! Much better to spend time on that instead.
Moving them out of the header and to the lower right will actually make them less prominent. Nextcloud has most stuff on the top … the only thing on the bottom which comes to mind is the "Reply" button in Mail, which is also questionable.
juliusknorr commentedon Jan 9, 2019
These are the problems I see with the placement/current approach:
This has been on our list for quite some time, with very little progress, so I really think that making the notifications a bit more decent would be a good step forward with small effort.
Some notifications are not permanent and actually benefit from a toast like approach, since they happen asynchronously when the user might already have moved the corresponding element out of view (by scrolling or switching the view) or when there is no related UI element present:
That is right, probably positioning them at the top right ( just underneath the regular notifications icon) would make more sense.
Btw. do we have an issue about migrating to more inline error messages? We probably should provide some design patterns that could be used by app developers to do this.
stefan-niedermann commentedon Jan 18, 2019
i once opened a similar issue which might be related (?): owncloud/core#17109
skjnldsv commentedon Jan 25, 2019
Yes, there is no perfect answer here unless we have a all-in-one location (like the notification icon) that the user is used to check (though we really need to improve the design and the visibility of a new notification incoming, I think the red dot is not enough :)
jancborchardt commentedon Jan 25, 2019
I’m fine with simply moving the location of the notifications from "in the middle of the header" to "top right below the header".
The question is if this just moves the problem of overlaying things, cause then it would be app content. Could be fixed by making every notification dismissable?
juliusknorr commentedon Feb 1, 2019
It still makes them a more acessible, also on small screens, especially when there are more then one notification.
Yes, that should be done in the same run then.
wiswedel commentedon Feb 20, 2019
As a simple but effective noticeability-improvement I suggest to CSS a ❗ before the text:
MorrisJobke commentedon Feb 20, 2019
I don't see any big benefit from adding the emoji there. The problem here that it is shown at all there. Also sometimes it's not used as error, but as feedback that everything worked and then the exclamation mark is wrong.
wiswedel commentedon Feb 20, 2019
but errors are identified as such in the code (.type-error), so they can be addressed properly
juliusknorr commentedon Apr 16, 2019
I did a quick proof of concept for improved notifications in #15124 ... feedback is welcome.
szaimen commentedon May 21, 2021
I think this is already implemented/fixed. If not, feel free to reopen.