Improve display of error messages

[juliusknorr]

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

[skjnldsv]

We should definitely push something like that someday yes :)

[MorrisJobke]

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]

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.

Making them more appealing also results in more usage, or am I wrong?

Yes, I think so too.

The more permanent stuff should go into real notifications (behind the bell icon) and the others should be inlined and properly highlighted.

Yup! Much better to spend time on that instead.

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.

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]

These are the problems I see with the placement/current approach:

• They are are not dismissable if OC.Notification.show is used
• They block the main navigation UI on small devices
• It is actually hard to recognize them (they are small and not very prominent)

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.

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.

The more permanent stuff should go into real notifications (behind the bell icon) and the others should be inlined and properly highlighted.

Yup! Much better to spend time on that instead.

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:

• File errors (moving/uploading/deleting failed)
• Problem loading page, reloading in %n second
• Connection to server lost

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.

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]

i once opened a similar issue which might be related (?): owncloud/core#17109

[skjnldsv]

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.

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]

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]

The question is if this just moves the problem of overlaying things, cause then it would be app content.

It still makes them a more acessible, also on small screens, especially when there are more then one notification.

Could be fixed by making every notification dismissable?

Yes, that should be done in the same run then.

[wiswedel]

As a simple but effective noticeability-improvement I suggest to CSS a ❗ before the text:

[MorrisJobke]

As a simple but effective noticeability-improvement I suggest to CSS a ❗ before the text:

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]

sometimes it's not used as error

but errors are identified as such in the code (.type-error), so they can be addressed properly