Icon and Position & Badge/Counter

Marketo

• Header placement, uses ‘paper’ icon

• Counter as plaintext

Hubspot

• Header placement, uses ‘bell’ icon

• Counter with red badge and number

Facebook

• Header placement, uses ‘bell’ icon

• Counter with red badge and number

LinkedIn

• Header placement, uses ‘bell’ icon

• Counter with red badge and number

Twitter

• Sidebar placement, uses ‘bell’ icon and ‘Notifications’ title

• Counter with blue badge and number

Jira

• Header placement, uses ‘bell’ icon

• Counter with red badge and number

Trello

• Header placement, uses ‘bell’ icon

• No counter, entire icon turns red

• Icon position placed in header most of the time

  • Current ‘notification center’ implementation already in header

• ‘Bell’ icon used most of the time

  • ‘Bell’ icon currently used, seems to be the most common

• Counter most of the time contains number of new notifications

  • Good idea to give an indication of how many new things have happened without having to open the notification center

• Counter most of the time is red/orange

  • This would be a preferable change as the red colour implies importance, however header is already orange so until this is changed, notification badge will have to be blue colour

• Icon placement in sidebar

  • Would cause more friction as current notification center implementation is already in header and open action would be harder to facilitate if it doesn’t go directly to full page

Open Action

Marketo

• Full page dedicated to all notifications

Hubspot

• Opens with popout

Facebook

• Opens with popout

LinkedIn

• Full page dedicated to all notifications

Twitter

• Full page dedicated to all notifications

Jira

• Opens with popout

Trello

• Opens with popout

• Mix of opening in full page or opening initial popup

  • Popup has the benefit of having a ‘quick view’ into most recent popups, and can then have the option to ‘View all notifications' from a dedicated page

• Contents of notification items options:

  • Only show new notifications? Show every new notification vs show 10 newest notifications (then new notifications outside of top 10 can be found on full page)?

  • Show maximum notifications e.g. max of 10 in this panel, and show newest at the top?

Item Structure and Indicators

Marketo

• Table on left with basic briefing of subject and time

• Panel on right with more information on what the notification is and actions on notification

• New notifications are in bold, then once read they are normal font weird

Hubspot

• Icon shows type of notification at a glance

• Type subtitle above main subject of notification

• Time of receipt on right of notification

• New notifications have ‘dot’ on the right as well as coloured time of arrival

Facebook

• Photo and icon combination shows type of notification at a glance

• Sentence structure includes ‘who’ it’s for and ‘what’ the notification is about changes depending on type of notification

• Time of receipt on below of notification

• New notifications have ‘dot’ on the right as well brighter text colour for new notifications

LinkedIn

• Profile photo/company logo/photo combination shows type of notification at a glance

• Sentence structure includes ‘who’ it’s for and ‘what’ the notification is about changes depending on type of notification

• Time of receipt on right of notification

• New notifications have ‘blue’ highlight to contrast again others

Twitter

• Photo and icon combination shows type of notification at a glance

• Sentence structure includes ‘who’ it’s for and ‘what’ the notification is about changes depending on type of notification

• New notifications have blue background on item panel

Jira

• Profile picture shows ‘who’ did the action which provided you a notification

• Title shows ‘what’ the notification is

• Preview of notification gives a link to where it occured

• Time of receipt at bottom of notification

• New notifications have dot on the right and bold title text

Trello

• A whole card containing the action and a preview of all the changes made

• Title is the card name or subject

• Time of change next to all actions that have taken place within card timeline

• Notification dot and blue highlight behind new notifications

• Blue background highlight to indication new notification

  • Visually this is the easiest way to identify a new notification, and will couple well with bolder font weight for specific copy on notification or time of notification arrival

• Placement of notification time should be either below or on the right of the notification

  • Depending on the amount of copy shown for each notification item, maybe bottom alignment would be better to allow more space horizontally for copy

• Different sentence structure for different types of notifications

  • Allows for a subtle differentiation between different notification types

• Dot indicator to show new notifications

  • Takes up unnessary space where a different coloured background change achieve the same effect without taking up space

• Differenciate notification types achieved through icon or type title

  • Icon can be used to show differernt types of notification usually placed on the left of the item copy, but can take up horizontal space

  • A ‘type’ heading for each notification item could also be helpful but can then increase scrolling

Single Item Interaction

Marketo

• SomethingCommon mark as read or unread, delete actions

• Subscribe action allows setup of notification emails

Hubspot

• Something

Mailchimp

• Something

Facebook

• Something

LinkedIn

• Something

Twitter

• Something

Jira

• Something

Trello

• Something

Additional Settings

Marketo

• Something

Hubspot

• Something

Mailchimp

• Something

Facebook

• Something

LinkedIn

• Something

Twitter

• Something

Jira

• Something

Trello

• SomethingOption to hide all notifications of a particular type

• Clicking item marks as unread

• Clicking notification takes you to related area

Facebook

• Common mark as read or unread, delete actions

• Option to report issue to support

• Clicking notification takes you to related area

LinkedIn

• Common delete action

• Unfollow action unique to this platform

• Turn off function hides all notifications of particular type

• Can only mark a notification as read if it’s clicked on

• Clicking notification takes you to related area

Twitter

• Various social media specific actions

Jira

• When hovering over notification, can remove it with 'x'

• Can only mark individual notification as read by clicking it

• Clicking notification takes you to related area

Trello

• Various links in the timeline within card to take you to notification which marks as read

• Can click the blue notification dot to mark as read and unread

• Clicking notification takes you to related area

• Include ability to take action on types of notifications, e.g.

  • Campaign related notification can be clicked to go to that campaign

  • Report download ready notifiction can be clicked to take you to report download page

• How to handle mark as read or unread? Options:

  • Clicking on notification marks as read (but can be marked as read via global ‘mark as read’ button)

  • Dedicated button to mark individual items as read (allows more control)

• Do we allow deleting/hiding of notification items? Or keep all notification items permanently there and therefore can only be organised by read and unread

• Do we allow control to not show notifications of a particular type?

• Do we have sections for when notifications came in, e.g. section for todays notifications, for yesterday, for last week, etc.

Additional Settings

Marketo

• Filter for type of notification

• Subscribe action allows setup of notification emails

Hubspot

• Filter for type of notification

• Dedicated settings page (https://app.hubspot.com/notification-preferences/4975419/desktop)

  • Can turn on/off all bell notifications

  • Can turn on/off all popover notification

  • Can turn on/off all browser push notifications

  • Play browser sound when new notification comes in

  • Depending on notification type, decide if it comes in via bell/popover/browser notification

Facebook

• Dedicated settings page

  • Can select which types of notifications come through

LinkedIn

• Dedicated settings page

  • Can toggle on/off different types of notifications

Twitter

• Can turn on/off all browser/sms/email notifications

Jira

• Mark all as read option

• No dedicated settings page

• Tabs for different notification priority (direct/watching)

Trello

• Filter by unread notifications

• Mark all as ready button

• Change email frequency

Image Added

Image Added

Image Added

Image Added

Image Added

Image AddedImage AddedImage Added

• ‘Mark all as read' action

  • Include this action as it allows quick management of new notifications

• ‘View all notifications’ action

  • Do we have this dedicated page to show a history of all notifications?

  • This page can inclue a search to help find history of notifications

  • Can allow subscribing to different notification types/hiding notifications

• Depending on level of feature scope, a ‘subscribe’ service to send equivalent notification via email could be a great addition

  • But will then need a management area for this