Content Comparison

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

Mailchimp

• Bottom of sidebar placement by clicking on company logo, then notifications are under a sub menu

• Counter number appears in green badge

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

• SomethingFull page dedicated to all notifications

Hubspot

• Something

Mailchimp

• Something

• Opens with popout

Facebook

• SomethingOpens with popout

LinkedIn

• SomethingFull page dedicated to all notifications

Twitter

• SomethingFull page dedicated to all notifications

Jira

• Something

Trello

• SomethingOpens 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

Item Structure and Indicators

Marketo

• Something

Hubspot

• Something

Mailchimp

• Something

Facebook

• Something

LinkedIn

• 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

• Something

Jira

• Something

Trello

• Something

Item Actions

• 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

Item Interaction

Marketo

• Something

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

• Something