It feels much better when there are multiple notifications highlighted.
2 Likes
Yes, I think I like it along with Kris’ suggestion of avatar balance.
EDIT: For consitency sake, I used the same gap spacing we have for sidebar.
3 Likes
Stylistically: Personally I prefer the original boxy style vs rounded edges style, mostly due to personal preferences and consistency with how the other UI popup boxes have been shown (ex: compose). However, that’s mostly just aesthetic preference.
Functionally: More importantly though, in a situation with no highlights / all read notifications, the right button icons are not sufficiently differentiated IMO versus the left notification column. Especially in a situation with no highlighted notifications, it’s easy for the icons to feel too connected with the information on the left, giving a new user the impression the right icon is related to the left notification. This is due to a combination of three changes all removing this cue: 1) the button icons are now the same size / showing on the same lines (at least in original revision, not in recent screenshot), 2) there is no more differing background color for the column, 3) there is no more vertical line separating them. As #1 seems already resolved then maybe that is enough, but I’m a bit unsure.
But even more challenging, this is also going to be more confusing for account access and cueing to the user that account setting is also via this menu, since the behavior of the bottom account button shows completely different things versus the rest of the notification buttons. (More generally, it’s super weird to have account access and notification in the same header dropdown, instead of two separate ones. However, that may be a fair trade-off given the space savings/limitations on mobile devices).
TLDR of my post: I recommend the account icon has some special differentiation so people find it.
3 Likes
This reminds me: while it’s probably beyond the scope of this experiment, I think it would improve the Discourse UX if notifications moved out into their own menu (which could then have four horizontal tabs/sections for likes, replies, mentions and badges).
I feel this is also a pretty common pattern (e.g. on Youtube, Reddit, Twitter/Bluesky, etc., but also in other forum software like XenForo).
4 Likes
Definitely agree with you. You are right though, it is out of scope for this change. Splitting the user menu from the notification menu would be a great change for us to look into.
3 Likes
Yeah, been trying it on mobile this afternoon and the tap area feels quite small, especially for the tabs on the right.
4 Likes
This is what facebook do…
To me there are multiple aspects that make this a bit problematic: (which compounds on previous problems we had)
- Avatars are too small
- Sea of blue when you have unread - which is now compounded cause the tiny white line between notifications draws too much attention.
- Tiny highlight on the right hand side which is hard to click
I wonder if one path here is to junk the blue highlight and use the “blue dot” (which we already use on the sidebar) for new notifications.
Then we can make avatar a bit bigger and restore the right hand sides click target and highlight.
Not saying we go the full facebook here with HUGE avatars, but there may be a bit of a middle ground, giving up on the “see of blue” seems to me an unlocking factor here potentially.
4 Likes
For me, I like this change, but the font size is too small. In the notification menu it’s ~13px, and the main topic body font is 16px. You can see them close together here:
It makes the items a lot harder to read for me, a person with already terrible vision 
It would be nice if the fonts were the same size.
9 Likes
I’m not sure what I think of the big gap below the icons on the right… I think it’s overly large.
Also, I second the suggestion to increase the font size - it is a bit small, on mobile too.
3 Likes
Yeah I felt the same after a bit. It is now back to 16px. I am trying to mimic a lot of the spacing & sizing in the sidebar. Along with active & hover states.
Ive made these back to their original size.
I do think this is a good idea generally. It would bring us even closer to the sidebar states. I can make a pass at this.
Do you mind elaborating on how moving toward a blue dot helps us make the avatar larger?
Also increased this.
What are your thoughts of this? This was a very simple change, possible without any template / core edits aside from css.
Here it is with nav on top
2 Likes
These follow-up designs look cool!
If we’re going with nav on top, could we try it styled like our existing designs we use in horizontal-overflow-nav elsewhere in core.
1 Like
This looks very similar to the menu we had before the last update.
Don’t these already cause confusion for users on mobile? (For example, when people fail to find the admin button on user profiles). If the last icon was hidden like that, it will be very difficult to find, for example, the logout button.
4 Likes
Ah yes you’re right. I do think we should keep it with the nav on the right to avoid the overflow confusion.
I was actually meaning just imitating the design stylistically. I think we could still do that too while it’s on the right actually. Just so that we have a more clear division between the filters and the notification area.
Was thinking something like this:
5 Likes
Just throwing around, another idea is we could dim the read notifications:
A precedent we already have on the topic list
5 Likes
Circles position
I prefer (personally) notification circles on the right, I think it is worth trying out circles on the left first to see how people feel, maybe it will be natural and we all will like it.
Nav on top vs side
I far prefer nav on side, it is way easier to use and click. Plus huge room constraints.
Nav highlight
With the nav, I prefer to keep the “big blue highlight box” vs shrinking it like it is now, there is some weird psychology at play for me with the tiny nav boxes. It feels really hard to click, despite no mechanics changing.
My brain is oddly saying, got to hit the tiny tiny box to change nav.
My thinking is that when stuff is less visually busy, there is a bit more room for larger avatars. That said, I think the current size you have is OK.
Anyway feel free to scratch that feedback for now.
5 Likes
I still think we need to find a way to go edge-to-edge with the highlighted items to match our other menus, we do this almost everywhere now… I think the only remaining big exception is the sidebar
3 Likes
I do think that consistency is important, but the issue I am finding is that when there are loads of unreads… it feels like a sea of blue, with no delineation between the items.
With our menus, we do not show lots of items with an active highlight. Usually… I think it is only one, or even none.
Maybe if we move forward with the ragged blue dots, this would no longer matter.
3 Likes
I like the idea you presented here Keegan, thanks for sharing! I will try and incorporate some of this into the next iteration this morning.
2 Likes