Web Notifications
Notifications
Layout
- See below two variations for responsive mobile and larger screens. Note that the notification panel for responsive mobile runs full-width.
- Notifications are filter by two types.
All
andTags
only - previous filter types can be omitted.
Links
- General notification display (Large / Medium) - Sketch Cloud
- General notifications display (Small) - Sketch Cloud
Reduce post previews
Where there are multiple notifications in succession relating to the same post, only the most recent/top-most should display the post preview. In all other instances, the post preview should be suppressed, as illustrated in the below link. Note the larger borders for such cases, as to visually group the like notifications together.
- Reduced post preview designs - Sketch Cloud
Post related notifications
When a user receives a notification relating to a post, e.g. ‘your post received an up-vote’ , or ‘James commented on your post’ , clicking on the notification should link through to the dedicated post page. Where it is a comment notification, the notification should be deep linked.
The above simplifies the notification process, where all post insights can be access from the post page, as opposed to within the notification menu.
- Dedicated post view: https://www.sketch.com/s/0e2af34e-d059-44c2-8e50-6ed1e341ba3f/a/zxq7z4l
- Up-votes/down-votes/reminds modal: https://www.sketch.com/s/0e2af34e-d059-44c2-8e50-6ed1e341ba3f/a/ZOdMvEv
- Quoted-posts view: https://www.sketch.com/s/0e2af34e-d059-44c2-8e50-6ed1e341ba3f/a/Gm8xrWY
New notifications
- As new notifications land when the panel is open, indicate to the user that there are
x new notifications
as shown here -> https://www.sketch.com/s/0e2af34e-d059-44c2-8e50-6ed1e341ba3f/a/KvEED1y
General notification types:
- Common post interactions: Sketch Cloud
- Comments & tags: Sketch Cloud
- Channel interactions: Sketch Cloud
- Wallet & earnings: Sketch Cloud
- Other: Sketch Cloud
Displaying multiple subscriptions
- Where the user wishes to view multiple subscriptions, they may simply click on the notification, which then launches the following modal (https://www.sketch.com/s/0e2af34e-d059-44c2-8e50-6ed1e341ba3f/a/xr2gRPm) - Note, same modal used when surfacing up-votes etc on a particular post.
Email notifications
For reference, the unseen email notification email may be accessed here -> #4790
Review
-
The total width of the notification dropdown should be 500px wide. Currently coming in at around 450px wide. -
Change Mentions
to tags -
The All/Tags tabs should span full width - having no padding -
The text seems a little soft, in particular the medium type. Could we apply text-rendering: geometricPrecision
on the notification dropdown to clean up the text. -
Responsive mobile issue: Should span the full width of the screen as shown here -> Sketch Cloud -
Background colour should be #1E242A
- primary highlight -
Missing drop shadow around the notifications panels. -
Small ask. Would be good if we could add the unseen notification count to the page title. e.g. (7) Minds
- when 0, just revert toMinds