Notifications design adjustment

[jancborchardt]

The current notifications design could do with some improvements

• Avatars and action icons are fighting for attention
• Big action icons don’t look so nice and are very abstract
• The subject text is misaligned due to the avatar being inside the text at the beginning

This is a quick mockup for a design adjustment:

• Avatars are bigger and the point of focus
• Actions are overlaid, smaller, white and with shadow (standard classes icon-white icon-shadow)
• Text is now flush left because no avatar is inside the text

What do you think @nextcloud/designers @nickvergessen?

[skjnldsv]

I really like it! :heart_eyes:

It still takes a bit too much height imho. Facebook have a nice ui on this (action button is on the far right):

[nickvergessen]

Well I think it's more important what happened, than who did it.

I'm fine with removing the avatar from the name, if that is what you want. But extracting a potential actor from the notification subject and reuse their avatar as an icon is really a bad idea.

Not all notifications have an "actor". E.g. system notifications (occ notification:generate), update notifications, first-run-wizard notifications, etc.

[nickvergessen]

But yeah the misalignment should be fixed. It's caused by https://github.com/nextcloud/notifications/blob/e8eea16946a2bcb4aa94b785cdb2120c0cdf3f55/css/styles.scss#L162

Because otherwise the avatars dont have any space when they are in the middle of the sentence.

[pixelipo]

It looks really nice, but I have to agree with @nickvergessen

It very much depends on the context (and the app that send notification) which is more important - person or action/app; for Talk, actor is probably more important, but for Calendar, Tasks, Deck, Admin - it's the action. For Files it's about 50-50 :smile: to complicate things further.

Lastly, I think we should add shadow only for "popover" (floating?) items, such as modals, always-on-top menu icons, sticky headers etc. and try to avoid using them to solve other design problems.

[jancborchardt]

Lastly, I think we should add shadow only for "popover" (floating?) items, such as modals, always-on-top menu icons, sticky headers etc. and try to avoid using them to solve other design problems.

Good point, we can adjust it by displaying the dark action icon and maybe considering the layout that @skjnldsv posted. That would also move the time to a more fitting spot.

I'm fine with removing the avatar from the name, if that is what you want. But extracting a potential actor from the notification subject and reuse their avatar as an icon is really a bad idea.

@nickvergessen The avatar should stay there of course, that’s not what I want. ;) I don’t think it’s a bad idea, and @skjnldsv’s screenshot from Facebook shows that it’s commonly done.

Not all notifications have an "actor". E.g. system notifications (occ notification:generate), update notifications, first-run-wizard notifications, etc.

@nickvergessen Then for those notifications we still show the action icons. We simply have 2 different designs:

• When there is an "actor", we use the design I posted above, with slight modifications (like not overlapping the action icons, but showing them in dark somewhere next to the text.
• When there is no actor, simply use the action/app icon as a main image.

[skjnldsv]

If no avatar let just use the app icon then. And that's it 🤗

[bartscheerlinck]

Hi, would it be possible to somehow make the notifications more clear? Several of my users are requesting some sort of pop-up window that appears as soon as a new announcement is made. Apparently, the little red dot doesn't seem to cut it for them.