My blue unread dots seem a little zig-zaggy, and are causing the descriptions to be truncated quite early.
Maybe we don’t need the dots at all now that read notifications are “greyed out”?
6 Likes
The truncation is due to truncating at “word break” which I think is better for readability.
The ragged / zig-zag dots are what we do in topic lists and sidebar. Based on feedback I went this direction but personally prefer if they were all to the right-most zone.
Hmm that is interesting.
At the moment we are now kind of merging and mimicking two patterns in our UI.
In the sidebar for unreads:
blue dot
In the topic list for unreads:
blue dot, and primary color for text
2 Likes
Maybe the dot with the notification type icon is similar enough that we don’t need another one on the right? (would it work with the lighter tertiary color to match?)
I am missing the second line for the title, 3 words is so short!
4 Likes
Yes I kind of now am seeing that the icon w/ bg color sort of acts as a “blue” dot notification.
Hmm… I am not sure of this. With the icon there the contrast is iffy. We could always change the icon color too though.
I think we’ve had enough feedback that people prefer more words than truncation. I’ll take that out.
3 Likes
May we please have back some indication of which notifications have already been viewed/dismissed and which are new? I’m not seeing any difference at the moment.
2 Likes
I do wonder about emulating Gmail mobile app styling? It’s such an established paradigm
(Bold vs thin)
Also Apple mobile mail is interesting, dot on left which you originally suggested
2 Likes
That is a little nicer.
The goal is to mimic the topic list, but inherently we might need more differentiation due to such a compact & dense list of items here. I dont think straying slightly further from the norm of sidebar/topic list would be a bad thing.
Since I only had new items in my notifications drop-down and didn’t see any markings that looked different, I did not noticed the depressing-gray icons on the already-read items until I looked at the full page notifications.
I liked the “sea of blue” when I had unread items, never even once thought “wow that’s too much color staring at me.” It was just easy to see that things needed my attention and/or someone actually wanted to talk to me.
4 Likes
This is great feedback. With a sea of blue, it is pretty clear that “hey, I need to clear all of this”.
With that removed, the conspicuousness of it is definitely lost. Maybe bringing back the dots is a good thing for that purpose alone.
2 Likes
For me, the difference between blue and gray is very small. This is perhaps partly due to the fact that the gray is darker because of the WCAG palette. I think I would prefer if the read notification was still a gray icon on white; then the difference is clearer.
So of course I see the color difference, but I find that if I only have read notifications, the read ones look like unread ones.
Also on https://meta.discourse.org/my/notifications I now see black icons on gray
When I click the envelope to see only notifications related to PMs, all messages look unread, even though they are all read.
4 Likes
I wanted to pop in this morning and let you all know this feedback is all very much appreciated. It’s been nice to go through the iterations together in such a short span with all of the ideas presented here.
It does feel that we need a bit stronger of an indication for unreads, so Im leaning toward the blue dot again.
oh yeah… this is not ideal. thanks!
Interesting… will take a look.
I really like the layout on the current iteration, it’s wraps all the relevant information in a compact item, and the overall list spacing still feels generous 
With respect to state, I don’t have a strong preference for the different options. But I think it would be great if it could be addressed more generally in a design exploration. There’s not a fully consistent system in place and rather than just looking for the right fit for the notification menu now, it could be great to have a wider exploration mapping state and context across the app and then applying it with variables.
For example, yes, the state (read/unread) is analogous to the topic list. But the context is different, and on similar context (other menu panels) a more subtle grey usually doesn’t indicate that state. Now it makes other menu items look a bit more as if they indicate some muted state as well. So I feel this could really profit from a more systematic mapping.
3 Likes
So at the moment, we really only have to different parts of Discourse using a “read/unread” styling state.
The other part in this menu is a “selected” state. This is to show the currently selected notification tab. In this iteration we are mimicking the selected state for sidebar items.
Here is a basic audit of the things we are looking at in the menu. Read, Unread, Selected
Sidebar
For sidebar, we just indicate “unread” with a dot. “Read” is assumed by default if no blue dot exists.
Side bar - active
Here is the currently selected sidebar item, aka active.
Topic List
For topic lists we currently show a blue dot && use color in the title & metadata to differentiate. One caveat is that we dont show the blue dot on topics you are not following/watching. So whether the blue dot appears or not is not immediately clear to the user.
Menus
We use selected as a state here to show active selection. I do not think this translates to notifications, but it does translate to the selected state of the menu notifications current tab.
There are inconsistencies at the moment of what color we use for selected.
For tracking, we use grey.
For currently selected category we use blue.
User Notifications page
This page needs some work in the current iteration.
2 Likes
I appreciate your work, as always, and I like that you are working specifically on this.
May I know the motivation for the padding on the corners of the buttons/sections?
I honestly don’t get it but I’m probably missing something.
That looks beautiful with no extra padding on rounded corners 
1 Like
I understand it, last update with no extra padding on the buttons looks better to me 
What are your thoughts on this subtle improvement?
It’s about removing the hover effect from the active button panel on the right side, while applying a subtle blend effect to the left panel.
This would help differentiate the panels from the buttons and prevent the interface from appearing overly saturated or ‘fully painted’ when there are active notifications and panel at the same time.
Maybe it’s because I’m so used to the white background for notifications I have already seen, but it does look a bit odd to have such large areas with grey background in a theme that otherwise does not use them.
1 Like